fix(ui): improve sidebar accessibility and responsiveness on zoom and small screens

[rwese]

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:

trying to scale the ui down:

AFTER:

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)