fix: chains overflow on mobile

[brieyla1]

Hey rainbow kit team,

when you have too many chains on mobile, they don't all show up, and block the "close" button from view. here is the fix. (see pictures)

The fix simply adds overflow scroll and a max width of 90vh, it should not interact with any logic whatsoever.

Current behavior

Fixed behaviour (same chains for reproduction ([...chains, ...chains, ...chains, ...chains] in ChainModal.tsx)

Thanks

[vercel]

The latest updates on your projects. Learn more about Vercel for Git ↗︎

Name	Status	Preview	Comments	Updated (UTC)
rainbowkit-example	✅ Ready (Inspect)	Visit Preview	💬 Add feedback	Sep 28, 2023 6:22am
rainbowkit-site	✅ Ready (Inspect)	Visit Preview	💬 Add feedback	Sep 28, 2023 6:22am

[vercel]

@brieyla1 is attempting to deploy a commit to the rainbowdotme Team on Vercel.

A member of the Team first needs to authorize it.

[brieyla1]

take a look @DanielSinclair :)

My client wants this updated asap...

Thank you, sorry for the rush.

[DanielSinclair]

Hey @brieyla1. A few refactors we'd like to see before getting this merged:

• Let's use the .css.ts convention instead of inline styles. Checkout an example like ConnectOptions/MobileOptions.css.ts
• Run pnpm run lint --fix to make eslint happy

[DanielSinclair]

Mobile Test:

Desktop Tests:

[magiziz]

Good to go 👍

@brieyla1 Just make sure to go for .css.ts convention and can be merged.

[CJskii]

@DanielSinclair I run "@rainbow-me/rainbowkit": "^1.0.11", but my modal still doesn't have scroll.

I was just wondering if there's anything additional that I should enable or do to get scroll working.

[DanielSinclair]

@CJskii This will be released later today as 1.0.12