claude-code - 💡(How to fix) Fix `/insights` HTML report truncates bar-chart category labels

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…

The HTML report generated by /insights clips longer category labels in its bar charts (e.g. "WHAT YOU WANTED", "SESSION TYPES"). Labels are cut off with an ellipsis even when there is ample horizontal room in the report, making the affected rows unreadable.

Root Cause

The report's inline CSS gives the label column a fixed width that is too narrow for many of the category names the report itself generates:

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

With width: 100px + text-overflow: ellipsis, any label longer than ~14 characters at 11px is truncated. Several of the categories the report emits exceed that.

Fix Action

Workaround

Post-processing the generated report*.html to rewrite .bar-label { width: 100px;150px; fully resolves the truncation client-side.

Code Example

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

/insights HTML report truncates bar-chart category labels

Summary

The HTML report generated by /insights clips longer category labels in its bar charts (e.g. "WHAT YOU WANTED", "SESSION TYPES"). Labels are cut off with an ellipsis even when there is ample horizontal room in the report, making the affected rows unreadable.

Affected labels (examples from a real report)

  • Conceptual Explanation → shown as Conceptual Expl...
  • Information Lookup → shown as Information Look...
  • Iterative Refinement → shown as Iterative Refinem...

Root cause

The report's inline CSS gives the label column a fixed width that is too narrow for many of the category names the report itself generates:

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

With width: 100px + text-overflow: ellipsis, any label longer than ~14 characters at 11px is truncated. Several of the categories the report emits exceed that.

Suggested fixes (any one of these)

  1. Increase the fixed width (e.g. width: 150px) — simplest, preserves bar alignment.
  2. Use min-width instead of a hard width so the column can grow to fit content.
  3. Add a title attribute to each .bar-label so the full text is available on hover even if visually truncated.

Option 1 alone resolves all observed truncation while keeping the bars aligned within the 800px container's two-column layout.

Environment

  • OS: Windows 11
  • Claude Code: native installer (claude.exe)
  • Report path: ~/.claude/usage-data/report-*.html

Workaround

Post-processing the generated report*.html to rewrite .bar-label { width: 100px;150px; fully resolves the truncation client-side.

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…

Still need to ship something?

×6

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

Back to top recommendations

TRENDING

claude-code - 💡(How to fix) Fix `/insights` HTML report truncates bar-chart category labels