Fix clipped usage chart tooltip by sandypockets · Pull Request #82846 · openclaw/openclaw

sandypockets · 2026-05-17T02:38:28Z

Summary

Problem: Daily usage chart tooltips on /usage could be clipped for tall bars because each tooltip was rendered inside the overflow-clipped chart/card container.
Why it matters: The highest-usage days are the most important bars to inspect, but their tooltips could disappear outside the visible chart area.
What changed: Daily bar tooltips now render as a single viewport-positioned floating tooltip, positioned from the active bar with getBoundingClientRect(), flipped below when needed, and horizontally clamped inside the viewport.
What did NOT change (scope boundary): No usage aggregation, API behavior, persistence, auth, backend logic, or chart data model changed.

Change Type (select all)

Scope (select all touched areas)

Linked Issue/PR

Closes Usage tab: bar chart tooltip clipped on tall bars (overflow:clip on .usage-left-card) #59212
Related #
This PR fixes a bug or regression

Real behavior proof (required for external PRs)

Behavior addressed: /usage daily usage bar chart tooltips could be clipped for tall bars because the tooltip was absolutely positioned inside the chart's overflow-clipped scrolling container.
Real environment tested: GitHub Codespaces Linux, branch fix-usage-tooltip-clipping, Control UI source rendered through a repo-local Vite visual harness with fake daily usage data, and Playwright Chromium. The full OpenClaw runtime was not started.
Exact steps or command run after this patch:

node scripts/run-vitest.mjs ui/src/ui/views/usage-render-overview.test.ts
pnpm tsgo:test:ui
node scripts/run-oxlint.mjs --tsconfig config/tsconfig/oxlint.core.json ui/src/ui/views/usage-render-overview.ts ui/src/ui/views/usage-render-overview.test.ts
pnpm exec oxfmt --check --threads=1 ui/src/ui/views/usage-render-overview.ts ui/src/ui/views/usage-render-overview.test.ts ui/src/styles/usage.css
pnpm --dir ui build
git diff --check
pnpm exec vite --config .artifacts/usage-tooltip-visual/vite.config.ts
node .artifacts/usage-tooltip-visual/capture.mjs

Evidence after fix: Screenshot artifacts were generated from the Codespaces visual harness: usage-tooltip-tall-desktop.png, usage-tooltip-short-desktop.png, and usage-tooltip-mobile-clamped.png. Terminal proof from the Playwright capture shows the fixed tooltip uses position:"fixed", pointerEvents:"none", inChartContainer:false, and stays within the viewport on desktop and mobile.
Observed result after fix: Tall and short daily bar tooltip content remains visible. The active tooltip renders outside .daily-chart-bars, uses a viewport-fixed layer, flips below in the narrow/top-edge case, and clamps horizontally inside the viewport.
What was not tested: Real production usage generation was not tested or required for this UI positioning fix.
Before evidence: Screenshot artifact usage-tooltip-before-clipped.png shows the old per-bar tooltip rendered inside the chart container. Terminal proof from the same harness shows position:"absolute", inChartContainer:true, and clippedAboveChart:true for the tall bar tooltip.

Visual Evidence Files

Screenshots attached in the Evidence section below.

Captured DOM Proof

{"label":"before desktop tall bar","text":"May 1, 2026 1.2M tokens $8.42","position":"absolute","pointerEvents":"none","opacity":"1","inChartContainer":true,"clippedAboveChart":true,"tooltipTop":20,"tooltipBottom":89,"chartTop":91,"chartBottom":340,"viewportWidth":1280,"viewportHeight":720}
{"label":"desktop tall bar","text":"May 1, 20261.2M tokens$8.42","position":"fixed","pointerEvents":"none","placement":"above","inChartContainer":false,"left":255,"right":337,"top":28,"bottom":97,"viewportWidth":1280,"viewportHeight":720}
{"label":"desktop short bar","text":"May 2, 20264 tokens$0.01","position":"fixed","pointerEvents":"none","placement":"above","inChartContainer":false,"left":369,"right":451,"top":214,"bottom":283,"viewportWidth":1280,"viewportHeight":720}
{"label":"mobile narrow tall bar","text":"May 1, 20261.2M tokens$8.42","position":"fixed","pointerEvents":"none","placement":"below","inChartContainer":false,"left":8,"right":90,"top":336,"bottom":405,"viewportWidth":360,"viewportHeight":640}

Root Cause (if applicable)

Root cause: Daily bar tooltips were absolutely positioned above each bar inside containers that use horizontal scrolling/clipped overflow. Tall bars could push the tooltip outside the visible chart/card area, where it was clipped.
Missing detection / guardrail: There was no focused test for tall-bar tooltip placement inside the overflow-clipped daily chart.
Contributing context (if known): The chart needs horizontal scrolling, but rendering per-bar tooltips inside that scroll container made vertical overflow fragile.

Regression Test Plan (if applicable)

Coverage level that should have caught this:
- Unit test
- Seam / integration test
- End-to-end test
- Existing coverage already sufficient
Target test or file: ui/src/ui/views/usage-render-overview.test.ts
Scenario the test should lock in: Tall and short daily bars show one floating tooltip; tooltip flips below near the top of the viewport; tooltip clamps horizontally in a narrow viewport; keyboard focus/blur works; click and shift-click day selection remain operable.
Why this is the smallest reliable guardrail: The bug is DOM positioning in the daily chart layer, so a focused jsdom test with mocked element rectangles covers the regression without needing real usage generation.
Existing test that already covers this (if any): None known.
If no new test is added, why not: N/A

User-visible / Behavior Changes

Daily usage chart tooltips remain visible for tall bars and stay within the viewport on narrow screens. Keyboard users can also focus daily bars and see the same tooltip details.

Diagram (if applicable)

Before:
[hover/focus tall daily bar] -> [tooltip inside clipped chart] -> [tooltip can be cut off]

After:
[hover/focus tall daily bar] -> [fixed floating tooltip] -> [tooltip flips/clamps and remains visible]

Security Impact (required)

New permissions/capabilities? (Yes/No) No
Secrets/tokens handling changed? (Yes/No) No
New/changed network calls? (Yes/No) No
Command/tool execution surface changed? (Yes/No) No
Data access scope changed? (Yes/No) No
If any Yes, explain risk + mitigation: N/A

Repro + Verification

Environment

OS: GitHub Codespaces Linux
Runtime/container: Codespaces repo checkout
Branch: fix-usage-tooltip-clipping
Model/provider: N/A
Integration/channel (if any): Control UI
Relevant config (redacted): N/A
Data used for visual proof: Fake daily usage data in a local Vite harness

Steps

Open the /usage daily chart with representative daily usage containing both a tall bar and a short bar.
Hover or focus the tallest daily bar.
Hover or focus a shorter daily bar.
Check a narrow/mobile viewport.
Click and shift-click daily bars.

Expected

Tall and short bar tooltips are fully visible.
Tooltip is not clipped by the chart/card container.
Tooltip flips below when there is not enough space above.
Tooltip clamps horizontally inside the viewport.
Click, shift-click, Enter, and Space selection behavior still work.

Actual

The active tooltip renders as a fixed floating layer outside the clipped chart container.
Tall and short bar tooltip content remains visible.
Narrow viewport placement is clamped, and the top-edge case flips below the bar.
Day selection behavior is preserved.

Commands Run

node scripts/run-vitest.mjs ui/src/ui/views/usage-render-overview.test.ts
pnpm tsgo:test:ui
node scripts/run-oxlint.mjs --tsconfig config/tsconfig/oxlint.core.json ui/src/ui/views/usage-render-overview.ts ui/src/ui/views/usage-render-overview.test.ts
pnpm exec oxfmt --check --threads=1 ui/src/ui/views/usage-render-overview.ts ui/src/ui/views/usage-render-overview.test.ts ui/src/styles/usage.css
pnpm --dir ui build
git diff --check
codex review --uncommitted
pnpm exec vite --config .artifacts/usage-tooltip-visual/vite.config.ts
node .artifacts/usage-tooltip-visual/capture.mjs

Verification Result

node scripts/run-vitest.mjs ui/src/ui/views/usage-render-overview.test.ts: Passed.
pnpm tsgo:test:ui: Passed.
node scripts/run-oxlint.mjs --tsconfig config/tsconfig/oxlint.core.json ui/src/ui/views/usage-render-overview.ts ui/src/ui/views/usage-render-overview.test.ts: Passed with 0 warnings/errors.
pnpm exec oxfmt --check --threads=1 ui/src/ui/views/usage-render-overview.ts ui/src/ui/views/usage-render-overview.test.ts ui/src/styles/usage.css: Passed.
pnpm --dir ui build: Passed. Vite emitted an existing large chunk warning.
git diff --check: Passed.
codex review --uncommitted: Final review found no actionable correctness issues.
node .artifacts/usage-tooltip-visual/capture.mjs: Passed and generated before/after screenshot artifacts.

Evidence

Attach at least one:

Failing test/log before + passing after
Trace/log snippets
Screenshot/recording
Perf numbers (if relevant)

Before

After

Human Verification (required)

What you personally verified (not just CI), and how:

Verified scenarios: Used a Codespaces visual harness with fake daily usage data and Playwright Chromium to capture before/after screenshots for the tall bar, short bar, and narrow/mobile viewport cases. The Playwright capture also checked that the fixed tooltip is position: fixed, outside .daily-chart-bars, and pointer-events: none.
Edge cases checked: Tall bar clipping before the fix, tall bar visible after the fix, short bar visible after the fix, narrow/mobile viewport clamping, top-edge flip below the bar, and tooltip rendering outside the clipped chart container. Keyboard focus, blur, click, shift-click, Enter, and Space selection behavior were verified by the focused component test run.
What you did not verify: Real production usage generation and the full OpenClaw runtime were not run.

Review Conversations

I replied to or resolved every bot review conversation I addressed in this PR.
I left unresolved only the conversations that still need reviewer or maintainer judgment.

Compatibility / Migration

Backward compatible? (Yes/No) Yes
Config/env changes? (Yes/No) No
Migration needed? (Yes/No) No
If yes, exact upgrade steps: N/A

Risks and Mitigations

Risk: Fixed-position tooltip placement could regress at viewport edges.
- Mitigation: Placement clamps horizontally and flips below when there is not enough room above; focused tests cover tall/short bars, top-edge flipping, and narrow viewport clamping.
Risk: Moving tooltip behavior could interfere with bar interactions.
- Mitigation: The floating tooltip keeps pointer events off, and tests cover mouse, keyboard, click, shift-click, Enter, and Space selection paths.

clawsweeper · 2026-05-17T02:39:32Z

Codex review: passed.

Workflow note: Future ClawSweeper reviews update this same comment in place.

How this review workflow works

ClawSweeper keeps one durable marker-backed review comment per issue or PR.
Re-runs edit this comment so the latest verdict, findings, and automation markers stay together instead of adding duplicate bot comments.
A fresh review can be triggered by maintainer comments, exact-item GitHub events, scheduled/background review runs, or manual workflow dispatch.
PR/issue authors can comment @clawsweeper re-review or @clawsweeper re-run on their own open PR or issue to request a fresh review only.
Maintainers can also comment @clawsweeper review to request a fresh review only.
Fresh-review commands do not start repair, autofix, rebase, CI repair, or automerge.
Maintainer-only repair and merge flows require explicit commands such as @clawsweeper autofix, @clawsweeper automerge, @clawsweeper fix ci, or @clawsweeper address review.
Maintainers can comment @clawsweeper explain to ask for more context, or @clawsweeper stop to stop active automation.

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-chart-bars and .usage-left-card overflow contexts, and the linked issue plus PR before screenshot demonstrate the tall-bar clipping case.

Real behavior proof
Sufficient (screenshot): The PR body includes after-fix screenshots and DOM output, and the inspected attachments visibly show unclipped desktop and mobile tooltip behavior.

Next step before merge
No repair job is needed; the automerge-enabled PR has no blocking findings and should proceed through exact-head checks/merge gating.

Security
Cleared: The diff is limited to UI rendering, CSS, and tests, with no dependency, workflow, secret, network, or code-execution surface changes.

Review details

Best possible solution:

Land the focused floating-tooltip implementation after required exact-head checks, then let the linked Usage tooltip issue close through the PR's closing reference.

Do we have a high-confidence way to reproduce the issue?

Yes, at source level. Current main renders an absolute .daily-bar-tooltip inside .daily-chart-bars and .usage-left-card overflow contexts, and the linked issue plus PR before screenshot demonstrate the tall-bar clipping case.

Is this the best way to solve the issue?

Yes. A body-level fixed tooltip is the narrowest maintainable fix because it preserves the chart's horizontal overflow while escaping both clipping ancestors.

What I checked:

Current main clipping ancestor: Current main still groups .usage-left-card with containers that set position: relative and overflow: clip, matching the card-level clipping path described by the linked issue. (ui/src/styles/usage.css:29, 7c416950c615)
Current main chart overflow context: Current main keeps .daily-chart-bars at overflow-x: auto and renders the absolute .daily-bar-tooltip inside the same chart subtree, so the tooltip remains under overflow ancestors before this PR. (ui/src/ui/views/usage-render-overview.ts:216, 7c416950c615)
PR implementation: The PR head adds a body-attached .daily-bar-tooltip--floating, computes placement from the source bar's getBoundingClientRect(), clamps to viewport margins, flips below near the top edge, and wires hover/focus/cleanup paths. (ui/src/ui/views/usage-render-overview.ts:56, edbb26a5be49)
Regression coverage: The PR adds focused jsdom tests for one floating tooltip, tall and short bars, top-edge flip, narrow viewport clamping, DOM-removal cleanup, keyboard focus/blur, and click/shift-click/Enter/Space selection behavior. (ui/src/ui/views/usage-render-overview.test.ts:187, edbb26a5be49)
Real behavior proof: Downloaded PR attachment images are valid PNGs; the before image shows no readable tall-bar tooltip while the after desktop/mobile images visibly show unclipped fixed-position tooltip content, consistent with the PR body's DOM proof.
Related issue context: The linked issue discussion identified both .usage-left-card clipping and .daily-chart-bars overflow as contributors, and specifically named fixed-position tooltip coordinates as the safer path if horizontal overflow should be preserved.

Likely related people:

BunsDev: Prior ClawSweeper context maps the Usage overview styling/rendering work to this handle, and local history shows Val Alexander introduced the major Usage overview styling/rendering surface in a5309b6f93db with large changes to the affected files. (role: introduced behavior and recent area contributor; confidence: high; commits: a5309b6f93db, da5b7ff0afaf, 346a773b1894; files: ui/src/styles/usage.css, ui/src/ui/views/usage-render-overview.ts, ui/src/ui/views/usage.ts)
Marvinthebored: Recent durable Usage cache work touched the same Usage rendering, style, and view files, making this a plausible reviewer for Usage UI follow-up. (role: recent adjacent contributor; confidence: medium; commits: a64b30705fab; files: ui/src/styles/usage.css, ui/src/ui/views/usage-render-overview.ts, ui/src/ui/views/usage.ts)
steipete: Recent Control UI formatting and maintenance commits touched the Usage rendering files; this is a maintenance signal rather than direct feature ownership. (role: recent adjacent contributor; confidence: medium; commits: d35f37a58cd4, 833636f0b239, f625a0b106f6; files: ui/src/ui/views/usage-render-overview.ts, ui/src/ui/views/usage.ts)

Remaining risk / open question:

I did not run the PR's validation commands in this read-only review, so exact-head CI should still gate merge.

Codex review notes: model gpt-5.5, reasoning high; reviewed against 7c416950c615.

Takhoffman · 2026-05-17T17:18:25Z

@clawsweeper automerge

clawsweeper · 2026-05-17T17:20:10Z

🦞✅
ClawSweeper merged this PR after the passing review.

Source: clawsweeper[bot]
Feedback: structured ClawSweeper verdict: pass (sha=edbb26a5be49bb3d459cb2517267926667eb3ed2)
Merge status: merged by ClawSweeper automerge
Merged at: 2026-05-17T17:25:24Z
Merge commit: a5a5df67da35

What merged:

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

The automerge loop is complete.

Automerge progress:

2026-05-17 17:20:09 UTC review queued edbb26a5be49 (queued)

2026-05-17 17:25:14 UTC review passed edbb26a5be49 (structured ClawSweeper verdict: pass (sha=edbb26a5be49bb3d459cb2517267926667eb3...)

2026-05-17 17:25:26 UTC merged edbb26a5be49 (merged by ClawSweeper automerge)

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 edbb26a5be49bb3d459cb2517267926667eb3ed2. - Required merge gates passed before the squash merge. Prepared head SHA: edbb26a5be49bb3d459cb2517267926667eb3ed2 Review: openclaw/openclaw#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>

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: openclaw#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>

Fix clipped usage chart tooltip

efd1461

openclaw-barnacle Bot added app: web-ui App: web-ui size: M proof: supplied External PR includes structured after-fix real behavior proof. labels May 17, 2026

clawsweeper Bot added proof: sufficient ClawSweeper judged the real behavior proof convincing. P2 Normal backlog priority with limited blast radius. labels May 17, 2026

Merge branch 'main' into fix-usage-tooltip-clipping

edbb26a

openclaw-barnacle Bot removed the proof: sufficient ClawSweeper judged the real behavior proof convincing. label May 17, 2026

clawsweeper Bot added the proof: sufficient ClawSweeper judged the real behavior proof convincing. label May 17, 2026

clawsweeper Bot added the clawsweeper:automerge Maintainer opted this PR into bounded ClawSweeper-reviewed automerge label May 17, 2026

clawsweeper Bot merged commit a5a5df6 into openclaw:main May 17, 2026
101 of 102 checks passed

github-actions Bot mentioned this pull request May 17, 2026

📡 Upstream Digest — 2026-05-17 18:56 UTC curtismercier/openclaw-mods#885

Open

clawsweeper Bot mentioned this pull request May 18, 2026

feat(ui): tool name style in usage panel #42197

Closed

2 tasks

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Uh oh!

Fix clipped usage chart tooltip#82846

Fix clipped usage chart tooltip#82846
clawsweeper[bot] merged 2 commits into
openclaw:mainfrom
sandypockets:fix-usage-tooltip-clipping

sandypockets commented May 17, 2026

Uh oh!

clawsweeper Bot commented May 17, 2026 •

edited

Loading

Uh oh!

Takhoffman commented May 17, 2026

Uh oh!

clawsweeper Bot commented May 17, 2026 •

edited

Loading

Uh oh!

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

2 participants

Uh oh!

Conversation

sandypockets commented May 17, 2026

Summary

Change Type (select all)

Scope (select all touched areas)

Linked Issue/PR

Real behavior proof (required for external PRs)

Visual Evidence Files

Captured DOM Proof

Root Cause (if applicable)

Regression Test Plan (if applicable)

User-visible / Behavior Changes

Diagram (if applicable)

Security Impact (required)

Repro + Verification

Environment

Steps

Expected

Actual

Commands Run

Verification Result

Evidence

Human Verification (required)

Review Conversations

Compatibility / Migration

Risks and Mitigations

Uh oh!

clawsweeper Bot commented May 17, 2026 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Uh oh!

Takhoffman commented May 17, 2026

Uh oh!

clawsweeper Bot commented May 17, 2026 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Uh oh!

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

2 participants

clawsweeper Bot commented May 17, 2026 •

edited

Loading

clawsweeper Bot commented May 17, 2026 •

edited

Loading