feat(FullHeightLayout): add this component to fix ios 100vh issue

components/system/components/FullHeightLayout.js

@@ -0,0 +1,31 @@
+import * as React from "react";
+
+import { useIsomorphicLayoutEffect } from "~/common/hooks";
+import { css } from "@emotion/react";
+
+const updateCssVarFullHeight = () => {
+  const doc = document.documentElement;
+  doc.style.setProperty("--full-height", `${window.innerHeight}px`);
+};
+
+const STYLES_FULL_HEIGHT = css`
+  height: 100vh;
+  height: var(--full-height);
+`;
+
+export function FullHeightLayout({ children, css, as = "div", ...props }) {
+  useIsomorphicLayoutEffect(() => {
+    if (typeof window === "undefined") return;
+    updateCssVarFullHeight();
+    window.addEventListener("resize", updateCssVarFullHeight);
+    return () => window.removeEventListener("resize", updateCssVarFullHeight);
+  }, []);
+
+  const Component = as;
+
+  return (
+    <Component css={[STYLES_FULL_HEIGHT, css]} {...props}>
+      {children}
+    </Component>
+  );
+}

components/system/components/GlobalCarousel/index.js

@@ -17,6 +17,7 @@ import {
 } from "~/common/hooks";
 import { Show } from "~/components/utility/Show";
 import { ModalPortal } from "~/components/core/ModalPortal";
+import { FullHeightLayout } from "~/components/system/components/FullHeightLayout";
 
 import SlateMediaObject from "~/components/core/SlateMediaObject";
 import LinkIcon from "~/components/core/LinkIcon";
@@ -810,7 +811,6 @@ const STYLES_ROOT = (theme) => css`
   right: 0;
   bottom: 0;
   top: 0;
-  height: 100vh;
   color: ${Constants.system.white};
   z-index: ${Constants.zindex.modal};
   background-color: rgba(0, 0, 0, 0.8);
@@ -871,7 +871,7 @@ export function GlobalCarousel({
   });
 
   return (
-    <div css={STYLES_ROOT}>
+    <FullHeightLayout css={STYLES_ROOT}>
       {isMobile ? (
         <CarouselHeaderMobile
           isStandalone={isStandalone}
@@ -921,6 +921,6 @@ export function GlobalCarousel({
           isOwner={isOwner}
         />
       ) : null}
-    </div>
+    </FullHeightLayout>
   );
 }

components/system/components/GlobalCarousel/jumpers/MobileLayout.js

@@ -3,6 +3,7 @@ import * as Styles from "~/common/styles";
 
 import { css } from "@emotion/react";
 import { motion } from "framer-motion";
+import { FullHeightLayout } from "~/components/system/components/FullHeightLayout";
 
 /* -------------------------------------------------------------------------------------------------
  *  Root
@@ -12,7 +13,6 @@ const STYLES_JUMPER_MOBILE_WRAPPER = (theme) => css`
   ${Styles.VERTICAL_CONTAINER};
   position: fixed;
   width: 100%;
-  height: 100vh;
   top: 0;
   left: 0;
 
@@ -29,7 +29,8 @@ const STYLES_JUMPER_MOBILE_WRAPPER = (theme) => css`
 
 function Root({ children, ...props }) {
   return (
-    <motion.div
+    <FullHeightLayout
+      as={motion.div}
       initial={{ opacity: 0 }}
       animate={{ opacity: 1 }}
       transition={{ duration: 0.25, ease: "easeInOut" }}
@@ -37,7 +38,7 @@ function Root({ children, ...props }) {
       {...props}
     >
       {children}
-    </motion.div>
+    </FullHeightLayout>
   );
 }
 
@@ -46,7 +47,7 @@ function Root({ children, ...props }) {
  * -----------------------------------------------------------------------------------------------*/
 
 const STYLES_JUMPER_MOBILE_HEADER = css`
-  ${Styles.VERTICAL_CONTAINER};
+  ${Styles.HORIZONTAL_CONTAINER_CENTERED};
   padding: 13px 16px 11px;
 `;