chore: wip fix virtuoso list

src/app/common/hooks/use-media-query.ts

@@ -0,0 +1,23 @@
+import { useEffect, useState } from 'react';
+
+import { BreakpointToken, token } from 'leather-styles/tokens';
+
+function useMediaQuery(query: string) {
+  const [matches, setMatches] = useState(false);
+
+  useEffect(() => {
+    const media = window.matchMedia(query);
+    if (media.matches !== matches) {
+      setMatches(media.matches);
+    }
+    const listener = () => setMatches(media.matches);
+    window.addEventListener('resize', listener);
+    return () => window.removeEventListener('resize', listener);
+  }, [matches, query]);
+
+  return matches;
+}
+
+export function useViewportMinWidth(viewport: BreakpointToken) {
+  return useMediaQuery(`(min-width: ${token(`breakpoints.${viewport}`)})`);
+}

src/app/features/dialogs/switch-account-dialog/switch-account-dialog.tsx

@@ -28,7 +28,7 @@ export const SwitchAccountDialog = memo(({ isShowing, onClose }: DialogProps) =>
   const { whenWallet } = useWalletType();
 
   const isLedger = useHasLedgerKeys();
-  const [accountsShown, setAccountsShown] = useState(10);
+  // const [accountsShown, setAccountsShown] = useState(10);
 
   const stacksAccounts = useStacksAccounts();
   const bitcoinAccounts = useFilteredBitcoinAccounts();
@@ -43,6 +43,14 @@ export const SwitchAccountDialog = memo(({ isShowing, onClose }: DialogProps) =>
   if (isShowing && stacksAddressesNum === 0 && btcAddressesNum === 0) {
     return <AccountListUnavailable />;
   }
+
+  // close now but need to test other things and bring back
+  // src/app/common/hooks/use-media-query.ts
+
+  // to get it working on resize
+
+  // fix other borders PR also
+
   // #4370 SMELL without this early return the wallet crashes on new install with
   // : Wallet is neither of type `ledger` nor `software`
   // FIXME remove this when adding Create Account to Ledger in #2502 #4983
@@ -88,7 +96,7 @@ export const SwitchAccountDialog = memo(({ isShowing, onClose }: DialogProps) =>
         }}
         initialTopMostItemIndex={whenWallet({ ledger: 0, software: currentAccountIndex })}
         // data={stacksAccounts}
-        endReached={() => setAccountsShown(accountsShown + 1)}
+        // endReached={() => setAccountsShown(accountsShown + 1)}
         totalCount={stacksAddressesNum}
         itemContent={index => (
           <Box key={index} my="space.05" px="space.05">