Skip to content

Usage tab: bar chart tooltip clipped on tall bars (overflow:clip on .usage-left-card) #59212

@Sensie-agents

Description

@Sensie-agents

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

Metadata

Metadata

Assignees

No one assigned

    Labels

    No labels
    No labels

    Type

    No type
    No fields configured for issues without a type.

    Projects

    No projects

    Milestone

    No milestone

    Relationships

    None yet

    Development

    No branches or pull requests

    Issue actions