Skip to content

[Bug] Right-panel Terminal: tab strip alignment + glyph rendering at narrow widths #65

@Astro-Han

Description

@Astro-Han

What happened?

Two polish regressions observed in the right-panel Terminal tab during smoke of #52 (reproduced at ~380px right-panel width):

  1. The Terminal tab strip (e.g. Terminal 1 + +) sits in its own h-10 row with variant="alt", while the outer side-panel tab row (Status / Files / Review / Terminal) is h-11 with variant="sidepanel". The two rows do not share a baseline, and the + icon-button vertical center does not align with the trigger label, so the whole Terminal chrome looks visually off.
  2. Terminal body text rendered via ghostty-web shows thick/fuzzy glyphs at narrow widths — subpixel antialiasing looks broken. Prompt lines like yuhan@host % read noticeably worse than the same content at 600px+.

Steps to reproduce

  1. Open PawWork desktop, create a session and open the right panel.
  2. Drag the right panel down to ~380px (the MIN_RIGHT_PANEL_WIDTH floor).
  3. Switch to the Terminal tab.
  4. Observe: the Terminal 1 tab and the + button don't align vertically, and terminal glyphs look fuzzy compared to wider widths.

What did you expect to happen?

  • Terminal tab strip should visually harmonize with the outer side-panel row: same height, baseline, and variant family.
  • Terminal body glyphs should render cleanly at narrow widths (may require upstream ghostty-web tweaks).

PawWork version

dev (worktree-feat-right-panel-polish, post 85c6bcba2)

OS version

macOS 15.x

Can you reproduce it again?

Yes, every time

Screenshots, recordings, or extra context

  • Code pointers:
    • packages/app/src/pages/session/terminal-panel.tsx:277<Tabs variant="alt"> with Tabs.List class="h-10 ...".
    • packages/app/src/pages/session/session-side-panel.tsx:243,249 — outer variant="sidepanel" with h-11.
    • packages/app/src/components/terminal.tsx:368fontSize: 14, container px-6 py-3.
  • Font rendering is likely upstream-bound (ghostty-web canvas/WebGL); document with upstream label if confirmed after investigation.
  • Follow-up from the smoke round of [Feature] Polish right panel tabs (Status, Review, Terminal) #52. Deferred out of that PR's scope because Terminal chrome needs live A/B iteration separate from the Review + Status redesign.

Suggested approach (not prescriptive)

  • Try variant="sidepanel" and h-11 on the Terminal Tabs.List to match the outer chrome, then eyeball filled-active state.
  • At right-panel width < 420px, try fontSize: 13 and compare glyph clarity; if still fuzzy, escalate to ghostty-web.

Metadata

Metadata

Assignees

No one assigned

    Labels

    P3Low prioritybugSomething isn't workinguiDesign system and user interface

    Projects

    No projects

    Milestone

    No milestone

    Relationships

    None yet

    Development

    No branches or pull requests

    Issue actions