diff --git a/src/app/common/hooks/use-scroll-lock.ts b/src/app/common/hooks/use-scroll-lock.ts index 206d9f0d25b..b3b83f7f7e1 100644 --- a/src/app/common/hooks/use-scroll-lock.ts +++ b/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({}); diff --git a/src/app/features/switch-account-drawer/components/switch-account-list.tsx b/src/app/features/switch-account-drawer/components/switch-account-list.tsx index c91e616947d..cc0c5629f5c 100644 --- a/src/app/features/switch-account-drawer/components/switch-account-list.tsx +++ b/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 ( 5 ? 'scroll' : 'hidden', + // fill space on ledger as no create account button + maxHeight: whenWallet({ ledger: '100vh', software: '' }), }} - mb={whenWallet({ ledger: 'space.04', software: '' })} > 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 ( diff --git a/theme/global/global.ts b/theme/global/global.ts index b486b2b76be..249107be342 100644 --- a/theme/global/global.ts +++ b/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' },