From 83591a6d1ebc2d493d7fda1417a3bb2b4d02ceb1 Mon Sep 17 00:00:00 2001 From: Peter Hedenskog Date: Tue, 12 May 2026 08:15:10 +0200 Subject: [PATCH] Compare: align action chips and give them breathing room MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit Several inline action chips landed flush against their neighbouring text — "Metric Switch", "Waterfall ", "HAR1 Upload", and the disclosure arrows on rows like "CPU time spent by category" — so visually it read as one crowded blob rather than a label with a separate action you could aim at. The page-x-ray metric column also had the awkward case where "Switch" stayed on the title line and "Only differences" wrapped underneath at a different left edge, which looked broken. Card titles become flex containers so inline chips sit at a consistent gap and centre-align with the heading instead of hugging its baseline. The chip-toggle, submit-smaller and Upload label each pick up a small left margin so they're never flush against preceding content, reset inside flex parents where gap does the work. The metric column header now stacks "Metric" on top of a flex row that holds Switch + Only differences together, so the chips wrap as a group and stay aligned with each other. A small negative left margin on that row pulls the buttons left by the width of their own border + padding so the visible text edge of "Switch" lines up with "URL"/"Date"/"Browser" in the rows below. Co-authored-by: Claude Opus 4.7 (1M context) noreply@anthropic.com --- public/js/compare/templates.js | 21 ++++++++++------- src/css/buttons.css | 6 ++++- src/css/elements.css | 8 +++++++ src/css/page-xray.css | 42 +++++++++++++++++++++++++++++++++- 4 files changed, 67 insertions(+), 10 deletions(-) diff --git a/public/js/compare/templates.js b/public/js/compare/templates.js index 95d4c6e..fe92c80 100644 --- a/public/js/compare/templates.js +++ b/public/js/compare/templates.js @@ -128,14 +128,19 @@ function pageXrayTemplate(d) { html += 'Page X-ray comparison: ' + h(config.har1.label) + ' versus ' + h(config.har2.label) + ''; html += ''; - html += 'Metric ' + - ' ' + - ''; + html += '' + + '
' + + 'Metric' + + '' + + '' + + '' + + '' + + '
'; html += '' + h(config.har1.label) + '' + ''; diff --git a/src/css/buttons.css b/src/css/buttons.css index ace96b8..9c0acd4 100644 --- a/src/css/buttons.css +++ b/src/css/buttons.css @@ -54,7 +54,11 @@ align-items: center; gap: 4px; padding: 2px 8px; - margin: 0; + /* Small left margin so the button doesn't sit flush against the + preceding label text (e.g. "Metric Switch", "CPU time spent by + category [arrow]"). Doesn't apply inside flex parents thanks to + `gap` taking over there. */ + margin: 0 0 0 8px; font-size: 0.8rem; font-weight: var(--font-weight-medium); vertical-align: middle; diff --git a/src/css/elements.css b/src/css/elements.css index 8a53a06..db733c9 100644 --- a/src/css/elements.css +++ b/src/css/elements.css @@ -200,6 +200,14 @@ hr { } .card-title { + /* Flex container so inline action chips (e.g. "Side by side" on + the Waterfall card) sit at a sensible distance from the title + text and align vertically to the middle — not the baseline of + a smaller chip against a larger h3. */ + display: flex; + align-items: center; + flex-wrap: wrap; + gap: 14px; margin: 0 0 12px 0; font-size: 1.125rem; font-weight: var(--font-weight-semibold); diff --git a/src/css/page-xray.css b/src/css/page-xray.css index f2484ac..bfc52d1 100644 --- a/src/css/page-xray.css +++ b/src/css/page-xray.css @@ -65,6 +65,35 @@ } .tableXrayMetric { width: 22%; text-align: left; } + +/* + * Metric column header — "Metric" label sits on top of a row of + * action chips (Switch + Only differences). Stacking with flex + * keeps the chips aligned consistently with each other and with the + * column's left edge (which is where the row labels below sit), + * instead of relying on inline-wrap and ending up indented. + */ +.tableXrayMetric-stack { + display: flex; + flex-direction: column; + align-items: flex-start; + gap: 6px; +} +.tableXrayMetric-actions { + display: flex; + flex-wrap: wrap; + align-items: center; + gap: 8px; + /* Negative margin so the button's visible text edge lines up with + the metric labels below ("URL", "Date", …) — the button's own + border + padding would otherwise indent the text by ~9px. */ + margin-left: -9px; +} +.tableXrayMetric-actions .chip-toggle, +.tableXrayMetric-actions .submit-smaller { + /* `gap` handles spacing — strip the default left margins. */ + margin-left: 0; +} .tableXrayHarMetric, .tableXrayHar2Metric { width: 31%; } .tableXrayDiff { width: 16%; text-align: right; padding-right: 12px; color: var(--color-text-muted); font-weight: var(--font-weight-medium); } @@ -101,7 +130,11 @@ display: inline-flex; align-items: center; padding: 4px 10px; - margin-left: 4px; + /* Visually separate from any preceding button or text. Reset to 0 + inside a flex parent (e.g. .card-title) where `gap` already + handles the spacing. */ + margin-left: 12px; + vertical-align: middle; background: var(--color-surface); color: var(--color-text-secondary); border: 1px solid var(--color-border); @@ -112,6 +145,9 @@ transition: background var(--motion-fast), color var(--motion-fast), border-color var(--motion-fast); } +.card-title > .chip-toggle { + margin-left: 0; +} .chip-toggle:hover, .chip-toggle:focus-visible { background: var(--color-blue-tint); @@ -213,6 +249,10 @@ display: inline-flex; align-items: center; padding: 6px 14px; + /* Keep the chip away from the HAR1 / HAR2 column label text it + sits next to. */ + margin-left: 10px; + vertical-align: middle; background: var(--color-surface); color: var(--color-text-secondary); border: 1px solid var(--color-border);