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

src_static/auto_cart.html

@@ -39,7 +39,7 @@
             background-attachment: fixed;
             background-size: contain;
             background-position: left top;
-            display: flex; justify-content: center; align-items: flex-start; padding: 40px 20px; min-height: 100vh;
+            display: flex; justify-content: center; align-items: flex-start; padding: 40px 20px; min-height: 100svh;
         }
         .container {
             position: relative;

src_static/index.html

@@ -30,9 +30,9 @@
         />
     </noscript>
     <style nonce="**MY_PRETTY_CSP_NONCE**">
-        html, body {height: 100vh;overflow: hidden;}
+        html, body {height: 100svh;overflow: hidden;}
         body {background: #FCFFFB;padding:0;margin:0;font-family: 'Onest', system-ui, -apple-system, 'Segoe UI', Roboto, Helvetica, sans-serif;}
-        #scroller {scroll-snap-type: y mandatory;overflow-y: scroll;overflow-x:hidden;height: 100vh;scroll-behavior: smooth;}
+        #scroller {scroll-snap-type: y mandatory;overflow-y: scroll;overflow-x:hidden;height: 100svh;scroll-behavior: smooth;}
         .container {max-width: 1440px;margin: 0 auto;position: relative;width:100%;}
         .text_secondary {color:#4e7067;}
         h1 {font-size: 254px;padding:0;margin:0;}
@@ -55,7 +55,7 @@
         #try_button {background-color: #FFBA00;padding:13px 43px;font-weight: bold;border-radius: 100px;color:#0C3B2E;text-decoration: none;
             display: flex;}
 
-        .page_container {width: 100%;min-height: 100vh;display: flex;flex-direction: column;align-items: center;justify-content: center;scroll-snap-align: start;min-width: 360px;padding-top: 39px;}
+        .page_container {width: 100%;min-height: 100svh;display: flex;flex-direction: column;align-items: center;justify-content: center;scroll-snap-align: start;min-width: 360px;padding-top: 39px;}
         #page_index {}
         #page_index_content {align-items: start;}
         #page_index p {font-size: 18px;}
@@ -171,7 +171,7 @@
         @media (max-width: 600px){
             br.big {display: none;}
             br.medium {display: initial !important;}
-            #page_index {height: 100vh;padding-top: 0;}
+            #page_index {height: 100svh;padding-top: 0;}
             .big_index_greeting {font-size: 85px;line-height: 81px;text-align: left;max-width: 80%;margin: 0 20px;}
             .big_index_greeting:last-child {text-align: right;}
             #page_index p {font-size: 24px;text-align: center}