fix(viewer): chart title-row + spectrum controls survive narrow screens#925
Merged
thinkingfish merged 3 commits intoMay 13, 2026
Merged
Conversation
iPhone (and other narrow viewports) had two layout issues: - The chart's title row (title + per-card controls) sat on one flex row with no wrap — long titles collided with the right-side controls on screens under ~400px. - The Full / Tail spectrum checkboxes only relocated to a separate line below 500px chart width. iPhone in landscape, tablet portrait, and narrow desktop windows all stayed above that threshold and rendered the checkboxes on top of the percentile legend. Two minimal fixes: - `.chart-title-row`: add `flex-wrap: wrap` so the right-side controls drop to a second line gracefully when the title gets long. Switches the row gap from `12px` to `4px 12px` so the wrapped row sits 4px below the title instead of 12. - `SPECTRUM_CONTROLS_NARROW_WIDTH` 500 → 700: catches the in-between widths where the narrow code path was needed but didn't fire. Also tightens `top` from 28 → 24 to give the legend (at top:42) a real 6px gap from the spectrum's 13px control baseline. Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>
- Narrow-mode `right` 12 → 28 so the Full/Tail checkboxes sit ~1em inside the legend's rightmost chip instead of crowding it. - `renderSpectrumCheckbox`: switch the toggle span to inline-flex with align-items:center, dropping the manual `vertical-align:bottom + position:relative; top:2px` nudge that left the 16px glyph slightly below the 13px label baseline. The flex midline keeps glyph and label visually centered across browsers. Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>
The ☐/☑ characters carry extra inner whitespace at the bottom of their glyph box, so flex `align-items: center` still leaves them sitting low next to the label baseline. A 2px upward translate on the glyph span compensates and reads as true center alignment. Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>
thinkingfish
force-pushed
the
fix/narrow-chart-title-wrap
branch
from
d49a674 to
08be3bb
Compare
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
Layout fixes for narrow viewports (iPhone-class, tablet portrait, narrow desktop windows) on histogram-quantile charts.
.chart-title-rowgotflex-wrap: wrapand a4px 12pxgap. Long titles + the right-side per-card controls (compare toggle, etc.) no longer collide — the right side drops to a second line when the title fills the available width.SPECTRUM_CONTROLS_NARROW_WIDTHbumped 500 → 700px, catching the in-between widths where the narrow code path was needed but didn't fire. Narrowtoptightened 28 → 24, narrowrightbumped 12 → 28 so the Full / Tail checkboxes sit ~1em inside the legend's right edge instead of crowding it.inline-flex; align-items: centerplus a 2px upwardtranslateYto compensate for the☐/☑characters' built-in bottom whitespace.Test plan
node --checkon the touched JS files cleannode --test tests/*.mjs— 82/82bash tests/viewer_smoke.sh— full pass🤖 Generated with Claude Code