From 7077944b40ce753277510d8c1d06ed5291a87f15 Mon Sep 17 00:00:00 2001 From: makkelie_dev Date: Tue, 15 Oct 2024 15:46:18 +0200 Subject: [PATCH 1/3] Added useElementSize and useIsOverflowing --- .../@widgets/SwapWidget/SwapWidget.tsx | 1 - .../AvailableOrdersWidget.tsx | 8 ++ src/components/Overlay/Overlay.styles.tsx | 56 ++++------- src/components/Overlay/Overlay.tsx | 92 ++++++++++--------- src/components/Page/Page.styles.tsx | 7 +- src/components/Page/Page.tsx | 6 +- .../WidgetFrame/WidgetFrame.styles.tsx | 7 +- src/hooks/useElementSize.ts | 53 +++++++++++ src/hooks/useIsOverflowing.ts | 31 +++++++ src/styled-components/TopBar/Topbar.tsx | 2 +- 10 files changed, 169 insertions(+), 94 deletions(-) create mode 100644 src/hooks/useElementSize.ts create mode 100644 src/hooks/useIsOverflowing.ts diff --git a/src/components/@widgets/SwapWidget/SwapWidget.tsx b/src/components/@widgets/SwapWidget/SwapWidget.tsx index 2abb2d2c..cec4cc1b 100644 --- a/src/components/@widgets/SwapWidget/SwapWidget.tsx +++ b/src/components/@widgets/SwapWidget/SwapWidget.tsx @@ -658,7 +658,6 @@ const SwapWidget: FC = () => { setShowTokenSelectModalFor(null)} diff --git a/src/components/AvailableOrdersWidget/AvailableOrdersWidget.tsx b/src/components/AvailableOrdersWidget/AvailableOrdersWidget.tsx index 1bf926f7..10472e0c 100644 --- a/src/components/AvailableOrdersWidget/AvailableOrdersWidget.tsx +++ b/src/components/AvailableOrdersWidget/AvailableOrdersWidget.tsx @@ -44,6 +44,10 @@ const AvailableOrdersWidget = ({ }); const sortedOrders = useMemo(() => { + if (!bestRfqOrder) { + return []; + } + const ordersToSort: (FullOrderERC20 | OrderERC20)[] = [...orders]; if ( @@ -108,6 +112,10 @@ const AvailableOrdersWidget = ({ }); }; + if (!senderToken || !signerToken) { + return
; + } + return ( ` ${ScrollBarStyle}; `; -export const ContentContainer = styled(motion.div)` +export const ContentContainer = styled.div<{ isHidden: boolean }>` position: relative; border: 1px solid ${(props) => props.theme.colors.borderGrey}; border-radius: 2rem; - margin-block-end: 2rem; width: calc(100vw - 4rem); max-width: 38.75rem; height: fit-content; - max-height: 47.5rem; - min-height: 30rem; padding: 0 ${sizes.tradeContainerPadding}; - backdrop-filter: blur(25px); - + background: rgba(57, 122, 255, 0.11); + transform: translateY(${(props) => (props.isHidden ? "100vh" : "0vh")}); + pointer-events: ${(props) => (props.isHidden ? "none" : "visible")}; + transition: transform ease-out 0.3s; @media ${breakPoints.phoneOnly} { padding: 0 ${sizes.tradeContainerMobilePadding}; } - - &::before { - content: ""; - display: block; - position: absolute; - top: 0; - left: 0; - border-radius: 2rem; - width: 100%; - height: 100%; - background: ${(props) => props.theme.colors.darkBlue}; - filter: brightness(0.5); - opacity: 0.8; - pointer-events: none; - z-index: -1; - } `; export const TitleContainer = styled.div` @@ -131,32 +115,24 @@ export const OverlayActionButton = styled(Button)` ${OverlayActionButtonStyle}; `; -const containerDynamicHeightStyle = css` - padding-block-start: 0; - - @media (max-height: 700px) { - padding-block-start: 2rem; - } - - @media (min-height: 800px) { - margin-block-start: -2rem; - } -`; - export const Container = styled.div` display: flex; flex-direction: column; + justify-content: flex-start; align-items: center; position: absolute; top: 0; left: 0; width: 100%; - height: ${(props) => (props.hasDynamicHeight ? "auto" : "100%")}; - padding-block-start: 2rem; + height: 100svh; + padding-block: 2rem; + overflow-y: ${(props) => (props.showScrollbar ? "auto" : "hidden")};; pointer-events: ${(props) => (props.isHidden ? "none" : "visible")}; - z-index: 2; - - ${(props) => props.hasDynamicHeight && containerDynamicHeightStyle}; + background: ${(props) => + props.isHidden ? "rgba(0, 0, 0, 0);" : "rgba(0, 0, 0, 0.5)"}; + backdrop-filter: ${(props) => (props.isHidden ? "none" : "blur(25px)")}; + z-index: 10; + transition: background ease-out 0.3s; } `; diff --git a/src/components/Overlay/Overlay.tsx b/src/components/Overlay/Overlay.tsx index 93563d72..4d9aa05d 100644 --- a/src/components/Overlay/Overlay.tsx +++ b/src/components/Overlay/Overlay.tsx @@ -1,12 +1,15 @@ -import { FC, useContext, useEffect, useState } from "react"; +import { FC, useContext, useEffect, useRef, useState } from "react"; +import { createPortal } from "react-dom"; import { useTranslation } from "react-i18next"; import { AnimatePresence, useReducedMotion } from "framer-motion"; +import { useWindowSize } from "usehooks-ts"; import { InterfaceContext } from "../../contexts/interface/Interface"; import useDebounce from "../../hooks/useDebounce"; +import useElementSize from "../../hooks/useElementSize"; +import useIsOverflowing from "../../hooks/useIsOverflowing"; import { useKeyPress } from "../../hooks/useKeyPress"; -import CloseButton from "../../styled-components/CloseButton/CloseButton"; import { Container, StyledTitle, @@ -44,7 +47,6 @@ export const overlayShowHideAnimationDuration = 0.3; const Overlay: FC = ({ onClose, title = "", - hasDynamicHeight = false, isHidden = true, subTitle = "", shouldAnimate = true, @@ -52,11 +54,22 @@ const Overlay: FC = ({ className = "", }) => { const { t } = useTranslation(); + const ref = useRef(null); + const contentRef = useRef(null); const shouldReduceMotion = useReducedMotion(); const [initialized, setInitialized] = useState(false); const animationIsDisabled = !shouldAnimate || (!isHidden && !initialized); - const { setShowOverlay } = useContext(InterfaceContext); + const { showOverlay, setShowOverlay } = useContext(InterfaceContext); + const { height: containerHeight } = useWindowSize(); + const { height: contentHeight } = useElementSize(contentRef); + const [, hasOverflow] = useIsOverflowing(ref, [showOverlay, isHidden]); + const paddingBlock = 32; + const contentY = Math.max( + 0, + (containerHeight - paddingBlock * 2 - contentHeight) / 2 + ); + console.log(ref.current, hasOverflow); useKeyPress(onClose, ["Escape"]); @@ -79,50 +92,43 @@ const Overlay: FC = ({ [isHidden] ); - return ( + return createPortal( - - {!isHidden && ( - - - - - {title} - - {!!subTitle && ( - {subTitle} - )} - - - - {children} - - )} - - + + + + + {title} + + {!!subTitle && ( + {subTitle} + )} + + + + {children} + + , + document.getElementById("root") as HTMLElement ); }; diff --git a/src/components/Page/Page.styles.tsx b/src/components/Page/Page.styles.tsx index a305ca14..f521a5cd 100644 --- a/src/components/Page/Page.styles.tsx +++ b/src/components/Page/Page.styles.tsx @@ -24,24 +24,21 @@ export const InnerContainer = styled.div<{ $isScrollLocked?: boolean }>` } `; -export const StyledPage = styled.div` +export const StyledPage = styled.div<{ showOverlay?: boolean }>` position: relative; min-width: 18rem; - height: 100vh; - min-height: 37.5rem; + min-height: ${(props) => (props.showOverlay ? "unset" : "37.5rem")}; @media (min-height: 29rem) and (max-width: ${breakpointSizes.phone}) { display: flex; flex-direction: column; justify-content: center; - height: 100vh; padding-top: 0; padding-bottom: 0; } @media ${breakPoints.phoneOnly} { width: 100%; - height: 100vh; min-height: ${sizes.widgetMobileSize}; padding: 0 ${sizes.pageMobilePadding}; } diff --git a/src/components/Page/Page.tsx b/src/components/Page/Page.tsx index 6042d4f7..6b23f336 100644 --- a/src/components/Page/Page.tsx +++ b/src/components/Page/Page.tsx @@ -69,7 +69,11 @@ const Page: FC = ({ children, className }): ReactElement => { }, []); return ( - + diff --git a/src/components/WidgetFrame/WidgetFrame.styles.tsx b/src/components/WidgetFrame/WidgetFrame.styles.tsx index f71cf512..ae26fabc 100644 --- a/src/components/WidgetFrame/WidgetFrame.styles.tsx +++ b/src/components/WidgetFrame/WidgetFrame.styles.tsx @@ -41,9 +41,10 @@ export const StyledWidgetFrame = styled.div` align-items: center; justify-content: center; width: 100%; - height: 100%; - min-height: ${sizes.widgetSize}; - overflow-y: ${(props) => (props.$isOverlayOpen ? "auto" : "hidden")}; + height: fit-content; + // min-height: ${(props) => + props.$isOverlayOpen ? "unset" : sizes.widgetSize}; + overflow-y: ${(props) => (props.$isOverlayOpen ? "hidden" : "unset")}; @media ${breakPoints.tabletPortraitUp} { transition: transform 0.3s ease-in-out; diff --git a/src/hooks/useElementSize.ts b/src/hooks/useElementSize.ts new file mode 100644 index 00000000..caefab03 --- /dev/null +++ b/src/hooks/useElementSize.ts @@ -0,0 +1,53 @@ +import { RefObject, useEffect, useState } from "react"; + +interface Size { + width: number; + height: number; + scrollWidth: number; + scrollHeight: number; + top: number; +} + +const useElementSize = ( + ref: RefObject, + deps = [] as unknown[] +): Size => { + const [size, setSize] = useState({ + width: 0, + height: 0, + scrollWidth: 0, + scrollHeight: 0, + top: 0, + }); + + let resizeObserver: ResizeObserver; + + // biome-ignore lint/correctness/useExhaustiveDependencies: More dependencies not needed + useEffect( + (): (() => void) => { + resizeObserver = new ResizeObserver((entries): void => { + for (let i = 0; i < entries.length; i += 1) { + const entry = entries[i]; + + const { scrollWidth, scrollHeight } = entry.target; + const { width, height, top } = entry.target.getBoundingClientRect(); + + setSize({ width, height, scrollWidth, scrollHeight, top }); + } + }); + + if (ref.current) { + resizeObserver.observe(ref.current); + } + + return (): void => { + resizeObserver.disconnect(); + }; + }, + deps ? [ref, ...deps] : [ref] + ); + + return size; +}; + +export default useElementSize; diff --git a/src/hooks/useIsOverflowing.ts b/src/hooks/useIsOverflowing.ts new file mode 100644 index 00000000..964aae08 --- /dev/null +++ b/src/hooks/useIsOverflowing.ts @@ -0,0 +1,31 @@ +import { RefObject, useEffect, useState } from "react"; +import { useWindowSize } from "react-use"; + +import useElementSize from "./useElementSize"; + +const useIsOverflowing = ( + ref: RefObject, + deps = [] as unknown[] +): [boolean, boolean] => { + const [overflow, setOverflow] = useState<[boolean, boolean]>([false, false]); + const { width, height } = useElementSize(ref); + const { width: windowWidth, height: windowHeight } = useWindowSize(); + + // biome-ignore lint/correctness/useExhaustiveDependencies: need to observe these variables for changes + useEffect(() => { + if (ref.current) { + console.log( + ref.current.firstChild, + ref.current.scrollHeight, + ref.current.clientHeight + ); + const xOverflow = ref.current.scrollWidth > ref.current.clientWidth; + const yOverflow = ref.current.scrollHeight > ref.current.clientHeight; + setOverflow([xOverflow, yOverflow]); + } + }, [width, windowWidth, height, windowHeight, ...deps]); + + return overflow; +}; + +export default useIsOverflowing; diff --git a/src/styled-components/TopBar/Topbar.tsx b/src/styled-components/TopBar/Topbar.tsx index ee60e466..269fc5eb 100644 --- a/src/styled-components/TopBar/Topbar.tsx +++ b/src/styled-components/TopBar/Topbar.tsx @@ -21,7 +21,7 @@ export const TopBar = styled.div` width: calc(100% - 3rem); height: 3rem; padding: 1.5rem; - z-index: 1; + z-index: 20; pointer-events: none; > * { From 56841582ec7958f14547aa79cd1347d0d20f6700 Mon Sep 17 00:00:00 2001 From: makkelie_dev Date: Fri, 18 Oct 2024 22:28:42 +0200 Subject: [PATCH 2/3] Fixed styling of Overlay and WidgetFrame --- .../OrderTypesModal.styles.tsx | 4 +-- src/components/Overlay/Overlay.styles.tsx | 3 +-- src/components/Overlay/Overlay.tsx | 17 ++++++------ src/components/Page/Page.styles.tsx | 9 +++++-- src/components/Page/Page.tsx | 6 +---- .../TransactionsTab.styles.tsx | 2 +- .../WalletProviderList.styles.tsx | 2 +- .../WidgetFrame/WidgetFrame.styles.tsx | 13 ++------- src/hooks/useElementSize.ts | 27 ++++++++++++++----- src/style/sizes.ts | 4 +-- src/styled-components/Modal/Modal.tsx | 2 +- 11 files changed, 47 insertions(+), 42 deletions(-) diff --git a/src/components/InformationModals/subcomponents/OrderTypesModal/OrderTypesModal.styles.tsx b/src/components/InformationModals/subcomponents/OrderTypesModal/OrderTypesModal.styles.tsx index 3bfe293e..f17ec124 100644 --- a/src/components/InformationModals/subcomponents/OrderTypesModal/OrderTypesModal.styles.tsx +++ b/src/components/InformationModals/subcomponents/OrderTypesModal/OrderTypesModal.styles.tsx @@ -3,9 +3,9 @@ import styled from "styled-components/macro"; import { OverlayActionButton } from "../../../Overlay/Overlay.styles"; export const Container = styled.div` - padding-bottom: 2rem; + padding-bottom: 3rem; `; export const StyledCloseButton = styled(OverlayActionButton)` - margin-top: 1.5rem; + margin-top: 3rem; `; diff --git a/src/components/Overlay/Overlay.styles.tsx b/src/components/Overlay/Overlay.styles.tsx index 6f7c9c1e..b30d5ad0 100644 --- a/src/components/Overlay/Overlay.styles.tsx +++ b/src/components/Overlay/Overlay.styles.tsx @@ -1,4 +1,3 @@ -import { motion } from "framer-motion"; import { css } from "styled-components"; import styled from "styled-components/macro"; @@ -64,7 +63,7 @@ export const TitleContainer = styled.div` align-items: center; flex-direction: row; justify-content: space-between; - margin-block-end: 1rem; + margin-block-end: 2rem; padding-block-start: ${sizes.tradeContainerPadding}; transition: background ease-in-out 0.3s; diff --git a/src/components/Overlay/Overlay.tsx b/src/components/Overlay/Overlay.tsx index 4d9aa05d..77600b47 100644 --- a/src/components/Overlay/Overlay.tsx +++ b/src/components/Overlay/Overlay.tsx @@ -56,28 +56,22 @@ const Overlay: FC = ({ const { t } = useTranslation(); const ref = useRef(null); const contentRef = useRef(null); - const shouldReduceMotion = useReducedMotion(); - const [initialized, setInitialized] = useState(false); - const animationIsDisabled = !shouldAnimate || (!isHidden && !initialized); const { showOverlay, setShowOverlay } = useContext(InterfaceContext); + const [isAnimatedOut, setIsAnimatedOut] = useState(false); const { height: containerHeight } = useWindowSize(); const { height: contentHeight } = useElementSize(contentRef); - const [, hasOverflow] = useIsOverflowing(ref, [showOverlay, isHidden]); const paddingBlock = 32; const contentY = Math.max( 0, (containerHeight - paddingBlock * 2 - contentHeight) / 2 ); - console.log(ref.current, hasOverflow); useKeyPress(onClose, ["Escape"]); useEffect(() => { - setInitialized(true); - }, []); + setIsAnimatedOut(false); - useEffect(() => { if (isHidden) { setShowOverlay(false); } @@ -87,6 +81,10 @@ const Overlay: FC = ({ () => { // Make sure the animation ended before setting the showOverlay state setShowOverlay(!isHidden); + + if (isHidden) { + setIsAnimatedOut(true); + } }, 250, [isHidden] @@ -99,6 +97,9 @@ const Overlay: FC = ({ hasOverflow={!contentY} isHidden={isHidden} showScrollbar={!!showOverlay && !isHidden} + style={{ + visibility: isAnimatedOut ? "hidden" : "visible", + }} className={className} > ` position: relative; width: 100%; height: 100%; + flex-grow: 1; @media ${breakPoints.phoneOnly}, ${breakPoints.shallowScreenOnly} { justify-content: flex-start; @@ -25,9 +26,14 @@ export const InnerContainer = styled.div<{ $isScrollLocked?: boolean }>` `; export const StyledPage = styled.div<{ showOverlay?: boolean }>` + display: flex; + flex-direction: column; position: relative; min-width: 18rem; - min-height: ${(props) => (props.showOverlay ? "unset" : "37.5rem")}; + min-height: ${(props) => (props.showOverlay ? "unset" : "100vh")}; + max-height: ${(props) => (props.showOverlay ? "100vh" : "unset")}; + overflow-x: hidden; + overflow-y: ${(props) => (props.showOverlay ? "hidden" : "unset")}; @media (min-height: 29rem) and (max-width: ${breakpointSizes.phone}) { display: flex; @@ -39,7 +45,6 @@ export const StyledPage = styled.div<{ showOverlay?: boolean }>` @media ${breakPoints.phoneOnly} { width: 100%; - min-height: ${sizes.widgetMobileSize}; padding: 0 ${sizes.pageMobilePadding}; } `; diff --git a/src/components/Page/Page.tsx b/src/components/Page/Page.tsx index 6b23f336..6e0eb450 100644 --- a/src/components/Page/Page.tsx +++ b/src/components/Page/Page.tsx @@ -69,11 +69,7 @@ const Page: FC = ({ children, className }): ReactElement => { }, []); return ( - + diff --git a/src/components/TransactionsTab/TransactionsTab.styles.tsx b/src/components/TransactionsTab/TransactionsTab.styles.tsx index c083e85f..94e5bce6 100644 --- a/src/components/TransactionsTab/TransactionsTab.styles.tsx +++ b/src/components/TransactionsTab/TransactionsTab.styles.tsx @@ -23,7 +23,7 @@ export const Container = styled(motion.div)` display: flex; flex-direction: column; width: 100%; - max-width: ${sizes.widgetMobileSize}; + max-width: ${sizes.widgetMobileWidth}; height: 100%; padding: 1.5rem 1.5rem 0; background-color: ${(props) => props.theme.colors.black}; diff --git a/src/components/WalletProviderList/WalletProviderList.styles.tsx b/src/components/WalletProviderList/WalletProviderList.styles.tsx index b376d161..0ba27908 100644 --- a/src/components/WalletProviderList/WalletProviderList.styles.tsx +++ b/src/components/WalletProviderList/WalletProviderList.styles.tsx @@ -4,7 +4,7 @@ export const StyledWalletProviderList = styled.div` display: flex; flex-direction: column; margin-block-start: 3rem; - padding-block-end: 2rem; + padding-block-end: 3rem; `; export const TitleContainer = styled.div` diff --git a/src/components/WidgetFrame/WidgetFrame.styles.tsx b/src/components/WidgetFrame/WidgetFrame.styles.tsx index ae26fabc..921fe4de 100644 --- a/src/components/WidgetFrame/WidgetFrame.styles.tsx +++ b/src/components/WidgetFrame/WidgetFrame.styles.tsx @@ -2,7 +2,6 @@ import styled from "styled-components/macro"; import breakPoints from "../../style/breakpoints"; import { sizes } from "../../style/sizes"; -import { Container as OverlayContainer } from "../Overlay/Overlay.styles"; export const WidgetFrameWrapper = styled.div` display: flex; @@ -10,9 +9,8 @@ export const WidgetFrameWrapper = styled.div` position: relative; border-radius: 0.25rem; margin: 0 ${sizes.pageMobilePadding}; - width: ${sizes.widgetSize}; + width: ${sizes.widgetWidth}; height: fit-content; - min-height: ${sizes.widgetSize}; padding: ${sizes.tradeContainerPadding}; transition: box-shadow 0.3s ease-in-out; will-change: transform; @@ -23,7 +21,6 @@ export const WidgetFrameWrapper = styled.div` @media ${breakPoints.phoneOnly} { width: 100%; - min-height: ${sizes.widgetMobileSize}; margin: 0; padding: ${sizes.tradeContainerMobilePadding}; } @@ -40,10 +37,9 @@ export const StyledWidgetFrame = styled.div` display: flex; align-items: center; justify-content: center; + flex-grow: 1; width: 100%; height: fit-content; - // min-height: ${(props) => - props.$isOverlayOpen ? "unset" : sizes.widgetSize}; overflow-y: ${(props) => (props.$isOverlayOpen ? "hidden" : "unset")}; @media ${breakPoints.tabletPortraitUp} { @@ -51,12 +47,7 @@ export const StyledWidgetFrame = styled.div` transform: ${(props) => (props.$isOpen ? "translate(-6.5rem, 0rem)" : "0")}; } - @media ${breakPoints.phoneOnly}, ${breakPoints.shallowScreenOnly} { - margin-bottom: 1.5rem; - } - @media ${breakPoints.phoneOnly} { margin-bottom: 0; - min-height: ${sizes.widgetMobileSize}; } `; diff --git a/src/hooks/useElementSize.ts b/src/hooks/useElementSize.ts index caefab03..d399bda3 100644 --- a/src/hooks/useElementSize.ts +++ b/src/hooks/useElementSize.ts @@ -1,4 +1,4 @@ -import { RefObject, useEffect, useState } from "react"; +import { RefObject, useCallback, useEffect, useState } from "react"; interface Size { width: number; @@ -20,19 +20,32 @@ const useElementSize = ( top: 0, }); - let resizeObserver: ResizeObserver; + // Add debounce function + const debounce = (func: Function, delay: number) => { + let timeoutId: NodeJS.Timeout; + return (...args: any[]) => { + clearTimeout(timeoutId); + timeoutId = setTimeout(() => func(...args), delay); + }; + }; + + // Create a memoized, debounced version of setSize + const debouncedSetSize = useCallback( + debounce((newSize: Size) => { + setSize(newSize); + }, 100), + [] + ); // biome-ignore lint/correctness/useExhaustiveDependencies: More dependencies not needed useEffect( (): (() => void) => { - resizeObserver = new ResizeObserver((entries): void => { - for (let i = 0; i < entries.length; i += 1) { - const entry = entries[i]; - + const resizeObserver = new ResizeObserver((entries) => { + for (const entry of entries) { const { scrollWidth, scrollHeight } = entry.target; const { width, height, top } = entry.target.getBoundingClientRect(); - setSize({ width, height, scrollWidth, scrollHeight, top }); + debouncedSetSize({ width, height, scrollWidth, scrollHeight, top }); } }); diff --git a/src/style/sizes.ts b/src/style/sizes.ts index 7f934be8..537023ca 100644 --- a/src/style/sizes.ts +++ b/src/style/sizes.ts @@ -4,6 +4,6 @@ export const sizes = { toolbarMaxHeight: "44rem", tradeContainerPadding: "3.75rem", tradeContainerMobilePadding: "2rem", - widgetSize: "37.5rem", - widgetMobileSize: "27.75rem", + widgetWidth: "37.5rem", + widgetMobileWidth: "27.75rem", }; diff --git a/src/styled-components/Modal/Modal.tsx b/src/styled-components/Modal/Modal.tsx index b66c73b6..e213cab3 100644 --- a/src/styled-components/Modal/Modal.tsx +++ b/src/styled-components/Modal/Modal.tsx @@ -13,7 +13,7 @@ export const ModalParagraph = styled(InfoSubHeading)` `; export const ModalSubTitle = styled(Title)` - margin: 2.5rem 0 0.5rem; + margin: 2rem 0 0.5rem; font-size: 1rem; &:first-child { From d86a1fb266c778d708e3917bd054e63b7090bef3 Mon Sep 17 00:00:00 2001 From: makkelie_dev Date: Sat, 19 Oct 2024 17:22:56 +0200 Subject: [PATCH 3/3] Fixed don feedback --- src/components/Page/Page.styles.tsx | 3 ++- 1 file changed, 2 insertions(+), 1 deletion(-) diff --git a/src/components/Page/Page.styles.tsx b/src/components/Page/Page.styles.tsx index 35dcb6cc..aa828378 100644 --- a/src/components/Page/Page.styles.tsx +++ b/src/components/Page/Page.styles.tsx @@ -30,7 +30,8 @@ export const StyledPage = styled.div<{ showOverlay?: boolean }>` flex-direction: column; position: relative; min-width: 18rem; - min-height: ${(props) => (props.showOverlay ? "unset" : "100vh")}; + min-height: 100vh; + min-height: 100svh; max-height: ${(props) => (props.showOverlay ? "100vh" : "unset")}; overflow-x: hidden; overflow-y: ${(props) => (props.showOverlay ? "hidden" : "unset")};