Skip to content

fix: fill terminal canvas gap with measured padding#24

Merged
jesse23 merged 4 commits intomainfrom
jesse_dnd
Mar 31, 2026
Merged

fix: fill terminal canvas gap with measured padding#24
jesse23 merged 4 commits intomainfrom
jesse_dnd

Conversation

@jesse23
Copy link
Copy Markdown
Owner

@jesse23 jesse23 commented Mar 31, 2026

Summary

  • Fixes a permanent ~22px black bar on the right and bottom edges of the terminal
  • Documents the file drag-and-drop path investigation as a rejected ADR

Fix: terminal canvas gap (ADR 022)

ghostty-web's `FitAddon` computes terminal columns as:

```
cols = floor((containerWidth - 15px scrollbar reserve) / charWidth)
```

Two factors leave the canvas short of the container edge every time:

  1. Hardcoded 15px scrollbar reserve — `FitAddon` unconditionally subtracts 15px even when `overflow: hidden` means no scrollbar ever appears
  2. Floor rounding — `Math.floor` discards the sub-cell remainder

The fix wraps `fitAddon.fit()` to measure the actual rendered canvas width after fitting, then distributes the gap as equal padding on each side — no CSS stretching, no blurriness. Also sets `container.background` from the theme config so any pre-render flash matches the terminal colour.

Upstream fix documented in ADR 022: add `IFitAddonOptions { scrollbarWidth?: number }` to ghostty-web's `FitAddon` constructor (no option exists today).

Docs: file DnD path analysis (ADR 021)

Records the full investigation into browser file drag-and-drop path injection — all five approaches evaluated, why none was adopted cross-platform, and reference to how code-server handles the same problem.

@jesse23 jesse23 changed the title docs: ADR 021 — file drag-and-drop path injection (rejected) fix: fill terminal canvas gap with measured padding Mar 31, 2026
@jesse23 jesse23 requested a review from Copilot March 31, 2026 18:24
Copy link
Copy Markdown

Copilot AI left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Pull request overview

This PR addresses a persistent visual gap between the terminal container and the rendered Ghostty canvas by fitting the terminal and then distributing any remaining space as measured padding, and it adds ADR documentation for both the canvas-gap fix and a rejected file drag-and-drop path investigation.

Changes:

  • Wraps FitAddon.fit() with a fit() helper that measures the actual canvas size and applies symmetric padding to eliminate the visible right/bottom gaps.
  • Sets the terminal container background from the configured theme to avoid a mismatched pre-render flash.
  • Adds ADR 022 (accepted) documenting the canvas-gap cause/workaround and ADR 021 (rejected) documenting the file DnD path constraints; adds an hn.md draft.

Reviewed changes

Copilot reviewed 4 out of 4 changed files in this pull request and generated 2 comments.

File Description
src/client/index.ts Replaces direct FitAddon resize handling with a measured-padding fit() wrapper and container ResizeObserver; sets container background from theme.
docs/hn.md Adds a Show HN draft writeup.
docs/adrs/022.client.canvas-fill.md Documents the root cause and the chosen workaround for the canvas gap, plus a proposed upstream fix.
docs/adrs/021.client.file-drop.md Documents investigation and rejection rationale for file drag-and-drop path injection.

💡 Add Copilot custom instructions for smarter, more guided reviews. Learn how to get started.

@jesse23 jesse23 merged commit 34ddb0f into main Mar 31, 2026
3 checks passed
@jesse23 jesse23 deleted the jesse_dnd branch March 31, 2026 18:40
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