Compare: align action chips and give them breathing room (#164)

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

Author: soulgalore

public/js/compare/templates.js

@@ -128,14 +128,19 @@ function pageXrayTemplate(d) {
   html += '<caption class="sr-only">Page X-ray comparison: ' +
           h(config.har1.label) + ' versus ' + h(config.har2.label) + '</caption>';
   html += '<thead><tr>';
-  html += '<th class="tabletext tableXrayMetric" scope="col">Metric ' +
-            '<button onclick="regenerate(true);" class="submit submit-smaller" ' +
-                    'aria-label="Swap HAR1 and HAR2">Switch</button> ' +
-            '<button id="diffOnlyToggle" type="button" ' +
-                    'onclick="toggleDiffOnly(this);" ' +
-                    'class="chip-toggle" ' +
-                    'aria-pressed="' + diffOnlyPressed + '">' +
-              'Only differences</button></th>';
+  html += '<th class="tabletext tableXrayMetric" scope="col">' +
+            '<div class="tableXrayMetric-stack">' +
+              '<span class="tableXrayMetric-label">Metric</span>' +
+              '<span class="tableXrayMetric-actions">' +
+                '<button onclick="regenerate(true);" class="submit submit-smaller" ' +
+                        'aria-label="Swap HAR1 and HAR2">Switch</button>' +
+                '<button id="diffOnlyToggle" type="button" ' +
+                        'onclick="toggleDiffOnly(this);" ' +
+                        'class="chip-toggle" ' +
+                        'aria-pressed="' + diffOnlyPressed + '">' +
+                  'Only differences</button>' +
+              '</span>' +
+            '</div></th>';
   html += '<th class="tableXrayHarMetric" scope="col">' + h(config.har1.label) +
             '<input type="file" id="har1upload" class="inputfile"/>' +
             '<label for="har1upload">Upload</label></th>';

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;

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);

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);