100svh

src/components/Cart/Cart.tsx

@@ -129,7 +129,7 @@ export function Cart({
                             onDelete={() => handleDelete(product)}
                         />
                     ))}
-                    {products.length === visibleProducts.length && isComplete && !isLoading && <NotEnoughWrapper>
+                    {products.length > 0 && products.length === visibleProducts.length && isComplete && !isLoading && <NotEnoughWrapper>
                         <ShowNotEnough type="button" onClick={() => {
                             reachGoal('ac_not_enough')
                             setShowNotEnoughPopup(true)

src/components/Cart/CartItem.tsx

@@ -150,7 +150,7 @@ const MenuButton = styled.button`
 `;
 
 const Overlay = styled.div`
-    height: 100vh;
+    height: 100svh;
     position: fixed;
     display: flex;
     inset: 0;

src/components/Cart/CelebrationCanvas.tsx

@@ -31,7 +31,7 @@ const Container = styled.div`
   top: 0;
   left: 0;
   width: 100vw;
-  height: 100vh;
+  height: 100svh;
   z-index: 6;
   pointer-events: none;
 `;

src/components/Cart/FinitaLaCommedia.tsx

@@ -32,7 +32,7 @@ const Overlay = styled.div`
     align-items: center;
     z-index: 4;
     overflow: auto;
-    height: 100vh;
+    height: 100svh;
 `;
 const Window = styled.div`
     background-color: #ffffff;

src/components/Cart/NotEnoughPopup.tsx

@@ -49,7 +49,7 @@ const V16 = styled.div`height: 16px;`;
 const V24 = styled.div`height: 24px;`;
 
 const Overlay = styled.div`
-    height: 100vh;
+    height: 100svh;
     position: fixed;
     display: flex;
     inset: 0;

src/components/Cart/OrderPopup.tsx

@@ -33,7 +33,7 @@ export const OrderPopup = ({setShowCompletePopup}: any) => {
 }
 
 const Overlay = styled.div`
-    height: 100vh;
+    height: 100svh;
     position: fixed;
     display: flex;
     inset: 0;

src/components/Cart/ProductModal.tsx

@@ -63,7 +63,7 @@ export function ProductModal({
 }
 
 const Overlay = styled.div`
-    height: 100vh;
+    height: 100svh;
     position: fixed;
     display: flex;
     inset: 0;

src/components/Family/PersonModal.tsx

@@ -249,7 +249,7 @@ export function PersonModal({
 }
 
 const Overlay = styled.div`
-    height: 100vh;
+    height: 100svh;
     position: fixed;
     inset: 0;
     background: rgba(0, 0, 0, 0.4);