Issue Station
Sign In
Tools hereToolbox

openclaw - ✅(Solved) Fix Usage tab: bar chart tooltip clipped on tall bars (overflow:clip on .usage-left-card) [1 pull requests, 1 comments, 1 participants]

Official PRs (…)
ON THIS PAGE

Recommended Tools

×6

Utilities matched from this issue’s tags and category — try them while you read without losing context.

GitHub issue graph ai analysis

Paste a GitHub issue URL. We fetch that issue, discover linked issues from bodies/comments/timeline, collect linked pull requests, and produce a structured English report.

The report is written in English Markdown for sharing and archival.

Helpful · Quick feedback

Loading…
GitHub stats
openclaw/openclaw#59212•Fetched 2026-04-08 02:27:27
View on GitHub
Comments
1
Participants
1
Timeline
3
Reactions
0
Author
Sensie-agentsSensie-agents
Participants
Sensie-agentsSensie-agents
Timeline (top)
commented ×1cross-referenced ×1referenced ×1

Root Cause

The CSS rule groups .usage-left-card with several other containers under overflow: clip:

.usage-loading-card, .usage-empty-state, .usage-overview-card, .usage-mosaic,
.usage-left-card, .sessions-card, .session-detail-panel {
  position: relative;
  overflow: clip;
}

The .daily-bar-tooltip is positioned with position: absolute; bottom: calc(100% + 8px) inside each .daily-bar-wrapper. For tall bars (near the top of the chart), the tooltip extends above the .usage-left-card boundary and gets clipped by overflow: clip.

Fix Action

Workaround

Manually patch the bundled CSS at dist/control-ui/assets/index-*.css as described above (overwritten on update).

PR fix notes

PR #59244: fix(ui): prevent tooltip clipping on daily usage bar chart

Description (problem / solution / changelog)

Summary

The daily bar chart tooltips on the Usage tab get clipped when hovering over tall bars, because .usage-left-card is grouped with other containers under overflow: clip.

Changes

  • Remove .usage-left-card from the shared overflow: clip rule group
  • Give it its own rule with overflow: visible so the absolutely-positioned .daily-bar-tooltip can escape the card boundary

Single file changed, minimal diff.

Fixes #59212

Changed files

  • ui/src/styles/usage.css (modified, +5/-1)

Code Example

.usage-loading-card, .usage-empty-state, .usage-overview-card, .usage-mosaic,
.usage-left-card, .sessions-card, .session-detail-panel {
  position: relative;
  overflow: clip;
}

---

.usage-loading-card, .usage-empty-state, .usage-overview-card, .usage-mosaic,
.sessions-card, .session-detail-panel {
  position: relative;
  overflow: clip;
}
.usage-left-card {
  position: relative;
  overflow: visible;
}
RAW_BUFFERClick to expand / collapse

Bug

On the Usage tab → Daily Token Usage bar chart, hovering over a tall bar causes the tooltip/data popup to appear outside the visible frame — it gets clipped and is unreadable.

Root Cause

The CSS rule groups .usage-left-card with several other containers under overflow: clip:

.usage-loading-card, .usage-empty-state, .usage-overview-card, .usage-mosaic,
.usage-left-card, .sessions-card, .session-detail-panel {
  position: relative;
  overflow: clip;
}

The .daily-bar-tooltip is positioned with position: absolute; bottom: calc(100% + 8px) inside each .daily-bar-wrapper. For tall bars (near the top of the chart), the tooltip extends above the .usage-left-card boundary and gets clipped by overflow: clip.

Expected Behavior

The hover tooltip should always be fully visible regardless of bar height.

Suggested Fix

Separate .usage-left-card from the shared overflow rule and set it to overflow: visible:

.usage-loading-card, .usage-empty-state, .usage-overview-card, .usage-mosaic,
.sessions-card, .session-detail-panel {
  position: relative;
  overflow: clip;
}
.usage-left-card {
  position: relative;
  overflow: visible;
}

Environment

  • OpenClaw v2026.3.28
  • macOS, dark mode
  • Affects any date range where daily token bars are tall enough for the tooltip to exceed the card boundary

Workaround

Manually patch the bundled CSS at dist/control-ui/assets/index-*.css as described above (overwritten on update).

extent analysis

TL;DR

Separate the .usage-left-card from the shared overflow rule and set it to overflow: visible to prevent the tooltip from being clipped.

Guidance

  • Identify the CSS rule that groups .usage-left-card with other containers under overflow: clip and separate it.
  • Update the CSS to set overflow: visible for .usage-left-card to allow the tooltip to extend beyond the card boundary.
  • Verify the fix by hovering over tall bars in the Daily Token Usage bar chart and checking if the tooltip is fully visible.
  • Consider applying the suggested fix to the bundled CSS at dist/control-ui/assets/index-*.css as a temporary workaround until a permanent solution is implemented.

Example

.usage-loading-card, .usage-empty-state, .usage-overview-card, .usage-mosaic,
.sessions-card, .session-detail-panel {
  position: relative;
  overflow: clip;
}
.usage-left-card {
  position: relative;
  overflow: visible;
}

Notes

This fix may not apply to other components that rely on the shared overflow rule, and additional testing may be necessary to ensure no unintended consequences.

Recommendation

Apply the workaround by manually patching the bundled CSS, as it provides a temporary solution to the issue until a permanent fix can be implemented.

Vote matrix · Quick signals

Works
Did the solution work? Tap to confirm.
Easy Fix
Was it a quick fix?
Time Saver
Did it save you time?
Blocking
Was it severely blocking?
Common Issue
Are others likely hitting this too?
Flaky / Intermittent
Is it intermittent?
Verified / Reproducible
Can you reproduce it reliably?
Loading…
#embedding generation#cache error#pipeline error#runtime error#dependency conflict

Still need to ship something?

×6

Another batch ranked right after the header list — different links, same matching logic.

Back to top recommendations

TRENDING