Fix clipped usage chart tooltip (#82846)

sandypockets · Takhoffman · web-flow · commit a5a5df67da35 · 2026-05-17T17:25:23.000Z
Summary: - The PR replaces per-bar absolute Usage chart tooltips with one viewport-fixed floating tooltip and adds focus/keyboard handling plus focused jsdom coverage. - Reproducibility: yes. at source level. Current main renders an absolute `.daily-bar-tooltip` inside `.daily- ... ` overflow contexts, and the linked issue plus PR before screenshot demonstrate the tall-bar clipping case. Automerge notes: - PR branch already contained follow-up commit before automerge: Merge branch 'main' into fix-usage-tooltip-clipping Validation: - ClawSweeper review passed for head edbb26a. - Required merge gates passed before the squash merge. Prepared head SHA: edbb26a Review: #82846 (comment) Co-authored-by: sandypockets <41454557+sandypockets@users.noreply.github.com> Approved-by: takhoffman Co-authored-by: takhoffman <781889+takhoffman@users.noreply.github.com>
diff --git a/ui/src/styles/usage.css b/ui/src/styles/usage.css
@@ -1034,6 +1034,11 @@ details.usage-filter-select summary::-webkit-details-marker,
   transform: translateY(-1px);
 }
 
+.daily-bar-wrapper:focus-visible {
+  outline: 2px solid color-mix(in srgb, var(--accent) 40%, transparent);
+  outline-offset: 3px;
+}
+
 .daily-bar--stacked {
   display: flex;
   flex-direction: column;
@@ -1079,6 +1084,17 @@ details.usage-filter-select summary::-webkit-details-marker,
   transform: translate(-50%, 0);
 }
 
+.daily-bar-tooltip--floating {
+  position: fixed;
+  left: 0;
+  top: 0;
+  bottom: auto;
+  transform: none;
+  max-width: min(220px, calc(100vw - 16px));
+  opacity: 1;
+  z-index: 1000;
+}
+
 .cost-breakdown-bar {
   display: flex;
   width: 100%;
diff --git a/ui/src/ui/views/usage-render-overview.test.ts b/ui/src/ui/views/usage-render-overview.test.ts
@@ -1,9 +1,18 @@
 /* @vitest-environment jsdom */
 
 import { render } from "lit";
-import { describe, expect, it } from "vitest";
-import { renderSessionsCard, renderUsageInsights } from "./usage-render-overview.ts";
-import type { UsageAggregates, UsageSessionEntry, UsageTotals } from "./usageTypes.ts";
+import { afterEach, describe, expect, it, vi } from "vitest";
+import {
+  renderDailyChartCompact,
+  renderSessionsCard,
+  renderUsageInsights,
+} from "./usage-render-overview.ts";
+import type {
+  CostDailyEntry,
+  UsageAggregates,
+  UsageSessionEntry,
+  UsageTotals,
+} from "./usageTypes.ts";
 
 const totals: UsageTotals = {
   input: 100,
@@ -40,6 +49,89 @@ const aggregates = {
   daily: [],
 } as unknown as UsageAggregates;
 
+function rect(left: number, top: number, width: number, height: number): DOMRect {
+  return {
+    x: left,
+    y: top,
+    left,
+    top,
+    width,
+    height,
+    right: left + width,
+    bottom: top + height,
+    toJSON: () => ({}),
+  } as DOMRect;
+}
+
+function setViewport(width: number, height: number) {
+  Object.defineProperty(window, "innerWidth", { configurable: true, value: width });
+  Object.defineProperty(window, "innerHeight", { configurable: true, value: height });
+}
+
+function mockTooltipRect(width: number, height: number) {
+  vi.spyOn(HTMLElement.prototype, "getBoundingClientRect").mockImplementation(
+    function (this: HTMLElement) {
+      if (this.classList.contains("daily-bar-tooltip--floating")) {
+        return rect(0, 0, width, height);
+      }
+      return rect(0, 0, 0, 0);
+    },
+  );
+}
+
+function mockElementRect(
+  element: HTMLElement,
+  left: number,
+  top: number,
+  width: number,
+  height: number,
+) {
+  Object.defineProperty(element, "getBoundingClientRect", {
+    configurable: true,
+    value: () => rect(left, top, width, height),
+  });
+}
+
+function dailyEntry(date: string, totalTokens: number, totalCost = 0): CostDailyEntry {
+  return {
+    ...totals,
+    date,
+    input: totalTokens,
+    output: 0,
+    cacheRead: 0,
+    cacheWrite: 0,
+    totalTokens,
+    totalCost,
+  };
+}
+
+function renderDailyChart(
+  daily: CostDailyEntry[],
+  onSelectDay = vi.fn<(day: string, shiftKey: boolean) => void>(),
+) {
+  const container = document.createElement("div");
+  document.body.append(container);
+  render(
+    renderDailyChartCompact(daily, [], "tokens", "total", () => {}, onSelectDay),
+    container,
+  );
+  return {
+    container,
+    onSelectDay,
+    bars: Array.from(container.querySelectorAll<HTMLElement>(".daily-bar-wrapper")),
+  };
+}
+
+function getFloatingTooltip(): HTMLElement | null {
+  return document.body.querySelector(".daily-bar-tooltip--floating");
+}
+
+afterEach(() => {
+  document.body.replaceChildren();
+  window.dispatchEvent(new Event("scroll"));
+  vi.restoreAllMocks();
+});
+
 function directText(element: Element | null | undefined): string | undefined {
   return Array.from(element?.childNodes ?? [])
     .filter((node) => node.nodeType === Node.TEXT_NODE)
@@ -92,6 +184,101 @@ describe("renderUsageInsights", () => {
   });
 });
 
+describe("renderDailyChartCompact", () => {
+  it("shows one floating tooltip for tall and short daily bars and hides it on mouse leave", () => {
+    setViewport(800, 600);
+    mockTooltipRect(180, 64);
+    const { bars } = renderDailyChart([
+      dailyEntry("2026-05-01", 1_200_000, 3.5),
+      dailyEntry("2026-05-02", 4, 0.01),
+    ]);
+
+    mockElementRect(bars[0], 100, 100, 24, 200);
+    bars[0].dispatchEvent(new MouseEvent("mouseenter"));
+
+    let tooltip = getFloatingTooltip();
+    expect(tooltip).not.toBeNull();
+    expect(tooltip?.textContent).toContain("1.2M tokens");
+    expect(tooltip?.style.top).toBe("28px");
+    expect(document.body.querySelectorAll(".daily-bar-tooltip--floating")).toHaveLength(1);
+
+    bars[0].dispatchEvent(new MouseEvent("mouseleave"));
+    expect(getFloatingTooltip()).toBeNull();
+
+    mockElementRect(bars[1], 200, 320, 24, 6);
+    bars[1].dispatchEvent(new MouseEvent("mouseenter"));
+
+    tooltip = getFloatingTooltip();
+    expect(tooltip).not.toBeNull();
+    expect(tooltip?.textContent).toContain("4 tokens");
+    bars[1].dispatchEvent(new MouseEvent("mouseleave"));
+  });
+
+  it("flips below when the bar is near the top and clamps inside a narrow viewport", () => {
+    setViewport(120, 140);
+    mockTooltipRect(100, 40);
+    const { bars } = renderDailyChart([dailyEntry("2026-05-03", 10_000, 1)]);
+
+    mockElementRect(bars[0], 110, 12, 20, 20);
+    bars[0].dispatchEvent(new MouseEvent("mouseenter"));
+
+    const tooltip = getFloatingTooltip();
+    expect(tooltip?.dataset.placement).toBe("below");
+    expect(tooltip?.style.top).toBe("40px");
+    expect(tooltip?.style.left).toBe("12px");
+    bars[0].dispatchEvent(new MouseEvent("mouseleave"));
+  });
+
+  it("clears the floating tooltip when the chart DOM is removed", async () => {
+    setViewport(800, 600);
+    mockTooltipRect(160, 56);
+    const { bars, container } = renderDailyChart([dailyEntry("2026-05-04", 500, 0.2)]);
+    mockElementRect(bars[0], 300, 220, 24, 80);
+
+    bars[0].dispatchEvent(new MouseEvent("mouseenter"));
+    expect(getFloatingTooltip()).not.toBeNull();
+
+    container.remove();
+    await Promise.resolve();
+    expect(getFloatingTooltip()).toBeNull();
+  });
+
+  it("shows on keyboard focus, hides on blur, and keeps day selection operable", () => {
+    setViewport(800, 600);
+    mockTooltipRect(160, 56);
+    const { bars, onSelectDay } = renderDailyChart([dailyEntry("2026-05-04", 500, 0.2)]);
+    mockElementRect(bars[0], 300, 220, 24, 80);
+
+    bars[0].dispatchEvent(new Event("focus"));
+    expect(getFloatingTooltip()?.textContent).toContain("500 tokens");
+
+    bars[0].dispatchEvent(new Event("blur"));
+    expect(getFloatingTooltip()).toBeNull();
+
+    bars[0].dispatchEvent(new MouseEvent("click", { bubbles: true, shiftKey: true }));
+    expect(onSelectDay).toHaveBeenCalledWith("2026-05-04", true);
+
+    bars[0].dispatchEvent(new KeyboardEvent("keydown", { bubbles: true, key: "Enter" }));
+    expect(onSelectDay).toHaveBeenCalledWith("2026-05-04", false);
+
+    const space = new KeyboardEvent("keydown", {
+      bubbles: true,
+      cancelable: true,
+      key: " ",
+      shiftKey: true,
+    });
+    bars[0].dispatchEvent(space);
+    expect(space.defaultPrevented).toBe(true);
+    expect(onSelectDay).toHaveBeenCalledWith("2026-05-04", true);
+
+    bars[0].dispatchEvent(new MouseEvent("mouseenter"));
+    bars[0].dispatchEvent(new Event("pointerdown", { bubbles: true }));
+    bars[0].dispatchEvent(new Event("focus"));
+    bars[0].dispatchEvent(new MouseEvent("mouseleave"));
+    expect(getFloatingTooltip()).toBeNull();
+  });
+});
+
 describe("renderSessionsCard", () => {
   const noop = () => {};
 
diff --git a/ui/src/ui/views/usage-render-overview.ts b/ui/src/ui/views/usage-render-overview.ts
