Skip to content

TerminalPaneHeader: keep minimize/close visible as the header narrows#148

Merged
nedtwigg merged 1 commit into
mainfrom
x-positioning
Jun 18, 2026
Merged

TerminalPaneHeader: keep minimize/close visible as the header narrows#148
nedtwigg merged 1 commit into
mainfrom
x-positioning

Conversation

@nedtwigg

Copy link
Copy Markdown
Member

What

Make the minimize and close controls the highest-priority elements of the terminal pane header, so they stay visible no matter how narrow the header gets.

The problem

The header is a flex row: [title + bell + todo (flex-1)] [mouse icon] [split/zoom] [minimize + close]. Two things meant the controls were not actually the last to go when space ran out:

  1. The leading title/bell region had min-w-0 but no overflow-hidden, so the fixed-width bell could overflow and overlap the controls.
  2. The mouse-override icon was a fixed shrink-0 sibling sitting to the left of minimize/close. Because a flex row clips from its right edge, the rightmost group (minimize/close) was the first to be pushed off — backwards from the requirement.

The fix (lib/src/components/wall/TerminalPaneHeader.tsx)

  • Add overflow-hidden to the leading title/bell region so it clips cleanly instead of overflowing onto the controls.
  • Hide the mouse-override icon at the minimal tier, consistent with how split/zoom drop below the full tier and the TODO pill drops at minimal.

Net effect: every other element yields before the controls, which now stay fully visible down to the physical floor (~65px — just the two buttons + padding).

Stories (lib/src/stories/TerminalPaneHeader.stories.tsx)

Added a self-verifying assertControlsVisible play function that reads live layout geometry and throws (surfacing in Storybook's Interactions panel) if either control is missing, zero-size, or clipped outside the header bounds. It polls until the primed state + ResizeObserver-driven tier settle, rather than using a fixed delay. Four new stories exercise it:

  • NarrowControlsVisible (110px)
  • ExtremelyNarrowControlsVisible (76px, alert ringing + todo)
  • NarrowWithMouseCaptureControlsVisible (120px, simulated TUI mouse capture)
  • NarrowLongTitleControlsVisible (130px, very long title + alert ringing)

A mouseCaptured story arg was added to surface the mouse-override icon.

Testing

  • tsc -b passes.
  • All 620 existing lib unit tests pass.
  • Story assertions verify behavior in the real Storybook browser (pnpm --filter dormouse-lib storybook).

🤖 Generated with Claude Code

Make the minimize and close controls the highest-priority elements of the
terminal pane header so they stay visible no matter how narrow it gets.

- Add `overflow-hidden` to the leading title/bell region so it clips cleanly
  instead of overflowing onto the controls.
- Hide the mouse-override icon at the `minimal` tier, matching how split/zoom
  drop below `full` and the TODO pill drops at `minimal`.

Add Storybook stories that confirm the invariant with a self-checking play
function (`assertControlsVisible`) that reads live layout geometry and throws
if either control is missing, zero-size, or clipped outside the header bounds.

Co-Authored-By: Claude Opus 4.8 (1M context) <noreply@anthropic.com>
@cloudflare-workers-and-pages

Copy link
Copy Markdown

Deploying mouseterm with  Cloudflare Pages  Cloudflare Pages

Latest commit: 95d99bc
Status: ✅  Deploy successful!
Preview URL: https://39b0f269.mouseterm.pages.dev
Branch Preview URL: https://x-positioning.mouseterm.pages.dev

View logs

@nedtwigg nedtwigg merged commit 960112f into main Jun 18, 2026
9 checks passed
@nedtwigg nedtwigg deleted the x-positioning branch June 18, 2026 18:33
dormouse-bot added a commit that referenced this pull request Jun 19, 2026
…ment list and tiers

The pane-header spec omitted the mouse-reporting override icon from both
the element list and the responsive-tier breakdown. #148 made its tier
behavior concrete (hidden at the minimal tier) without updating the spec.

Co-Authored-By: Claude Opus 4.8 <noreply@anthropic.com>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

None yet

Projects

None yet

Development

Successfully merging this pull request may close these issues.

2 participants