fix: prevent popup scrollbar when browser zoom exceeds 100%

[Onyx2406]

Summary

Fixes the popup showing an unwanted scrollbar when browser zoom level is above 100%.

Root cause: The popup container has a fixed height of 600px (h-popup), but when browser zoom exceeds 100%, the available viewport in CSS pixels shrinks below 600px, causing overflow.

Fix:

• Add max-h-screen to the popup container — caps height at the actual viewport height regardless of zoom level
• Add overflow-hidden to the container — prevents the outer scrollbar
• Add overflow-y-auto to the <main> content area — keeps content accessible via scoped scrolling when it overflows (e.g., error states with long content)

This ensures the header and divider remain fixed at top while content scrolls naturally within the available space.

Changes

File	Change
src/pages/popup/components/layout/MainLayout.tsx	Add max-h-screen overflow-hidden to container, overflow-y-auto to main

Test plan

• Open extension popup at 100% zoom — no change in behavior
• Open extension popup at 110% zoom — no scrollbar appears
• Open extension popup at 125%+ zoom — content area scrolls if needed, header stays fixed
• Test on Chrome, Edge, Firefox

Closes #1014

[sidvishnoi]

Can you confirm this PR addresses issues mentioned in #1211 as well?

[Onyx2406]

Thanks for pointing to #1211! I reviewed the feedback there — the previous approach removed h-popup entirely, which caused the popup to dynamically resize based on content (poor UX) and introduced squished UI when the advanced section was open.

My approach is different — I keep h-popup (the fixed 600px height) but add max-h-screen as an upper bound. This means:

• At 100% zoom: max-h-screen (100vh) >= 600px, so h-popup wins — no visual change at all
• At >100% zoom: max-h-screen kicks in and caps the height below 600px, preventing the scrollbar
• Content overflow: Handled by overflow-y-auto on <main>, so the header stays fixed and only the content area scrolls

The popup never dynamically resizes based on content — it's always either 600px or the viewport height, whichever is smaller. This should avoid the issues from #1211.

That said, I haven't been able to test whether the advanced section / wallet info screen still looks correct at high zoom. Happy to adjust if there are specific screens that need attention.

[sidvishnoi]

This is what I see in Firefox, when wallet is connected:

And in Chrome on initial extension screen: