interledger
fix: remove fixed popup height to prevent scrollbar at high zoom
Context
Popup has scrollbar when browser zoom >100%.
The popup uses a fixed height constraint that doesn't accommodate content scaling at zoom levels above 100%, causing unwanted scrollbars. This affects usability across different browsers and devices.
Closes #1014
Changes proposed in this pull request
Remove the fixed h-popup height class from the MainLayout component to enable dynamic popup sizing based on content height. This ensures the popup window resizes automatically to fit content at all zoom levels without scrollbars.
Modified MainLayout.tsx to remove h-popup class from the root div
such a simple change it was and worked like a charm
for review: @sidvishnoi
The problem with removing the height like this means the extension popup will keep changing size based on content, which isn't a user good experience.
Screen.Recording.2025-10-21.at.14.12.38.mov
the other fix would involve some or the other hardcoded things, even though the connect button is dynamically positioned it would be the most optimal change [maybe add the button to the top]. in any case i am doing another change this is also good and solves the problem.
@sidvishnoi did the changes
@ARYPROGRAMMER I see in the wallet info screen, there's a scrollbar even without browser zoom when the advanced section is open, and the overall UI looks squished.
Also, note info/warning pages have content moved to top instead of center:
I'm not sure of the way forward here. I have asked the team for some design direction.
Meanwhile, would you like to work on some other issues? 1187 and 1188 are good options - I can assign either to you if you comment on those issues.
yes pls you can assign me both @sidvishnoi ,the problem with this is that the design might be too complicated or might need re refractoring of the mainlayout for that per say. I still think h-popup removal was the easiest and comfortable thing to do but yes surely let's come back to this later
Thanks for your efforts here @ARYPROGRAMMER. I'll be closing this PR for maintenance reasons, while we figure out with design/product teams the best way to fix https://github.com/interledger/web-monetization-extension/issues/1014.