fix(web): remove the terminal pane's app-canvas gutter

[jakeleventhal]

Demo

Problem

In a theme whose terminal surface differs from the app canvas, the terminal pane is framed by a light seam:

• TerminalViewport's mount was wrapped in a p-1 div, so 4px of --background showed on all four sides of the pane.
• The mount itself was rounded-[4px] bg-background under overflow-hidden, so the clipped corners exposed the canvas color as four nubs.
• The gap-1.5 gutter before the terminal tab sidebar showed the same canvas color.

Stock light and dark themes hide this because they define --terminal-background: var(--background). It only surfaces on themes that set the two independently — e.g. an imported VS Code light theme with terminal.background: #f6f8fa over editor.background: #ffffff.

Why the gutter is not needed

The terminal already has breathing room, inside the canvas and in the terminal's own color:

• apps/web/src/terminal/ghostty/surface.ts insets the grid by CONTENT_PADDING (4px).
• apps/web/src/terminal/ghostty/renderer.ts fills the entire canvas with the terminal background on every full repaint.

The DOM p-1 was a second 4px inset stacked on top of that one, in the app canvas color — the only one that could ever read as a frame.

Change

• Drop p-1 from both the split and single-terminal wrappers.
• Drop rounded-[4px] and paint the mount with --terminal-background, so a sub-cell sliver at the right or bottom edge (the grid rounds down to whole cells) matches the terminal rather than the canvas.
• Paint the terminal row with --terminal-background so the sidebar gutter matches too.

Validation

Reproduced with an imported VS Code light theme (terminal.background: #f6f8fa, editor.background: #ffffff), driving the real app in a browser and measuring the mount rect against the drawer rect:

	drawer rect	canvas rect
before	256, 720, 1344×280	260, 725, 1336×271 — inset 4px on every side
after	256, 720, 1344×280	256, 721, 1344×279 — flush; the 1px top is the drawer's border-t

Pixel samples at the pane's bottom-left corner: #ffffff across the 4px band before, #f6f8fa throughout after. Sidebar gutter: #ffffff before, #f6f8fa after.

Checked in the app across single-terminal, split view with the tab sidebar, built-in light, and built-in dark — every pane edge samples to a single uniform color, with no contrasting frame.

@t3tools/web typecheck clean; 2199 tests pass.

🤖 Generated with Claude Code

---

Note

Low Risk
Pure CSS/layout tweak in the terminal drawer UI with no logic, auth, or data-handling changes.

Overview
Removes the app-canvas gutter around the terminal pane so themes with a distinct --terminal-background no longer show a light frame.

Drops the p-1 wrappers around TerminalViewport (single and split) and paints the mount/flex container with --terminal-background instead of bg-background + rounded-[4px]. The terminal already insets content via CONTENT_PADDING, so the DOM padding was a redundant second inset in the wrong color.

^{Reviewed by Cursor Bugbot for commit b2d4ab2. Bugbot is set up for automated code reviews on this repo. Configure here.}

Note

[!NOTE]

Remove gutter padding and rounded corners from the terminal pane

Removes p-1 padding from the inner terminal containers in ThreadTerminalDrawer and drops the rounded-[4px] class from TerminalViewport, eliminating the visible gutter around the terminal canvas. Both components now use bg-[var(--terminal-background)] for consistent background coloring.

^{Macroscope summarized 33573c2.}

[coderabbitai]

Important

Review skipped

Auto reviews are disabled on this repository. Please check the settings in the CodeRabbit UI or the .coderabbit.yaml file in this repository. To trigger a single review, invoke the @coderabbitai review command.

⚙️ Run configuration

Configuration used: Repository UI

Review profile: CHILL

Plan: Pro Plus

Run ID: 00656d5c-5436-46bd-b468-a51bd5234a09

You can disable this status message by setting the reviews.review_status to false in the CodeRabbit configuration file.

Use the checkbox below for a quick retry:

• 🔍 Trigger review

---

Thanks for using CodeRabbit! It's free for OSS, and your support helps us grow. If you like it, consider giving us a shout-out.

❤️ Share

• X
• Mastodon
• Reddit
• LinkedIn

_{Comment @coderabbitai help to get the list of available commands.}

[macroscopeapp]

Approvability

Verdict: Approved b2d4ab2

CSS-only changes removing padding classes and updating background color references. No logic or runtime behavior changes beyond visual appearance - classic minor UI adjustment.

^{You can customize Macroscope's approvability policy. Learn more.}