anomalyco/opencode
1
0
Fork 0
mirror of https://github.com/anomalyco/opencode.git synced 2026-07-23 10:45:33 -04:00
Code Issues 5.9k Packages Projects Releases 19 Wiki Activity

[PR #13434] feat(app): enhance dialog settings with responsive tabs and improved … #14667

New Issue
Open
opened 2026-02-16 18:19:26 -05:00 by yindo · 0 comments
yindo commented 2026-02-16 18:19:26 -05:00
Owner
Copy Link
Copy Source

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

State: open
Merged: No

IMG_0696 IMG_0697 IMG_0698 IMG_0699

What does this PR do?

Settings dialog used one layout for all viewports; small screens didn’t use space well and section grouping wasn’t clear.

Changes:

  • Responsive tabs: Desktop (≥640px) uses vertical sidebar with section titles (Desktop / Server); narrow viewports use horizontal top bar with section titles hidden.
  • New settings variant in UI: In packages/ui tabs.css, added data-variant="settings" styles for both horizontal (compact pills) and vertical (fixed-width sidebar, section titles).
  • dialog-settings.tsx: Uses createMediaQuery("(min-width: 640px)") to set Tabs orientation to "vertical" or "horizontal" and variant="settings". Footer (app name + version) unchanged.

Same content and component in both layouts; only orientation and variant change by viewport, so behavior stays consistent.

How did you verify your code works?

  • Opened settings on desktop: vertical sidebar, sections and tabs work.
  • Narrow viewport (<640px): horizontal tab bar, section titles hidden, all tabs and content work.
  • Checked version footer in both layouts.
**Original Pull Request:** https://github.com/anomalyco/opencode/pull/13434 **State:** open **Merged:** No --- <img width="590" height="1278" alt="IMG_0696" src="https://github.com/user-attachments/assets/b0f69eca-d38f-4df5-a558-7608b73e15e4" /> <img width="590" height="1278" alt="IMG_0697" src="https://github.com/user-attachments/assets/4997a6a6-cae6-4a0e-bd07-6fe6e7d3f738" /> <img width="590" height="1278" alt="IMG_0698" src="https://github.com/user-attachments/assets/827c07a2-6e76-4197-b0f4-2958fe2e96d4" /> <img width="590" height="1278" alt="IMG_0699" src="https://github.com/user-attachments/assets/b3511a5c-0d6a-4d18-a2bd-50dd8647b54e" /> ### What does this PR do? Settings dialog used one layout for all viewports; small screens didn’t use space well and section grouping wasn’t clear. **Changes:** - **Responsive tabs:** Desktop (≥640px) uses vertical sidebar with section titles (Desktop / Server); narrow viewports use horizontal top bar with section titles hidden. - **New `settings` variant in UI:** In `packages/ui` `tabs.css`, added `data-variant="settings"` styles for both horizontal (compact pills) and vertical (fixed-width sidebar, section titles). - **dialog-settings.tsx:** Uses `createMediaQuery("(min-width: 640px)")` to set `Tabs` `orientation` to `"vertical"` or `"horizontal"` and `variant="settings"`. Footer (app name + version) unchanged. Same content and component in both layouts; only orientation and variant change by viewport, so behavior stays consistent. ### How did you verify your code works? - Opened settings on desktop: vertical sidebar, sections and tabs work. - Narrow viewport (<640px): horizontal tab bar, section titles hidden, all tabs and content work. - Checked version footer in both layouts.
yindo added the pull-request label 2026-02-16 18:19:26 -05:00
Sign in to join this conversation.
No Branch/Tag Specified
Branches Tags
Labels
Clear labels
acp
bad
bug
discussion
docs
documentation
enhancement
extension
good first issue
growth
help-wanted
mcp
model-problem
needs:compliance
nix
opentui
perf
pull-request
Mirrored from GitHub Pull Request
 tui
web
windows
zen
No Label pull-request
Milestone
No items
No Milestone
Projects
Clear projects
No project
Assignees
Clear assignees
yindo
No Assignees
1 Participants
Notifications
Due Date
No due date set.
Dependencies

No dependencies set.

Reference: anomalyco/opencode#14667
Delete Branch "%!s()"

Deleting a branch is permanent. Although the deleted branch may continue to exist for a short time before it actually gets removed, it CANNOT be undone in most cases. Continue?