fix: black border around terminal on mobile (v0.4.7) - #181
Merged
Conversation
xterm.js 6.0 stopped painting .xterm-viewport with the theme background (5.5 set it inline on theme change; 6.0 themes the new scrollable-element node instead), so xterm.css's default #000 showed through agentboard's 8px .xterm padding — a black border around the terminal, most visible on mobile. Make the viewport transparent and paint the terminal container with the theme background so the padding ring always matches.
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
1 participant
Add this suggestion to a batch that can be applied as a single commit.This suggestion is invalid because no changes were made to the code.Suggestions cannot be applied while the pull request is closed.Suggestions cannot be applied while viewing a subset of changes.Only one suggestion per line can be applied in a batch.Add this suggestion to a batch that can be applied as a single commit.Applying suggestions on deleted lines is not supported.You must change the existing code in this line in order to create a valid suggestion.Outdated suggestions cannot be applied.This suggestion has been applied or marked resolved.Suggestions cannot be applied from pending reviews.Suggestions cannot be applied on multi-line comments.Suggestions cannot be applied while the pull request is queued to merge.Suggestion cannot be applied right now. Please check back later.
Fixes the black border around the terminal view introduced by the xterm.js 6.0 upgrade in #180, reported on mobile Safari immediately after v0.4.6.
Root cause
Agentboard gives
.xterman 8px padding ring. Through xterm.js 5.5, the library painted.xterm-viewport(which spans the full box, padding included) with the theme background via an inline style on every theme change, so the ring matched the terminal (#2d2d2d). xterm.js 6.0's viewport rework applies the theme background to its new scrollable-element node instead — leaving the viewport withxterm.css's defaultbackground-color: #000. Result: an 8px pure-black frame around the terminal content, most visible on mobile where the terminal fills the screen.Verified by DOM measurement under iPhone emulation:
.xterm-viewportcomputedrgb(0,0,0)spanning 390×713 while.xterm-screensat 8px inset painting the theme color.Fix
styles/index.css:.xterm .xterm-viewport { background-color: transparent !important }— let the container show through.Terminal.tsx: the terminal container div now carriesterminalTheme.background(reactive to theme switches), so the padding ring always matches the terminal content.After the fix, the same measurement shows the viewport transparent over a
rgb(45,45,45)container, and the mobile screenshot renders edge-to-edge theme background with no border.Notes
bun run lint && bun run typecheck && bun run testgreen.