From c7bbdf6687d9ec3e30b0e3b242c471e6d6c873a6 Mon Sep 17 00:00:00 2001 From: Jeffrey Lewis Date: Mon, 7 Sep 2026 20:50:13 +0000 Subject: [PATCH 1/2] Stop the vote-count sidebar chart from sticking below the md breakpoint $("#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 Claude-Session: https://claude.ai/code/session_013KJMYfgTNsxrmjHZpZKAHT --- static/js/voteCharts.js | 15 ++++++++++++++- 1 file changed, 14 insertions(+), 1 deletion(-) diff --git a/static/js/voteCharts.js b/static/js/voteCharts.js index 63f6e6fec..a5fabb8eb 100644 --- a/static/js/voteCharts.js +++ b/static/js/voteCharts.js @@ -597,7 +597,20 @@ function drawWidgets(error, data, geodata, usaboundaries) } }); - $("#vote_chart_float").delay(500).stick_in_parent(); + // Only stick the vote-count chart to the viewport when its column sits + // beside the vote list (Bootstrap's md breakpoint, >=992px). Below that + // the columns stack, so a "stuck" full-width chart would end up pinned + // on top of the vote list underneath it as the page scrolls. + function updateVoteChartSticky() { + var $float = $("#vote_chart_float"); + if ($(window).width() >= 992) { + if (!$float.data("sticky_kit")) { $float.stick_in_parent(); } + } else if ($float.data("sticky_kit")) { + $float.trigger("sticky_kit:detach"); + } + } + $(window).on("resize", updateVoteChartSticky); + setTimeout(updateVoteChartSticky, 500); } From 0d7e23f6c78eda8868a41b751b80af1ff0f94a0b Mon Sep 17 00:00:00 2001 From: Jeffrey Lewis Date: Mon, 7 Sep 2026 20:58:20 +0000 Subject: [PATCH 2/2] Force single-column vote list on phone widths instead of tiny-looking 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 Claude-Session: https://claude.ai/code/session_013KJMYfgTNsxrmjHZpZKAHT --- static/css/base.css | 15 +++++++++++++++ 1 file changed, 15 insertions(+) diff --git a/static/css/base.css b/static/css/base.css index 8bb6bce65..a38a1573b 100644 --- a/static/css/base.css +++ b/static/css/base.css @@ -587,6 +587,21 @@ span.party_header { padding-right: 20px; } .sortHeader { text-align:middle; padding-top: 3px; } .voteHeader { font-size: 19px; float: left; padding-right: 30px; text-align: middle; } #voteList { margin-top: 15px; width: 100%; min-width: 1100px; } + +/* voteTable.js picks 1-4 columns based on how many members are listed + (see .columns1-4 above), sized for desktop. Below the point where a + phone can't show even 2 of those columns at a readable width, force + a single column instead -- the alternative is a several-times-too-wide + layout that only reads normally after the user pinches out to see the + cut-off columns, which is what actually made the text look "tiny". */ +@media (max-width: 767px) { + #voteList { min-width: 0; } + .voteTable.columns2, + .voteTable.columns3, + .voteTable.columns4 { + columns: 1; + } +} #vote_chart_float { position: static; padding-bottom: 20px; } #vote_chart_float .saveButton { margin-left: 5px; font-size: 18px; vertical-align: middle; cursor: pointer; color: black; } #vote_chart_float .xlsButton { margin-left: 5px; width: 22px; vertical-align: middle; }