Issue Station
Sign In
Tools hereToolbox

claude-code - 💡(How to fix) Fix [BUG] /insights report: bar-chart labels truncated (width: 100px too narrow) [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
anthropics/claude-code#53222•Fetched 2026-04-26 05:21:15
View on GitHub
Comments
0
Participants
1
Timeline
4
Reactions
0
Author
laurac8rlaurac8r
Participants
laurac8rlaurac8r
Timeline (top)
labeled ×4

In the HTML report produced by /insights (~/.claude/usage-data/report.html), several bar-chart row labels are truncated with an ellipsis because the .bar-label CSS rule hard-codes width: 100px, while the longest labels exceed that width.

Root Cause

In the HTML report produced by /insights (~/.claude/usage-data/report.html), several bar-chart row labels are truncated with an ellipsis because the .bar-label CSS rule hard-codes width: 100px, while the longest labels exceed that width.

Fix Action

Workaround

Editing width: 100px → width: 150px in the rendered report.html fixes it for the current run, but the next /insights regenerates the file from the same template, so the bug returns each run.

Code Example

.bar-label {
  width: 100px;            /* too narrow */
  font-size: 11px;
  color: #475569;
  flex-shrink: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
RAW_BUFFERClick to expand / collapse

Summary

In the HTML report produced by /insights (~/.claude/usage-data/report.html), several bar-chart row labels are truncated with an ellipsis because the .bar-label CSS rule hard-codes width: 100px, while the longest labels exceed that width.

Repro

  1. Run /insights in any Claude Code session with enough history.
  2. Open the resulting ~/.claude/usage-data/report.html.
  3. Look at the What Helped Most (Claude's Capabilities) chart — the row labeled Fast/Accurate Search (20 chars) shows as Fast/Accurate Se....

The same truncation hits other charts that share .bar-label:

LabelChars
Tool Permission Denied22
Misunderstood Request21
User Rejected Action20
Pause And Checkpoint20
Iterative Refinement20
Fast/Accurate Search20

At font-size: 11px, ~22 chars needs ≈140–150px.

Source of the bug

In the rendered HTML:

.bar-label {
  width: 100px;            /* too narrow */
  font-size: 11px;
  color: #475569;
  flex-shrink: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

The width is fixed and text-overflow: ellipsis clips anything wider.

Suggested fix

Bump width in the /insights report template to ~150px (or, more robustly, switch to a per-chart auto-sized column via CSS grid so the column always matches the widest label in that chart).

Workaround

Editing width: 100px → width: 150px in the rendered report.html fixes it for the current run, but the next /insights regenerates the file from the same template, so the bug returns each run.

Screenshot

Local screenshot shows the truncated Fast/Accurate Se... row in the What Helped Most chart; happy to attach if useful.

Environment

  • Claude Code CLI, Opus 4.7 (1M ctx)
  • macOS Darwin 25.4.0
  • Date observed: 2026-04-25

extent analysis

TL;DR

Increase the width property in the .bar-label CSS rule to accommodate longer labels, such as setting it to 150px or using a dynamic sizing approach.

Guidance

  • Identify the maximum length of the labels in the charts to determine the required width.
  • Update the /insights report template to reflect the new width, either by hardcoding a larger value (e.g., 150px) or by implementing a dynamic sizing solution using CSS grid.
  • Verify the fix by running /insights and checking the rendered report.html for proper label display.
  • Consider using a more robust solution, such as auto-sizing columns via CSS grid, to ensure the column width adapts to the widest label in each chart.

Example

.bar-label {
  width: 150px; /* increased width to accommodate longer labels */
  font-size: 11px;
  color: #475569;
  flex-shrink: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

Notes

The suggested fix assumes that the maximum label length is approximately 22 characters. If longer labels are possible, the width may need to be adjusted accordingly.

Recommendation

Apply the workaround by updating the /insights report template to use a larger width (e.g., 150px) or a dynamic sizing approach, as this will provide a more robust solution to the issue.

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…
#prompt template#agent execution#callback error#memory management#API rate limit

Still need to ship something?

×6

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

Back to top recommendations

TRENDING