[PR #12953] feat(tui): command dialog padding and vertical centering #14446

Open
opened 2026-02-16 18:19:14 -05:00 by yindo · 0 comments
Owner

Original Pull Request: https://github.com/anomalyco/opencode/pull/12953

State: open
Merged: No


Summary

Fixes #12948 - TUI dialog boxes have inconsistent horizontal padding and need vertical centering improvements

Changes

1. Fix Vertical Centering

  • File: packages/opencode/src/cli/cmd/tui/ui/dialog.tsx:29
  • Removed hardcoded paddingTop={dimensions().height / 4}
  • Added justifyContent="center" for true vertical centering
  • The outer container already uses alignItems="center" for horizontal centering, so this completes the flexbox centering

2. Standardize Horizontal Padding (3 files)

Updated paddingLeft={2} paddingRight={2} to paddingLeft={4} paddingRight={4} to match the base DialogSelect component:

  • packages/opencode/src/cli/cmd/tui/component/dialog-status.tsx:43
  • packages/opencode/src/cli/cmd/tui/ui/dialog-help.tsx:19
  • packages/opencode/src/cli/cmd/tui/component/dialog-provider.tsx:137

Impact

  • All dialog boxes will be truly vertically centered in the viewport
  • Consistent horizontal padding (4 units) across all dialogs
  • Visual alignment and professional appearance

Testing

Typecheck passed for the opencode package. Manual testing recommended to verify dialog rendering.

Photos Before (left) and After (right) ### `/agents`: image

/models:

image

/mcps:

image

/connect:

image

/status:

image

/themes:

image

/sessions:

image

/help:

image
**Original Pull Request:** https://github.com/anomalyco/opencode/pull/12953 **State:** open **Merged:** No --- ### Summary Fixes #12948 - TUI dialog boxes have inconsistent horizontal padding and need vertical centering improvements ### Changes ### 1. Fix Vertical Centering - **File:** `packages/opencode/src/cli/cmd/tui/ui/dialog.tsx:29` - Removed hardcoded `paddingTop={dimensions().height / 4}` - Added `justifyContent="center"` for true vertical centering - The outer container already uses `alignItems="center"` for horizontal centering, so this completes the flexbox centering ### 2. Standardize Horizontal Padding (3 files) Updated `paddingLeft={2} paddingRight={2}` to `paddingLeft={4} paddingRight={4}` to match the base `DialogSelect` component: - `packages/opencode/src/cli/cmd/tui/component/dialog-status.tsx:43` - `packages/opencode/src/cli/cmd/tui/ui/dialog-help.tsx:19` - `packages/opencode/src/cli/cmd/tui/component/dialog-provider.tsx:137` ### Impact - All dialog boxes will be truly vertically centered in the viewport - Consistent horizontal padding (4 units) across all dialogs - Visual alignment and professional appearance ### Testing Typecheck passed for the opencode package. Manual testing recommended to verify dialog rendering. <details> <summary>Photos Before (left) and After (right)</summary> ### `/agents`: <img width="960" height="520" alt="image" src="https://github.com/user-attachments/assets/62b574ef-6977-4b53-83ef-c4468760f99a" /> ### `/models`: <img width="960" height="520" alt="image" src="https://github.com/user-attachments/assets/f786a513-3852-4564-9e16-0034f65705e5" /> ### `/mcps`: <img width="960" height="520" alt="image" src="https://github.com/user-attachments/assets/526946d9-32ea-4a4c-ab7a-36311b0fa332" /> ### `/connect`: <img width="960" height="520" alt="image" src="https://github.com/user-attachments/assets/38fda97f-43b7-49b1-8e0a-072a6882e607" /> ### `/status`: <img width="960" height="520" alt="image" src="https://github.com/user-attachments/assets/d212ccc9-68a6-4dcb-bedb-f7d191368bd2" /> ### `/themes`: <img width="960" height="520" alt="image" src="https://github.com/user-attachments/assets/278b618d-519e-4972-99f2-1f1e1fe1bda6" /> ### `/sessions`: <img width="960" height="520" alt="image" src="https://github.com/user-attachments/assets/8d5593ed-9012-4e31-af5b-07128a112252" /> ### `/help`: <img width="960" height="520" alt="image" src="https://github.com/user-attachments/assets/8d760bc7-7195-43e9-8a31-9ac79aa494c1" /> </details>
yindo added the pull-request label 2026-02-16 18:19:14 -05:00
Sign in to join this conversation.
1 Participants
Notifications
Due Date
No due date set.
Dependencies

No dependencies set.

Reference: anomalyco/opencode#14446