Force single-column vote list on phone widths (fixes 'tiny text' on the vote page) - #456
Open
JeffreyBLewis wants to merge 2 commits into
Open
Force single-column vote list on phone widths (fixes 'tiny text' on the vote page)#456JeffreyBLewis wants to merge 2 commits into
JeffreyBLewis wants to merge 2 commits into
Conversation
$("#vote_chart_float").stick_in_parent() pins the vote page's party
vote-count bar chart to the viewport as you scroll past it, so it stays
visible alongside the member vote list below. That's fine at >=992px
where the two columns sit side by side, but Bootstrap stacks them to
full width below that -- so the "stuck" chart became a full-width bar
fixed to the top of the viewport, floating directly over the member
list as it scrolled underneath.
Gate the sticky behavior on window width (>=992px, matching the
Bootstrap md breakpoint where the columns are actually side by side),
and detach/reattach it on resize so someone resizing the window mid-
scroll doesn't get stuck in a broken state either way.
Verified with headless Chromium (Playwright) at 375/768/900/992/1280px,
scrolling the full height of a rollcall page and checking the chart's
bounding box against the vote list's at every 100px of scroll: no
overlap at any sampled position after the fix (previously overlapped
at 375/768/900px), desktop sticky behavior at >=992px is unchanged,
and a resize across the breakpoint mid-scroll correctly attaches/
detaches with no console or page errors.
Co-Authored-By: Claude Sonnet 5 <noreply@anthropic.com>
Claude-Session: https://claude.ai/code/session_013KJMYfgTNsxrmjHZpZKAHT
… text voteTable.js picks 1-4 CSS columns for the rollcall page's member vote list based on how many members are shown (10 per column), sized for a desktop-width layout -- a full Senate vote renders 4 columns needing #voteList's 1100px min-width. On a phone that layout doesn't fit even one full column's width, let alone four, so the extra columns get cut off entirely off-screen. That's what was actually behind "text is tiny on the vote page": the text itself is a normal size, but faced with a several-times-too-wide, partly-cut-off layout, a real phone user pinches out to see the rest of it -- and that zoom-out is what shrinks the text. Confirmed by loading the page with headless Chromium at a phone viewport and checking the actual rendered column count/width, not just scrollWidth. Force columns:1 below 768px (matching the breakpoint already used elsewhere for stacking) and drop #voteList's min-width there so the single column can shrink to fit -- above that the layout is untouched. Verified with headless Chromium: - At 390px: vote list renders as one column at 360px wide (fits the viewport) instead of 4 columns forcing ~1100px; every row fully visible with no horizontal cut-off - At 1280px: unchanged 4-column layout, confirming the desktop path wasn't touched - No console or page errors Note: the page still has some horizontal overflow left from the DW-NOMINATE scatter plot and vote map, which are a separate, still- fixed-pixel-width issue (890px chart in a chart container) unrelated to this text/column problem -- not addressed here. Co-Authored-By: Claude Sonnet 5 <noreply@anthropic.com> Claude-Session: https://claude.ai/code/session_013KJMYfgTNsxrmjHZpZKAHT
8 tasks
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.
Summary
Stacks on #455 (same underlying branch work, just so this diff doesn't duplicate that one) -- the actual new change here is one commit,
0d7e23f.voteTable.jspicks 1-4 CSS columns for the rollcall page's member vote list based on how many members are shown (10 per column) -- sized for desktop, where a full Senate vote needs#voteList's 1100pxmin-widthto fit 4 columns. On a phone that doesn't fit even one column's width, so the extra columns render entirely off-screen.That's what was actually behind the "text is tiny" report: the font size itself is normal, but faced with a several-times-too-wide, partly-cut-off layout, a real phone user pinches out to see the rest of it -- and that zoom-out is what shrinks the text. Confirmed this by loading the page with headless Chromium at a phone viewport and inspecting the actual rendered column count/width, not just guessing from CSS.
Fix: force
columns: 1below 768px (the breakpoint already used elsewhere for stacking) and drop#voteList'smin-widththere so the single column can shrink to fit. Desktop is untouched.Known remaining issue, not addressed here: the page still has some horizontal overflow left from the DW-NOMINATE scatter plot and vote map (a fixed 890px chart), which is a separate problem from this text/column issue. Flagging rather than fixing, since that's the same area that caused trouble last time (closed #454) -- happy to take another pass at it if wanted, verified with headless Chromium this time.
Test plan
Verified with headless Chromium (Playwright):
🤖 Generated with Claude Code
https://claude.ai/code/session_013KJMYfgTNsxrmjHZpZKAHT