fix: standardise account selector in all views including ledger. remo…

…ve un-needed scroll css

src/app/common/hooks/use-scroll-lock.ts

@@ -42,7 +42,6 @@ const setBodyOverflow = (shouldLock: boolean) => {
   }
 };
 
-// 4370 TODO check if this even works as tried using it
 export const useScrollLock = (shouldLock: boolean) => {
   // we generate a unique reference to the component that uses this thing
   const [elementId] = useState({});

src/app/features/switch-account-drawer/components/switch-account-list.tsx

@@ -1,10 +1,8 @@
 import { ReactNode, memo } from 'react';
 import { Virtuoso } from 'react-virtuoso';
 
-import { css } from 'leather-styles/css';
 import { Box } from 'leather-styles/jsx';
 
-import { useViewportMinWidth } from '@app/common/hooks/use-media-query';
 import { useWalletType } from '@app/common/use-wallet-type';
 
 import { SwitchAccountListItem } from './switch-account-list-item';
@@ -21,16 +19,13 @@ export const SwitchAccountList = memo(
 
     return (
       <Box
+        className="l-virtuoso-container"
         css={{
-          overflowY: 'scroll',
-          '&::-webkit-scrollbar': {
-            display: 'none',
-          },
-          //#4370 TODO = probably need to make all drawer-flex
-          // base-drawer have this height as otherwise modals don't stretch to bottom
-          maxHeight: { base: '75vh', md: '100%' },
+          // only allow scroll if more than 5 accounts
+          overflowY: addressesNum > 5 ? 'scroll' : 'hidden',
+          // fill space on ledger as no create account button
+          maxHeight: whenWallet({ ledger: '100vh', software: '' }),
         }}
-        mb={whenWallet({ ledger: 'space.04', software: '' })}
       >
         <Virtuoso
           useWindowScroll

src/app/ui/components/containers/drawer/base-drawer.tsx

@@ -1,6 +1,6 @@
 // TODO - not sure why we call this a drawer when it's a modal
 // 4370 TODO - can investigate swapping this for radix dialog and using modal true / false
-import { ReactNode, memo, useEffect } from 'react';
+import { ReactNode, memo } from 'react';
 import { useNavigate } from 'react-router-dom';
 
 import { FlexProps } from 'leather-styles/jsx';
@@ -35,14 +35,6 @@ export const BaseDrawer = memo(
 
     const onGoBack = () => navigate(-1);
 
-    // sometimes this adds an un-necessary scrollbar
-    useEffect(() => {
-      document.body.style.overflowY = 'hidden';
-      return () => {
-        document.body.style.overflowY = 'auto';
-      };
-    }, []);
-
     if (!isShowing) return null;
 
     return (

theme/global/global.ts

@@ -7,12 +7,6 @@ import { tippyStyles } from './tippy-styles';
 
 // ts-unused-exports:disable-next-line
 export const globalCss = defineGlobalStyles({
-  // TODO: investigate cleaner solution
-  // this is needed to prevent BG scroll in extension view
-  // FIXME PETE - need to make sure scroll works in popout mode
-  html: {
-    overflow: 'hidden',
-  },
   'html, body': {
     backgroundColor: 'accent.background-primary',
   },
@@ -25,8 +19,6 @@ export const globalCss = defineGlobalStyles({
     },
   },
   body: {
-    // scroll is needed here so homepage will be able to scroll in extension view
-    overflowY: 'auto', //  TODO: investigate this adds an un-necessary scroll bar to popout mode
     '&.no-scroll, &.no-scroll .main-content': {
       overflow: 'hidden',
     },
@@ -36,6 +28,12 @@ export const globalCss = defineGlobalStyles({
   ...tippyStyles,
   ...radixStyles,
   ...radixTabStyles,
+  '.l-virtuoso-container': {
+    '&::-webkit-scrollbar': {
+      display: 'none',
+    },
+    maxHeight: { base: '75vh', md: '100%' },
+  },
   '.l-virtuoso': {
     paddingTop: '24px',
     minHeight: { base: '85vh', md: '70vh' },