fix(popup): prevent right-side clipping on narrow viewports#7
Open
raghav4 wants to merge 2 commits into
Open
Conversation
On mobile Chrome and small screens the fixed 340px body overflows the viewport and the right edge (toggles, preset pills, master switch) is clipped invisibly. - body: add max-width:100vw + overflow-x:hidden so the popup shrinks to fit rather than overflow - header-left: flex:1 so it absorbs spare space and keeps the master toggle always visible - brand-name/brand-sub: text-overflow:ellipsis instead of pushing the layout wider - limit-row / limit-pills: flex-wrap:wrap so daily limit pills reflow to a second line on narrow widths rather than overflow Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
vw units in Chrome extension popups resolve against the tiny initial viewport before the popup expands, not the final rendered width. This caused the body to shrink to ~40px making the popup unusable. The flex-wrap and text-overflow changes are kept as they help on genuinely narrow screens without breaking the fixed-width popup. Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
1 participant
Add this suggestion to a batch that can be applied as a single commit.This suggestion is invalid because no changes were made to the code.Suggestions cannot be applied while the pull request is closed.Suggestions cannot be applied while viewing a subset of changes.Only one suggestion per line can be applied in a batch.Add this suggestion to a batch that can be applied as a single commit.Applying suggestions on deleted lines is not supported.You must change the existing code in this line in order to create a valid suggestion.Outdated suggestions cannot be applied.This suggestion has been applied or marked resolved.Suggestions cannot be applied from pending reviews.Suggestions cannot be applied on multi-line comments.Suggestions cannot be applied while the pull request is queued to merge.Suggestion cannot be applied right now. Please check back later.
Problem
On mobile Chrome and Chromebooks with smaller viewports, the popup's fixed
width: 340pxoverflows the viewport width. The browser clips the overflow invisibly, so the master toggle, preset pill ends, and all toggle switches on the right side are cut off.Changes (popup.html only)
bodymax-width: 100vw; overflow-x: hidden— shrinks to fit rather than overflow.header-leftflex: 1— absorbs spare space so master toggle always stays visible.brand-name/.brand-subtext-overflow: ellipsis— truncates gracefully instead of pushing layout wider.limit-row/.limit-pillsflex-wrap: wrap— limit pills reflow to a second line on narrow widthsThe Unstable badge on Hide Shorts Videos visible in the report was from an old installed version — it was removed in v1.1.0 and is not present in current code.
Test plan
🤖 Generated with Claude Code