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

[PR #7988] fix(ui): improve sidebar accessibility and responsiveness on zoom and small screens #12584

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

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

State: open
Merged: No

What does this PR do?

Since I have a friend with a visual disability i find it very important to be able to scale a UI properly, so I tried to find some easy wins to get OC better usable.

Summary

This PR addresses accessibility and responsiveness issues for small screens and zoomed layouts, directly supporting issue #3547 (small screen compatibility).

BEFORE:

Screenshot 2026-01-12 at 12 53 05 trying to scale the ui down: Screenshot 2026-01-12 at 12 53 44

AFTER:

image

Changes Made

1. Sidebar Zoom Accessibility (packages/app/src/pages/layout.tsx)

  • Removed xl:block breakpoint that hid sidebar on zoom (150%+)
  • Added responsive width using min(280px, 25vw) function
  • Sidebar now visible at all zoom levels and screen sizes

2. Sidebar Text Truncation & Overlay (packages/app/src/pages/layout.tsx)

  • Session titles now truncate with ellipsis instead of wrapping
  • Added tooltip showing full title on hover for truncated text
  • Action buttons (archive) now overlay text area on hover
  • Fixed text container with min-w-0 for proper truncation
  • Reduced gap between text and status indicators
  • Project names also truncate with tooltip when expanded
  • Maintains visual hierarchy while improving usability

3. Main Stage Scaling (packages/app/src/pages/home.tsx)

  • Replaced fixed 220px margin with responsive mt-8 md:mt-12
  • Logo now scales properly: w-full at 100% zoom, md:w-xl on larger screens
  • Added max-w-lg container constraint to prevent overflow

4. Sidebar Mark Logo (packages/ui/src/components/logo.css)

  • Made responsive with width: 100% and max-width: 16px
  • Prevents oversized appearance when zoomed

5. Efficient Spacing

  • Reduced project list margin: 80px → 32-48px (40% reduction)
  • Reduced list gap: 16px → 12px (25% reduction)
  • Better space utilization for small viewport heights

6. Sidebar Titles

Removed text truncation from sidebar project and session titles. Long names now wrap properly using instead of being cut off with ellipsis. This improves readability for long project/session names in narrow sidebars.

Issue Connection

This PR directly addresses #3547 (Small screen compatibility):

  • ✅ User input visibility: Reduced excessive vertical spacing so input fields remain visible
  • ✅ Chat output visibility: More compact layout preserves screen real estate
  • ✅ Sidebar title readability: Long project and session names truncate with tooltip
  • ✅ Action button usability: Buttons overlay text on hover for better access
  • ✅ Graceful collapse: Responsive margins and gaps adapt to limited viewport heights
  • ✅ Small height priority: Optimized for scenarios like VSCode terminal (10 lines)

Technical Details

  • WCAG Compliance: Fixed critical accessibility violations where UI elements disappeared on zoom
  • Text Truncation: Session and project titles use truncate with min-w-0 for proper ellipsis
  • Hover Tooltips: Full titles shown on hover for truncated text
  • Overlay Buttons: Archive and action buttons overlay text area on hover for better UX
  • Responsive Design: Replaced fixed pixel/REM values with Tailwind responsive classes
  • Viewport Units: Used min() function and viewport percentage constraints for zoom-friendly layouts
  • Backward Compatible: Maintains mobile sidebar functionality while fixing desktop zoom issues

Testing

  • Build passes: ✅
  • TypeScript checks: ✅
  • Responsive behavior verified at 100%, 125%, 150%, 175%, 200% zoom levels
  • Text truncation verified with long project and session names
  • Hover tooltips confirmed working for truncated text
  • Action button overlay verified on hover

Related

  • Closes #3547 (Small screen compatibility)
**Original Pull Request:** https://github.com/anomalyco/opencode/pull/7988 **State:** open **Merged:** No --- # What does this PR do? Since I have a friend with a visual disability i find it very important to be able to scale a UI properly, so I tried to find some easy wins to get OC better usable. ## Summary This PR addresses accessibility and responsiveness issues for small screens and zoomed layouts, directly supporting issue #3547 (small screen compatibility). BEFORE: <img width="598" height="553" alt="Screenshot 2026-01-12 at 12 53 05" src="https://github.com/user-attachments/assets/75259e91-67eb-4b98-897d-3de274affa06" /> trying to scale the ui down: <img width="601" height="555" alt="Screenshot 2026-01-12 at 12 53 44" src="https://github.com/user-attachments/assets/e3dd6392-3a1e-4878-820c-4099e46b0cf8" /> AFTER: <img width="1190" height="920" alt="image" src="https://github.com/user-attachments/assets/cfd54ffd-88d2-4cc1-9a69-80e729359512" /> ### Changes Made #### 1. Sidebar Zoom Accessibility (`packages/app/src/pages/layout.tsx`) - Removed `xl:block` breakpoint that hid sidebar on zoom (150%+) - Added responsive width using `min(280px, 25vw)` function - Sidebar now visible at all zoom levels and screen sizes #### 2. Sidebar Text Truncation & Overlay (`packages/app/src/pages/layout.tsx`) - Session titles now truncate with ellipsis instead of wrapping - Added tooltip showing full title on hover for truncated text - Action buttons (archive) now overlay text area on hover - Fixed text container with `min-w-0` for proper truncation - Reduced gap between text and status indicators - Project names also truncate with tooltip when expanded - Maintains visual hierarchy while improving usability #### 3. Main Stage Scaling (`packages/app/src/pages/home.tsx`) - Replaced fixed 220px margin with responsive `mt-8 md:mt-12` - Logo now scales properly: `w-full` at 100% zoom, `md:w-xl` on larger screens - Added `max-w-lg` container constraint to prevent overflow #### 4. Sidebar Mark Logo (`packages/ui/src/components/logo.css`) - Made responsive with `width: 100%` and `max-width: 16px` - Prevents oversized appearance when zoomed #### 5. Efficient Spacing - Reduced project list margin: 80px → 32-48px (40% reduction) - Reduced list gap: 16px → 12px (25% reduction) - Better space utilization for small viewport heights #### 6. Sidebar Titles Removed text truncation from sidebar project and session titles. Long names now wrap properly using instead of being cut off with ellipsis. This improves readability for long project/session names in narrow sidebars. ## Issue Connection This PR directly addresses #3547 (Small screen compatibility): - ✅ **User input visibility**: Reduced excessive vertical spacing so input fields remain visible - ✅ **Chat output visibility**: More compact layout preserves screen real estate - ✅ **Sidebar title readability**: Long project and session names truncate with tooltip - ✅ **Action button usability**: Buttons overlay text on hover for better access - ✅ **Graceful collapse**: Responsive margins and gaps adapt to limited viewport heights - ✅ **Small height priority**: Optimized for scenarios like VSCode terminal (10 lines) ## Technical Details - **WCAG Compliance**: Fixed critical accessibility violations where UI elements disappeared on zoom - **Text Truncation**: Session and project titles use `truncate` with `min-w-0` for proper ellipsis - **Hover Tooltips**: Full titles shown on hover for truncated text - **Overlay Buttons**: Archive and action buttons overlay text area on hover for better UX - **Responsive Design**: Replaced fixed pixel/REM values with Tailwind responsive classes - **Viewport Units**: Used `min()` function and viewport percentage constraints for zoom-friendly layouts - **Backward Compatible**: Maintains mobile sidebar functionality while fixing desktop zoom issues ## Testing - Build passes: ✅ - TypeScript checks: ✅ - Responsive behavior verified at 100%, 125%, 150%, 175%, 200% zoom levels - Text truncation verified with long project and session names - Hover tooltips confirmed working for truncated text - Action button overlay verified on hover ## Related - Closes #3547 (Small screen compatibility)
yindo added the pull-request label 2026-02-16 18:17:29 -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#12584
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?