fix(ui): align header widgets to one height and baseline

internal/web/app/index.html

@@ -1,4 +1,4 @@
 <!doctype html>
-<html lang="en"><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Driga</title><meta name="driga-style-nonce" content="__DRIGA_STYLE_NONCE__">  <script type="module" crossorigin src="/app/assets/index-Istn2m08.js"></script>
+<html lang="en"><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Driga</title><meta name="driga-style-nonce" content="__DRIGA_STYLE_NONCE__">  <script type="module" crossorigin src="/app/assets/index-Nf1ipJ0R.js"></script>
   <link rel="stylesheet" crossorigin href="/app/assets/index-bMbUfRA6.css">
 </head><body><div id="root"></div></body></html>

ui/src/host/ClustersHeader.stories.tsx

@@ -71,6 +71,13 @@ function geometry(root: HTMLElement) {
     expect(rect.right).toBeLessThanOrEqual(slot.parentElement!.parentElement!.getBoundingClientRect().right + 1);
     expect(rect.right).toBeLessThanOrEqual(within(root).getByRole("button", { name: /^Fleet:/ }).getBoundingClientRect().left);
   }
+  // Labels and values share one line across the row, whether or not a tile
+  // has a bar under its value.
+  const stacks = slots.map(slot => slot.querySelector<HTMLElement>(".w-tile > .mantine-Stack-root")).filter(stack => stack?.checkVisibility()) as HTMLElement[];
+  for (const [i, part] of [[0, "label"], [1, "value"]] as const) {
+    const tops = stacks.map(stack => (stack.children[i] as HTMLElement).getBoundingClientRect().top);
+    expect(Math.max(...tops) - Math.min(...tops), `${part} tops ${tops}`).toBeLessThanOrEqual(1);
+  }
 }
 
 export const Busy: Story = {
@@ -252,6 +259,17 @@ export const Memory: Story = {
     geometry(context.canvasElement);
   },
 };
+/** Tiles with and without a bar under the value, side by side as in the
+ * screenshot that found them misaligned: labels and values share one line. */
+export const MixedAlignment: Story = {
+  args: { data: { ...allWidgets, tiles: ["finished", "leftover", "reclaim", "memory", "cpu", "disk"].map(id => allWidgets.tiles.find(t => t.id === id)!) } },
+  globals: { viewport: { value: "headerWide", isRotated: false } },
+  play: async ({ canvasElement }) => {
+    await ready(canvasElement);
+    for (const id of ["memory", "disk", "leftover"]) await expect(await tile(canvasElement, id)).toBeVisible();
+    geometry(canvasElement);
+  },
+};
 export const CPU = widget("cpu");
 export const Disk = widget("disk");
 export const Load = widget("load");

ui/src/widgets/KpiTile.tsx

@@ -104,7 +104,9 @@ export function KpiTile({ label, sublabel, icon: Glyph, value, unit, total, capt
         {chip ?? <span />}
         {line && <Box h={24} style={{ flex: "1 1 48px", minWidth: 40, maxWidth: 96 }}>{line}</Box>}
       </Group>}
-      {children}
+      {/* Every header tile keeps the same strip below its value, so a bar under
+          memory adds no height and labels and values line up across the row. */}
+      {header ? <Box h={4} aria-hidden={children ? undefined : true}>{children}</Box> : children}
     </Stack>}
   </Root>;
   return <Box className="w-tile-box" visibleFrom={visibleFrom} hiddenFrom={hiddenFrom} style={header ? { display: "inline-block" } : undefined}>