@heycater/qualification-funnel 1.19.24 → 1.19.27

package/dist/heycater-funnel.iife.js

@@ -2620,17 +2620,17 @@
   from { opacity: 0; transform: translateY(8px); }
   to { opacity: 1; transform: none; }
 `,qH=_p.div`
+  position: fixed;
+  inset: 0;
   display: flex;
-  min-height: 100vh;
   background: ${PW};
+  z-index: 1000;
 `,WH=_p.div`
   flex: 1;
   display: flex;
   flex-direction: column;
   min-width: 0;
-  min-height: 0;
-  height: 100vh;
-  overflow: hidden;
+  overflow-y: auto;
   ${({$fullWidth:e})=>e&&"width: 100%;"}
 `,VH=_p.div`
   flex: none;
@@ -2698,7 +2698,6 @@
   flex-direction: column;
   align-items: center;
   justify-content: flex-start;
-  overflow-y: auto;
   padding: 14px 18px 20px;
   animation: ${BH} 0.34s cubic-bezier(0.2, 0.8, 0.2, 1) both;
 
@@ -2745,7 +2744,8 @@
     margin-top: 32px;
   }
 `,oZ=_p.div`
-  flex: none;
+  position: sticky;
+  bottom: 0;
   padding: 12px 18px 16px;
   display: flex;
   flex-direction: column;
@@ -2754,6 +2754,7 @@
   border-top: 1px solid #f0f0f0;
   background: ${PW};
   z-index: 10;
+  margin-top: auto;
 
   @media (min-width: 960px) {
     padding: 16px 44px 22px;

package/dist/index.cjs.js

@@ -2532,17 +2532,17 @@ object-assign
   from { opacity: 0; transform: translateY(8px); }
   to { opacity: 1; transform: none; }
 `,$D=o.div`
+  position: fixed;
+  inset: 0;
   display: flex;
-  min-height: 100vh;
   background: ${CE};
+  z-index: 1000;
 `,DD=o.div`
   flex: 1;
   display: flex;
   flex-direction: column;
   min-width: 0;
-  min-height: 0;
-  height: 100vh;
-  overflow: hidden;
+  overflow-y: auto;
   ${({$fullWidth:e})=>e&&"width: 100%;"}
 `,zD=o.div`
   flex: none;
@@ -2610,7 +2610,6 @@ object-assign
   flex-direction: column;
   align-items: center;
   justify-content: flex-start;
-  overflow-y: auto;
   padding: 14px 18px 20px;
   animation: ${OD} 0.34s cubic-bezier(0.2, 0.8, 0.2, 1) both;
 
@@ -2657,7 +2656,8 @@ object-assign
     margin-top: 32px;
   }
 `,HD=o.div`
-  flex: none;
+  position: sticky;
+  bottom: 0;
   padding: 12px 18px 16px;
   display: flex;
   flex-direction: column;
@@ -2666,6 +2666,7 @@ object-assign
   border-top: 1px solid #f0f0f0;
   background: ${CE};
   z-index: 10;
+  margin-top: auto;
 
   @media (min-width: 960px) {
     padding: 16px 44px 22px;

package/dist/index.esm.js

@@ -32588,18 +32588,18 @@ const fadeIn = keyframes`
   to { opacity: 1; transform: none; }
 `;
 const FunnelContainer = styled.div`
+  position: fixed;
+  inset: 0;
   display: flex;
-  min-height: 100vh;
   background: ${REDESIGN_COLORS.white};
+  z-index: 1000;
 `;
 const MainContent = styled.div`
   flex: 1;
   display: flex;
   flex-direction: column;
   min-width: 0;
-  min-height: 0;
-  height: 100vh;
-  overflow: hidden;
+  overflow-y: auto;
   ${({ $fullWidth }) => $fullWidth && "width: 100%;"}
 `;
 const MobileHeader = styled.div`
@@ -32678,7 +32678,6 @@ const ContentArea = styled.div`
   flex-direction: column;
   align-items: center;
   justify-content: flex-start;
-  overflow-y: auto;
   padding: 14px 18px 20px;
   animation: ${fadeIn} 0.34s cubic-bezier(0.2, 0.8, 0.2, 1) both;
 
@@ -32729,7 +32728,8 @@ const StepContent = styled.div`
   }
 `;
 const FooterBar = styled.div`
-  flex: none;
+  position: sticky;
+  bottom: 0;
   padding: 12px 18px 16px;
   display: flex;
   flex-direction: column;
@@ -32738,6 +32738,7 @@ const FooterBar = styled.div`
   border-top: 1px solid #f0f0f0;
   background: ${REDESIGN_COLORS.white};
   z-index: 10;
+  margin-top: auto;
 
   @media (min-width: 960px) {
     padding: 16px 44px 22px;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@heycater/qualification-funnel",
-  "version": "1.19.24",
+  "version": "1.19.27",
   "type": "module",
   "description": "Heycater embedded qualification funnel widget",
   "main": "dist/index.cjs.js",