fix(ui): improve sidebar accessibility and responsiveness on zoom and small screens#7988
Open
rwese wants to merge 6 commits intoanomalyco:devfrom
Open
fix(ui): improve sidebar accessibility and responsiveness on zoom and small screens#7988rwese wants to merge 6 commits intoanomalyco:devfrom
rwese wants to merge 6 commits intoanomalyco:devfrom
Conversation
- Remove xl:block breakpoint that hid sidebar on zoom - Use responsive min() function for sidebar width (25vw max) - Sidebar now remains visible at all zoom levels - Maintains mobile sidebar functionality for small screens
- Replace fixed mt-55 (220px) with responsive mt-8 md:mt-12 - Replace fixed md:w-xl (384px) with responsive w-48 md:w-64 (192px→256px) - Add max-w-md to container to prevent overflow - Make sidebar Mark logo responsive (100% with max-width 16px) - Maintains visual hierarchy while allowing proper zoom scaling
- Logo now uses w-full for full width at 100% zoom - md:w-xl maintains large size (384px) on medium+ screens - Better visual appearance at default zoom level - Still scales responsively on zoom
- Reduce mt-20 (80px) to mt-8 md:mt-12 (32px→48px) for better space utilization - Reduce gap-4 (16px) to gap-3 (12px) for tighter spacing - More responsive to viewport size and zoom level - Uses available space more efficiently
- Replace truncate class with break-words for project names - Replace truncate class with break-words for session titles - Replace truncate class with break-words for 'New session' link - Allows long titles to wrap instead of being cut off with ellipsis - Improves readability in narrow sidebar and small screen scenarios
- 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
Contributor
|
The following comment was made by an LLM, it may be inaccurate: No duplicate PRs found. |
This was referenced Jan 12, 2026
opencode-agent
bot
force-pushed
the
dev
branch
from
00637c0 to
71e0ba2
Compare
thdxr
force-pushed
the
dev
branch
3 times, most recently
from
f1ae801 to
08fa7f7
Compare
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
1 participant
Add this suggestion to a batch that can be applied as a single commit.This suggestion is invalid because no changes were made to the code.Suggestions cannot be applied while the pull request is closed.Suggestions cannot be applied while viewing a subset of changes.Only one suggestion per line can be applied in a batch.Add this suggestion to a batch that can be applied as a single commit.Applying suggestions on deleted lines is not supported.You must change the existing code in this line in order to create a valid suggestion.Outdated suggestions cannot be applied.This suggestion has been applied or marked resolved.Suggestions cannot be applied from pending reviews.Suggestions cannot be applied on multi-line comments.Suggestions cannot be applied while the pull request is queued to merge.Suggestion cannot be applied right now. Please check back later.
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:
AFTER:
Changes Made
1. Sidebar Zoom Accessibility (
packages/app/src/pages/layout.tsx)xl:blockbreakpoint that hid sidebar on zoom (150%+)min(280px, 25vw)function2. Sidebar Text Truncation & Overlay (
packages/app/src/pages/layout.tsx)min-w-0for proper truncation3. Main Stage Scaling (
packages/app/src/pages/home.tsx)mt-8 md:mt-12w-fullat 100% zoom,md:w-xlon larger screensmax-w-lgcontainer constraint to prevent overflow4. Sidebar Mark Logo (
packages/ui/src/components/logo.css)width: 100%andmax-width: 16px5. Efficient Spacing
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):
Technical Details
truncatewithmin-w-0for proper ellipsismin()function and viewport percentage constraints for zoom-friendly layoutsTesting
Related