#18490 · @brandon-julio-t · opened Mar 21, 2026 at 3:57 AM UTC · last updated Mar 21, 2026 at 3:57 AM UTC

fix(tui): no padding top so that scrollbox and scrollbar are perfectly aligned with right sidebar

tuifix
56
+111 files

Score breakdown

Impact

2.0

Clarity

9.0

Urgency

1.0

Ease Of Review

8.0

Guidelines

6.0

Readiness

9.0

Size

10.0

Trust

6.0

Traction

0.0

Summary

This PR removes a 1-pixel top padding in the TUI to fix a minor visual misalignment of the scrollbox and scrollbar with the right sidebar. It addresses a purely aesthetic concern with no functional impact.

Open in GitHub

Description

Issue for this PR

Closes #18488

Type of change

  • [x] Bug fix
  • [ ] New feature
  • [ ] Refactor / code improvement
  • [ ] Documentation

What does this PR do?

Just removal of paddingTop={1} so that scrollbox and scrollbar are perfectly aligned with right sidebar. I left paddingBottom={1} because that aligned the OpenCode <version> text with hotkey helpers like ctrl+t etc.

How did you verify your code works?

I ran it and my OCD is gone.

Screenshots / recordings

Before

<img width="1302" height="597" alt="Image" src="https://github.com/user-attachments/assets/1cdaf3c0-e911-4150-b4cc-a26571b48a56" />

After

<img width="1092" height="601" alt="Image" src="https://github.com/user-attachments/assets/d4b544cd-d6be-43e1-b51d-81b50bc1f6b5" />

https://github.com/user-attachments/assets/2adc6a03-be47-476b-b4ee-44b22a52d40e

Checklist

  • [x] I have tested my changes locally
  • [x] I have not included unrelated changes in this PR

If you do not follow this template your PR will be automatically rejected.

Linked Issues

#18488 TUI: top of scrollbox and scrollbar are not perfectly aligned with right sidebar (OCD warning)

View issue

Comments

No comments.

Changed Files

packages/opencode/src/cli/cmd/tui/routes/session/index.tsx

+11
@@ -1046,7 +1046,7 @@ export function Session() {
}}
>
<box flexDirection="row">
<box flexGrow={1} paddingBottom={1} paddingTop={1} paddingLeft={2} paddingRight={2} gap={1}>
<box flexGrow={1} paddingBottom={1} paddingLeft={2} paddingRight={2} gap={1}>
<Show when={session()}>
<Show when={showHeader() && (!sidebarVisible() || !wide())}>
<Header />