fix: chains overflow on mobile (#998)

* fixed too many items in chains * fixed scrollbar showing up * revert lock * chore: lint fix * chore: refactor with scroll class, paddingBottom on DialogContent * fix: refactor scrollclassname for mobile vs desktop * chore: changeset * fix: paddingBottom logic when only padding is specified * fix: explicit overflowY * fix: overflowX hidden on mobile --------- Co-authored-by: Daniel Sinclair <[email protected]>
rainbow-me · Sep 28, 2023 · 5b8d821 · 5b8d821 · vercel · Sep 28, 2023
1 parent ab3f517
commit 5b8d821
Show file tree

Hide file tree

Showing 4 changed files with 41 additions and 3 deletions.
diff --git a/.changeset/friendly-tomatoes-hide.md b/.changeset/friendly-tomatoes-hide.md
@@ -0,0 +1,5 @@
+---
+"@rainbow-me/rainbowkit": patch
+---
+
+Resolved an issue where dApps that supported many chains would cause an interface overflow on mobile. The Chains Modal is now scrollable.
diff --git a/packages/rainbowkit/src/components/ChainModal/ChainModal.css.ts b/packages/rainbowkit/src/components/ChainModal/ChainModal.css.ts
@@ -0,0 +1,18 @@
+import { style } from '@vanilla-extract/css';
+
+export const DesktopScrollClassName = style({
+  maxHeight: 454,
+  overflowY: 'auto',
+});
+
+export const MobileScrollClassName = style({
+  maxHeight: 454,
+  overflowY: 'auto',
+  overflowX: 'hidden',
+  scrollbarWidth: 'none',
+  selectors: {
+    '&::-webkit-scrollbar': {
+      display: 'none',
+    },
+  },
+});
diff --git a/packages/rainbowkit/src/components/ChainModal/ChainModal.tsx b/packages/rainbowkit/src/components/ChainModal/ChainModal.tsx
@@ -11,6 +11,10 @@ import { MenuButton } from '../MenuButton/MenuButton';
 import { AppContext } from '../RainbowKitProvider/AppContext';
 import { useRainbowKitChains } from '../RainbowKitProvider/RainbowKitChainContext';
 import { Text } from '../Text/Text';
+import {
+  DesktopScrollClassName,
+  MobileScrollClassName,
+} from './ChainModal.css';
 
 export interface ChainModalProps {
   open: boolean;
@@ -42,7 +46,7 @@ export function ChainModal({ onClose, open }: ChainModalProps) {
 
   return (
     <Dialog onClose={onClose} open={open} titleId={titleId}>
-      <DialogContent bottomSheetOnMobile>
+      <DialogContent bottomSheetOnMobile paddingBottom="0">
         <Box display="flex" flexDirection="column" gap="14">
           <Box
             display="flex"
@@ -70,7 +74,14 @@ export function ChainModal({ onClose, open }: ChainModalProps) {
               </Text>
             </Box>
           )}
-          <Box display="flex" flexDirection="column" gap="4" padding="2">
+          <Box
+            className={mobile ? MobileScrollClassName : DesktopScrollClassName}
+            display="flex"
+            flexDirection="column"
+            gap="4"
+            padding="2"
+            paddingBottom="16"
+          >
             {switchNetwork ? (
               rainbowkitChains.map(
                 ({ iconBackground, iconUrl, id, name }, idx) => {

diff --git a/packages/rainbowkit/src/components/Dialog/DialogContent.tsx b/packages/rainbowkit/src/components/Dialog/DialogContent.tsx
@@ -11,6 +11,7 @@ interface DialogContentProps {
   children: ReactNode;
   bottomSheetOnMobile?: boolean;
   padding?: BoxProps['padding'];
+  paddingBottom?: BoxProps['paddingBottom'];
   marginTop?: BoxProps['marginTop'];
   wide?: boolean;
 }
@@ -20,6 +21,7 @@ export function DialogContent({
   children,
   marginTop,
   padding = '16',
+  paddingBottom,
   wide = false,
 }: DialogContentProps) {
   const mobile = isMobile();
@@ -40,7 +42,9 @@ export function DialogContent({
           mobile && bottomSheetOnMobile ? styles.bottomSheetOverrides : null,
         ].join(' ')}
       >
-        <Box padding={padding}>{children}</Box>
+        <Box padding={padding} paddingBottom={paddingBottom ?? padding}>
+          {children}
+        </Box>
       </Box>
     </Box>
   );