100svh

src/App.tsx

@@ -295,7 +295,7 @@ const Overlay = styled.div`
     align-items: center;
     z-index: 9;
     overflow: auto;
-    height: 100vh;
+    height: 100svh;
 
     div {
         --color-1: #ffa0a0;
@@ -321,7 +321,7 @@ const Overlay = styled.div`
 `;
 
 const LoadingPage = styled.div`
-    min-height: 100vh;
+    min-height: 100svh;
     display: flex;
     align-items: center;
     justify-content: center;

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);

src/styles/GlobalStyle.ts

@@ -28,7 +28,7 @@ export const GlobalStyle = createGlobalStyle`
         background-attachment: fixed;
         background-size: contain;
         background-position: left top;
-        min-height: 100vh;
+        min-height: 100svh;
 
         ${({ theme }) => theme.media.mobile(css`
             background-position: center 72%;