Footer layout: auto-compact notification bar squeezes left column to ~15 chars on narrow terminals

Description

The footer notification bar (right column) uses flexShrink: 0 and renders the auto-compact status as a single ~95-character line, squeezing the left column (statusline + keyboard hints) to ~15 characters on terminals ≤120 columns wide.

The notification text rendered as a single line:

Context left until auto-compact: 9% · /model opus[1m] for more context · Billed as extra usage

This is ~95 characters. On a 110-column terminal:

• Right column (flexShrink: 0): takes full ~95 chars
• Left column (flexShrink: 1): gets ~15 chars remaining
• Result: keyboard hints like bypass permissions · esc to cancel truncated to bypass perm...
• Custom statusline output wraps or gets cut off entirely

This occurs even without any custom statusline — the built-in keyboard hint alone gets truncated.

Root Cause

Footer layout in the JXz component (cli.js v2.1.50):

// Root row
<Box
  flexDirection={isNarrow ? "column" : "row"}
  justifyContent="space-between"
  paddingX={2}
  gap={isNarrow ? 0 : 1}
>
  {/* Left column: statusline + keyboard hint */}
  <Box flexDirection="column" flexShrink={isNarrow ? 0 : 1}>
    {statusLine}
    {keyboardHint}
  </Box>

  {/* Right column: notifications — never shrinks */}
  <Box flexShrink={0} gap={1}>
    {notifications}
  </Box>
</Box>

The Ffq component renders the auto-compact notification as a single <Text wrap="truncate"> with all segments concatenated via ·:

Context left until auto-compact: ${percentLeft}% · ${tip} · ${billingInfo}

The right column is allowed to grow to its full content width while the left column absorbs all the squeeze — there is no minimum width guarantee for the left column.

Reproduction

1. Open Claude Code in a terminal ≤120 columns wide (e.g., 110 columns)
2. Work until the auto-compact notification appears in the footer
3. Observe the keyboard hints in the lower-left are truncated

Impact

• Keyboard hints (bypass permissions, esc to cancel, etc.) are cut off, reducing discoverability
• Custom statusline output (CLAUDE.md / hooks) wraps or disappears
• The notification text itself is already truncated by wrap="truncate", so there is no visual gain from keeping it on one line

Suggested Fixes

Any one of the following would resolve the issue:

Option A — Split notification into multiple lines (preferred)

Split the ·-separated segments into separate <Text> elements stacked vertically. Max line width drops from ~95 to ~37 chars:

Context left until auto-compact: 9%
/model opus[1m] for more context
Billed as extra usage

Option B — Allow right column to shrink

Change flexShrink={0} to flexShrink={1} on the right column. The existing <Text wrap="truncate"> inside would clip the notification text to available space, preserving left-column content.

Option C — Cap right column width

<Box flexShrink={0} gap={1} maxWidth="50%">

This ensures the left column always retains at least 50% of terminal width regardless of notification length.

Environment

| Field | Value |
|---|---|
| Claude Code version | 2.1.50 |
| Terminal | Windows Terminal |
| Terminal width | 110 columns |
| OS | Windows 11 |

The issue affects any terminal where the notification text exceeds ~50% of available width, which is most terminals below 200 columns when the auto-compact bar is active.