Skip to content

The body wears the terminal theme too (black bar under the keyboard) - #5

Merged
karngyan merged 1 commit into
mainfrom
worktree-keyboard-black-band
Aug 9, 2026
Merged

The body wears the terminal theme too (black bar under the keyboard)#5
karngyan merged 1 commit into
mainfrom
worktree-keyboard-black-band

Conversation

@karngyan

@karngyan karngyan commented Aug 8, 2026

Copy link
Copy Markdown
Contributor

The black bar under the session on a phone with the keyboard up is the
body, wearing the app's canvas colour instead of the terminal's.

c362cbd painted document.documentElement with the terminal background
for this exact band, but the canvas is not what the keyboard uncovers.
body is h-full of the layout viewport, and iOS shortens only the
visual viewport when the keyboard opens — so the body's box still spans
the whole screen, and its stylesheet background-color: var(--flue-canvas)
paints over the canvas across precisely the strip below the viewport-pinned
pane. Under prefers-color-scheme: dark that is zinc-950 (#09090b),
which iOS 26 shows around its keyboard slab and behind the form accessory
bar as a black bar. Only rubber-band overscroll past the body's box ever
reached the canvas the earlier fix repainted, which is why that fix looked
right and the bar stayed.

paintGround now takes both grounds, so the pane, the canvas and the body
cannot drift apart. Teardown keeps the restraint the canvas already had:
each ground is handed back only if it still holds what this effect painted,
because a replacement owner can paint before this one's cleanup runs.

Testing

  • Two new tests in terminal.test.tsx: the body follows the terminal
    background on mount and on a theme change, is handed back on unmount, and
    is not clawed back from a newer owner. Both fail on main.
  • npx vitest run — 603 passed (40 files), including styles.build.test.ts,
    the real vite build that guards the Tailwind prose scanner against the new
    comments.
  • npm run lint — clean.

Not verified on a physical phone; the mechanism is covered by the tests and
by CSS canvas-propagation semantics, but a look on the device that produced
the screenshot is the last mile.

🤖 Generated with Claude Code

Painting the document canvas with the terminal's background fixed the
band a phone keyboard reveals only in theory. The body's box is the full
height of the layout viewport, and a phone keyboard shortens only the
visual one, so the body's own stylesheet colour paints over the canvas
across exactly the strip the keyboard uncovers — zinc-950, which iOS 26
then shows around its keyboard slab and behind the form accessory bar as
a black bar under the session. Only overscroll past the body's box ever
reached the canvas the earlier fix claimed.

paintGround now takes both grounds, with the same ownership-checked
restore on unmount the canvas already had: a replacement owner can paint
before this one tears down, and a stale cleanup must surrender only what
it still owns.

Co-Authored-By: Claude Opus 5 (1M context) <noreply@anthropic.com>
@karngyan
karngyan merged commit bb72194 into main Aug 9, 2026
1 check passed
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.

1 participant