claude-code - 💡(How to fix) Fix /config → Usage submenu has three layout glitches (missing bar, broken wrap indent, excess whitespace)

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 /config → Usage submenu has three distinct rendering issues visible at the same time. All three are reproducible on every open of the submenu, at a regular terminal window width — not a narrow-window overflow.

Root Cause

The /config → Usage submenu has three distinct rendering issues visible at the same time. All three are reproducible on every open of the submenu, at a regular terminal window width — not a narrow-window overflow.

RAW_BUFFERClick to expand / collapse

Summary

The /config → Usage submenu has three distinct rendering issues visible at the same time. All three are reproducible on every open of the submenu, at a regular terminal window width — not a narrow-window overflow.

Environment

  • Claude Code version: 2.1.114
  • OS: macOS 26.4.1 (Apple Silicon, arm64)
  • Terminal emulator: iTerm2 3.6.9
  • Shell: zsh 5.9
  • Font: default iTerm2 monospace, ligatures off
  • \$TERM: xterm-256color
  • Terminal width: ~180 columns (full-screen iTerm2 window on a 16" display)
  • tmux/screen: none

Steps to reproduce

  1. Open Claude Code in a regular interactive session.
  2. Run /config.
  3. Select the Usage tab.

Expected behavior

  • Every weekly-usage block ("all models", "Sonnet only", …) shows a progress bar and a percentage, even when usage is 0%.
  • Indented bullet descriptions preserve their hanging indent when wrapping to a second line.
  • Vertical spacing between blocks is consistent.

Actual behavior

Three separate glitches are visible simultaneously (see screenshot):

1. Missing progress bar / percentage in "Current week (Sonnet only)"

The "all models" block correctly shows <bar> 17% used on the same line as Resets Apr 23 at 11pm. The "Sonnet only" block shows only the reset date — no bar, no percentage rendered. My guess is a conditional branch that silently returns when the computed percentage is 0%, instead of rendering 0% used or suppressing the whole block.

2. Wrap continuation loses indent under "Last 24h" bullets

Each bullet is formatted like:

83% of your usage was at >150k context
 Longer sessions are more expensive even when cached. /compact mid-task, /clear
when switching to new tasks.

The sub-description starts with a leading space (one-char indent), but when the line wraps the continuation snaps back to column 0, breaking visual hierarchy. Looks like character-based indentation in a <Text> node; should be an Ink <Box marginLeft> so wrap-continuations keep the same left edge.

3. Inconsistent vertical whitespace

Unusually large empty gaps appear between "Current week (Sonnet only)" and the "Approximate, based on local sessions…" disclaimer, and between that disclaimer and "Last 24h". Other sections have single-line spacing. Looks like <Box marginY> still rendering around empty/zero-state children.

Screenshot

(attached below)

Notes

  • Reproducible at all widths tested (80, 120, 180 columns) — not a narrow-window overflow like #14617.
  • Does not depend on tmux (reproduced outside tmux).
  • Web dashboard at claude.ai/settings/billing renders the same data correctly.

extent analysis

TL;DR

The most likely fix involves adjusting the rendering logic for progress bars, indentation, and vertical spacing in the /config → Usage submenu.

Guidance

  • Review the conditional branch for rendering progress bars and percentages to ensure it handles 0% usage cases correctly.
  • Replace character-based indentation with an Ink <Box marginLeft> to maintain visual hierarchy in wrapped bullet descriptions.
  • Inspect the <Box marginY> component to prevent unnecessary whitespace around empty or zero-state children.

Example

No code snippet is provided due to the lack of explicit code in the issue description.

Notes

The issue seems to be related to the rendering of specific UI components in the Claude Code application. The provided information suggests that the problems are not dependent on the terminal width or the presence of tmux.

Recommendation

Apply a workaround by adjusting the rendering logic for the affected components, as the root cause appears to be related to the application's UI rendering rather than a version-specific 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…

FAQ

Expected behavior

  • Every weekly-usage block ("all models", "Sonnet only", …) shows a progress bar and a percentage, even when usage is 0%.
  • Indented bullet descriptions preserve their hanging indent when wrapping to a second line.
  • Vertical spacing between blocks is consistent.

Still need to ship something?

×6

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

Back to top recommendations

TRENDING