Skip to content

fix(viewer): chart title-row + spectrum controls survive narrow screens #925

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
thinkingfish merged 3 commits into from
May 13, 2026
Merged

fix(viewer): chart title-row + spectrum controls survive narrow screens #925

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
3 commits
Select commit Hold shift + click to select a range
0969d73
fix(viewer): chart title-row + spectrum controls survive narrow screens
thinkingfish May 13, 2026
7802d06
fix(viewer): pad spectrum controls + center-align checkbox with label
thinkingfish May 13, 2026
08be3bb
fix(viewer): nudge spectrum checkbox glyph 2px up for visual centering
thinkingfish May 13, 2026
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
5 changes: 4 additions & 1 deletion src/viewer/assets/lib/charts.css
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -131,7 +131,10 @@
display: flex;
align-items: baseline;
justify-content: space-between;
gap: 12px;
/* Right-side controls (compare toggle, etc.) drop to a second line
on narrow screens instead of colliding with a long title. */
flex-wrap: wrap;
gap: 4px 12px;
width: 100%;
}

Expand Down
20 changes: 16 additions & 4 deletions src/viewer/assets/lib/charts/scatter.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -448,8 +448,14 @@ function renderSpectrumCheckbox(el, chart, kind) {
const color = on ? COLORS.fg : COLORS.fgSecondary;
const glyph = on ? '☑' : '☐';
const label = pending ? `${SPECTRUM_LABELS[kind]}…` : SPECTRUM_LABELS[kind];
// Flex centers the 16px glyph against the 13px label, then a 2px
// upward translate compensates for the ☐/☑ glyph's built-in
// bottom whitespace so the visual centers actually line up.
el.style.display = 'inline-flex';
el.style.alignItems = 'center';
el.style.gap = '4px';
el.innerHTML =
`<span style="font-size: 16px; vertical-align: bottom; position: relative; top: 2px;">${glyph}</span> ${label}`;
`<span style="font-size: 16px; line-height: 1; transform: translateY(-2px);">${glyph}</span><span>${label}</span>`;
el.style.color = color;
}

Expand Down Expand Up @@ -477,7 +483,9 @@ function toggleSpectrum(chart, kind) {
// mobile / narrow viewport widths.
// The grid rect is only available after echarts has laid out the
// chart, so we query it via the `finished` event and reposition.
const SPECTRUM_CONTROLS_NARROW_WIDTH = 500;
// Threshold picked to cover phones (full-width), phones in compare
// mode (half-width), tablet portrait, and narrow desktop windows.
const SPECTRUM_CONTROLS_NARROW_WIDTH = 700;
function positionControlsAtGridLeft(chart, container) {
if (!chart.echart) return;
try {
Expand All @@ -494,9 +502,13 @@ function positionControlsAtGridLeft(chart, container) {
// Narrow chart: stack above the legend on its own line and
// align to the right edge so it visually anchors to the
// legend's column rather than floating in the left gutter.
container.style.top = '28px';
// top:24 keeps a ~6px gap above the legend (at top:42) so
// the 13px control font doesn't touch the legend baseline.
// right:28 = 12px chart inset + ~1em breathing room so the
// checkboxes don't crowd the legend's rightmost chip.
container.style.top = '24px';
container.style.left = 'auto';
container.style.right = '12px';
container.style.right = '28px';
} else {
container.style.top = '42px';
container.style.right = 'auto';
Expand Down
Loading