fix(ui): improve sidebar accessibility and responsiveness on zoom and small screens #7988
+29
−28
Conversation
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
- 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. |
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