Merge pull request #3974 from JoinColony/fix/3352-prefer-dvh-over-vh

Fix: Ensure contents are not clipped on mobile browsers
JoinColony · Jan 29, 2025 · b11c9b3 · b11c9b3
2 parents a9d9969 + ad7df75
commit b11c9b3
Show file tree

Hide file tree

Showing 12 changed files with 35 additions and 30 deletions.
diff --git a/src/components/common/Extensions/UserHub/UserHub.tsx b/src/components/common/Extensions/UserHub/UserHub.tsx
@@ -6,6 +6,7 @@ import { FeatureFlagsContext } from '~context/FeatureFlagsContext/FeatureFlagsCo
 import { useNotificationsUserContext } from '~context/Notifications/NotificationsUserContext/NotificationsUserContext.ts';
 import CryptoToFiatContextProvider from '~frame/v5/pages/UserCryptoToFiatPage/context/CryptoToFiatContextProvider.tsx';
 import { useMobile } from '~hooks/index.ts';
+import { useLockBodyScroll } from '~hooks/useLockBodyScroll/index.ts';
 import { formatText } from '~utils/intl.ts';
 import Select from '~v5/common/Fields/Select/index.ts';
 import NotificationsEnabledWrapper from '~v5/common/NotificationsEnabledWrapper/NotificationsEnabledWrapper.tsx';
@@ -77,16 +78,21 @@ const UserHub: FC<Props> = ({
   //   </ButtonLink>
   // );
 
+  useLockBodyScroll(isMobile);
+
   return (
     <div
-      className={clsx('flex h-full flex-col sm:w-[42.625rem] sm:flex-row', {
-        'sm:h-[27.75rem]':
-          selectedTab !== UserHubTab.Balance &&
-          selectedTab !== UserHubTab.CryptoToFiat,
-        'sm:min-h-[27.75rem]': selectedTab === UserHubTab.Balance,
-      })}
+      className={clsx(
+        'mt-5.5 flex h-dynamic-screen flex-col sm:mt-0 sm:h-auto sm:w-[42.625rem] sm:flex-row',
+        {
+          'sm:h-[27.75rem]':
+            selectedTab !== UserHubTab.Balance &&
+            selectedTab !== UserHubTab.CryptoToFiat,
+          'sm:min-h-[27.75rem]': selectedTab === UserHubTab.Balance,
+        },
+      )}
     >
-      <div className="sticky left-0 right-0 top-0 flex shrink-0 flex-col justify-between border-b border-b-gray-200 bg-base-white px-6 pb-6 pt-4 sm:static sm:left-auto sm:right-auto sm:top-auto sm:w-[216px] sm:border-b-0 sm:border-r sm:border-gray-100 sm:bg-transparent sm:p-6 sm:px-6">
+      <div className="sticky left-0 right-0 top-0 flex shrink-0 flex-col justify-between border-b border-b-gray-200 bg-base-white px-6 pb-6 sm:static sm:left-auto sm:right-auto sm:top-auto sm:w-[216px] sm:border-b-0 sm:border-r sm:border-gray-100 sm:bg-transparent sm:p-6 sm:px-6">
         {isMobile ? (
           <Select
             options={filteredTabList}

diff --git a/src/components/common/Extensions/UserNavigation/partials/UserMenu/UserMenu.tsx b/src/components/common/Extensions/UserNavigation/partials/UserMenu/UserMenu.tsx
@@ -70,11 +70,11 @@ const UserMenu: FC<UserMenuProps> = ({
       tooltipProps={tooltipProps}
       withTooltipStyles={!isTablet}
       className={clsx(
-        'w-full overflow-hidden bg-base-white p-6 md:w-80 md:rounded-lg md:border md:border-gray-100 md:shadow-default',
+        '!h-dynamic-screen w-full overflow-auto bg-base-white p-6 sm:h-auto md:w-80 md:rounded-lg md:border md:border-gray-100 md:shadow-default',
         {
-          '!top-[calc(var(--header-nav-section-height))] h-[calc(100vh-var(--top-content-height))] !translate-y-0':
+          '!top-[calc(var(--header-nav-section-height))] !translate-y-0':
             isTablet && isActionSidebarOpen,
-          '!top-[calc(var(--header-nav-section-height)+var(--top-content-height))] h-[calc(100vh-var(--top-content-height))] !translate-y-0':
+          '!top-[calc(var(--header-nav-section-height)+var(--top-content-height))] !translate-y-0':
             isTablet && !isActionSidebarOpen,
         },
       )}

diff --git a/src/components/v5/common/ActionSidebar/ActionSidebar.tsx b/src/components/v5/common/ActionSidebar/ActionSidebar.tsx
@@ -184,7 +184,7 @@ const ActionSidebar: FC<PropsWithChildren<ActionSidebarProps>> = ({
           isolate
           z-sidebar
           flex
-          h-[calc(100vh-var(--top-content-height))]
+          h-[calc(100dvh-var(--top-content-height))]
           w-full
           flex-col
           border
@@ -195,7 +195,7 @@ const ActionSidebar: FC<PropsWithChildren<ActionSidebarProps>> = ({
           transition-[max-width]
           md:bottom-0
           md:top-[calc(var(--top-content-height)+16px)]
-          md:h-[calc(100vh-var(--top-content-height)-2rem)]
+          md:h-[calc(100dvh-var(--top-content-height)-2rem)]
           md:w-[calc(100vw-248px)]
           md:rounded-l-lg
         `,

diff --git a/...ommon/ActionSidebar/partials/TokenSelect/partials/TokenSearchSelect/TokenSearchSelect.tsx b/...ommon/ActionSidebar/partials/TokenSelect/partials/TokenSearchSelect/TokenSearchSelect.tsx
@@ -120,7 +120,7 @@ const TokenSearchSelect = React.forwardRef<
             className={clsx({
               'flex h-5 justify-center':
                 isLoading || isTokensListDataLoading || loadingTokenData,
-              'max-h-[calc(100vh-12rem)] overflow-y-auto px-1.5 pr-1 sm:max-h-none sm:w-full':
+              'max-h-[calc(100dvh-12rem)] overflow-y-auto px-1.5 pr-1 sm:max-h-none sm:w-full':
                 !(isLoading || isTokensListDataLoading || loadingTokenData),
             })}
           >

diff --git a/...ponents/v5/frame/ColonyHome/partials/TotalInOutBalance/partials/BarChartLoadingLayers.tsx b/...ponents/v5/frame/ColonyHome/partials/TotalInOutBalance/partials/BarChartLoadingLayers.tsx
@@ -7,8 +7,8 @@ const LabelLoadingSkeleton = () => (
 );
 const BarGroupLoadingSkeleton = () => (
   <div className="flex flex-row gap-1">
-    <LoadingSkeleton isLoading className="h-1 w-[22px] rounded" />
-    <LoadingSkeleton isLoading className="h-1 w-[22px] rounded" />
+    <LoadingSkeleton isLoading className="h-1 w-5.5 rounded" />
+    <LoadingSkeleton isLoading className="h-1 w-5.5 rounded" />
   </div>
 );
 

diff --git a/src/components/v5/frame/PageLayout/PageLayout.tsx b/src/components/v5/frame/PageLayout/PageLayout.tsx
@@ -46,9 +46,9 @@ const PageLayout: FC<PropsWithChildren<PageLayoutProps>> = ({
         pauseOnHover
         closeButton={CloseButton}
       />
-      <div className="flex h-screen w-screen flex-col">
+      <div className="flex h-full w-full flex-col">
         <section ref={topContentContainerRef}>{topContent}</section>
-        <div className="flex h-[calc(100vh-var(--top-content-height))] flex-row">
+        <div className="flex h-[calc(100dvh-var(--top-content-height))] flex-row">
           <section
             className={clsx('relative md:py-4 md:pl-4', {
               'sm:py-4 sm:pl-4': enableMobileAndDesktopLayoutBreakpoints,

diff --git a/...5/shared/Navigation/ColonySwitcher/partials/MobileJoinedColonies/MobileJoinedColonies.tsx b/...5/shared/Navigation/ColonySwitcher/partials/MobileJoinedColonies/MobileJoinedColonies.tsx
@@ -54,7 +54,7 @@ const MobileJoinedColonies = () => {
           /** Unfortunately, it's a bit tricky to string interpolate tailwind classes */
           className={clsx(
             'top-[calc(var(--header-nav-section-height)+var(--top-content-height))]',
-            'fixed left-0 z-userNavModal flex h-[calc(100vh-var(--header-nav-section-height)-var(--top-content-height))] w-full flex-col justify-between rounded-none bg-base-white',
+            'fixed left-0 z-userNavModal flex h-dynamic-screen w-full flex-col justify-between rounded-none bg-base-white',
           )}
         >
           <div className="flex h-fit w-full flex-col overflow-y-auto">

diff --git a/...nents/v5/shared/Navigation/Sidebar/sidebars/ColonyPageSidebar/colonyPageSidebar.styles.ts b/...nents/v5/shared/Navigation/Sidebar/sidebars/ColonyPageSidebar/colonyPageSidebar.styles.ts
@@ -5,7 +5,7 @@ const colonyPageSidebarBaseClass = 'overflow-y-auto';
 export const colonyPageSidebarTabletClass = clsx(
   /** Unfortunately, it's a bit tricky to string interpolate tailwind classes */
   'top-[calc(var(--header-nav-section-height)+var(--top-content-height))]',
-  'fixed left-0 !h-[calc(100vh-var(--header-nav-section-height)-var(--top-content-height))] w-full',
+  'fixed left-0 !h-dynamic-screen w-full',
   'z-userNav flex flex-col justify-between overflow-y-auto bg-base-white p-3 md:bg-gray-900',
 );
 

diff --git a/src/components/v5/shared/SearchSelect/SearchSelect.tsx b/src/components/v5/shared/SearchSelect/SearchSelect.tsx
@@ -137,7 +137,7 @@ const SearchSelect = React.forwardRef<HTMLDivElement, SearchSelectProps>(
           </div>
         )}
         {!isLoading && (
-          <div className="max-h-[calc(100vh-12rem)] overflow-y-auto px-1.5 pr-1 sm:max-h-none sm:w-full">
+          <div className="max-h-[calc(100dvh-12rem)] overflow-y-auto px-1.5 pr-1 sm:max-h-none sm:w-full">
             <div>
               {filteredList.length > 0
                 ? filteredList.map(({ options, title, isAccordion, key }) =>

diff --git a/...mponents/v5/shared/UserInfoPopover/partials/DomainPermissionList/DomainPermissionList.tsx b/...mponents/v5/shared/UserInfoPopover/partials/DomainPermissionList/DomainPermissionList.tsx
@@ -36,7 +36,7 @@ const DomainPermissionList: FC<DomainPermissionListProps> = ({
   return (
     <div
       className={clsx(`flex flex-col pr-6 sm:overflow-hidden sm:pr-3.5`, {
-        'pl-[22px]': isTopContributorType,
+        'pl-5.5': isTopContributorType,
         'pl-[23px]': !isTopContributorType,
       })}
     >

diff --git a/src/components/v5/shared/UserInfoPopover/partials/UserInfo.tsx b/src/components/v5/shared/UserInfoPopover/partials/UserInfo.tsx
@@ -49,7 +49,7 @@ const UserInfo: FC<UserInfoProps> = ({
     >
       <div
         className={clsx({
-          'bg-purple-100 px-[22px] pb-[18px] pt-6': isTopContributorType,
+          'bg-purple-100 px-5.5 pb-[18px] pt-6': isTopContributorType,
           'px-[23px] pt-6': !isTopContributorType,
         })}
       >
@@ -103,7 +103,7 @@ const UserInfo: FC<UserInfoProps> = ({
         {aboutDescriptionText && (
           <div
             className={clsx({
-              'px-[22px]': isTopContributorType,
+              'px-5.5': isTopContributorType,
               'px-[23px]': !isTopContributorType,
             })}
           >
@@ -117,7 +117,7 @@ const UserInfo: FC<UserInfoProps> = ({
         {additionalContent && (
           <div
             className={clsx({
-              'px-[22px]': isTopContributorType,
+              'px-5.5': isTopContributorType,
               'px-[23px]': !isTopContributorType,
             })}
           >

diff --git a/tailwind.config.js b/tailwind.config.js
@@ -127,6 +127,8 @@ module.exports = {
     extend: {
       height: {
         screen: ['100vh /* fallback for Opera, IE and etc. */', '100dvh'],
+        'dynamic-screen':
+          'calc(100dvh - var(--header-nav-section-height) - var(--top-content-height))',
       },
       boxShadow: {
         default: '0px 10px 30px rgba(0, 0, 0, 0.05)',
@@ -157,6 +159,7 @@ module.exports = {
       },
       spacing: {
         4.5: '1.125rem',
+        5.5: '1.375rem',
         6.5: '1.625rem',
         8.5: '2.125rem',
       },
@@ -172,18 +175,14 @@ module.exports = {
           '--top-content-height': '0px',
         },
         html: {
-          '@apply font-inter text-lg text-gray-900 min-h-full h-auto antialiased':
-            {},
+          '@apply font-inter text-lg text-gray-900 h-auto antialiased': {},
         },
         body: {
-          '@apply min-h-screen bg-base-white overflow-x-hidden': {},
+          '@apply bg-base-white overflow-x-hidden': {},
         },
         'svg:not([class])': {
           '@apply fill-current stroke-none': {},
         },
-        '#root': {
-          '@apply min-h-screen': {},
-        },
         button: {
           'text-decoration': 'inherit',
         },