feat: make app mobile friendly

[NanaKay007]

Summary

• Responsive navbar: hides text labels on small screens, shows only icons
• Chat panel becomes a full-screen overlay on mobile (< lg breakpoint), retains side panel behavior on desktop
• CalendarDetail toolbar wraps and uses compact spacing/font sizes on mobile
• Week view uses narrower time gutter and smaller day headers
• Conversation sidebar hidden on mobile within chat panel
• Message bubbles and input area use compact padding on small screens

Based on: #33 (collapsible chat interface)

Test plan

• Resize browser to mobile width (~375px) and verify navbar collapses to icons
• Open Assistant on mobile — should be full-screen overlay with close button
• Open a calendar detail on mobile — toolbar should not overflow
• Week view should remain usable on mobile with narrower gutter
• Test on desktop (>1024px) — chat panel should remain as 420px side panel
• Test chat input and message sending on mobile

🤖 Generated with Claude Code

[claude]

PR Review - Mobile Responsiveness

I've reviewed this PR for bugs and security issues. The mobile responsiveness changes look solid overall, with one critical accessibility bug to address:

Critical Bug

Layout.tsx:195-199 - Missing backdrop click on mobile overlay

The mobile chat overlay has a backdrop that should close the chat when clicked, but there's a keyboard accessibility issue:

<div
  className="fixed inset-0 bg-black/40 z-30 lg:hidden"
  onClick={() => setChatOpen(false)}
/>

Issue: The backdrop uses onClick without keyboard support. Users navigating via keyboard cannot close the overlay by focusing and activating the backdrop. This is a WCAG 2.1 Level A violation (2.1.1 Keyboard).

Fix: Add keyboard event handler and proper role/tabIndex:

<div
  className="fixed inset-0 bg-black/40 z-30 lg:hidden"
  onClick={() => setChatOpen(false)}
  onKeyDown={(e) => e.key === 'Escape' && setChatOpen(false)}
  role="button"
  tabIndex={0}
  aria-label="Close chat"
/>

Alternatively, rely on the existing close button and only handle Escape key at the container level.

Style Observations (not bugs, but worth considering)

1. CalendarDetail.tsx:350 - The time gutter shrinks from 60px to 40px on mobile. This might cause time labels to overlap or truncate on some devices. Test with longer locale-specific time formats (e.g., "12:00 PM" in some languages).

2. ChatInterface.tsx:260 - The "Send" button text is hidden on mobile (hidden sm:inline), showing only an icon. Ensure the button has an accessible label via aria-label="Send message" for screen readers.

3. Layout.tsx:195 - Consider adding aria-modal="true" to the chat overlay container for better screen reader support.

No Security Issues Found

The changes are purely presentational (CSS/styling) and don't introduce security vulnerabilities. No data handling, API calls, or authentication logic modified.

---

Recommendation: Fix the critical keyboard accessibility bug before merging. The other observations are optional improvements for better UX and a11y.

[claude]

PR Review - Mobile Responsive Layout

Good work on making the app mobile-friendly! The implementation is clean and the responsive breakpoints are well-chosen. However, I've identified a few issues to address:

Bugs

1. Z-index Layering Issue (Layout.tsx:205-209)

   • The mobile chat overlay backdrop (z-30) and panel (z-40) could conflict with the mobile close button (z-50)
   • Additionally, the user menu dropdown uses z-10/z-20 (Layout.tsx:155-158), which will appear behind the chat overlay on mobile
   • Fix: When the chat is open on mobile, the user menu should either be disabled or its z-index needs to be higher than z-50

2. Mobile Scroll Lock Missing

   • When the chat panel opens as a full-screen overlay on mobile (Layout.tsx:198-220), there's no prevention of body scroll
   • This allows users to scroll the main content behind the overlay, which is poor UX
   • Fix: Add overflow-hidden to the body element when chatOpen is true on mobile screens

3. Accessibility: Close Button Missing Label

   • The mobile close button (Layout.tsx:207-214) lacks an aria-label attribute
   • Fix: Add aria-label="Close assistant" to the button

Security Issues

None identified - No XSS, injection vulnerabilities, or other security concerns in this diff.

Suggestions

1. Week View Time Gutter Width (CalendarDetail.tsx:350,371)

   • Reducing from 60px to 40px on all screens makes time labels cramped even on desktop
   • Consider using responsive width: 40px sm:60px to maintain desktop usability

2. Calendar Name Truncation (CalendarDetail.tsx:582)

   • max-w-[100px] on mobile is quite restrictive and may cut off short names unnecessarily
   • Consider max-w-[120px] sm:max-w-none for better balance

3. Consistent Breakpoint Usage

   • The code uses both sm: and lg: breakpoints inconsistently
   • Chat overlay uses lg: (Layout.tsx:202-205) but most UI uses sm:
   • This is acceptable but worth documenting the convention

Test Coverage Note

Per CLAUDE.md requirements, this feature needs integration tests. Please ensure tests cover:

• Mobile viewport rendering (<375px, <768px)
• Chat overlay behavior on mobile vs desktop
• Navbar icon-only mode on small screens
• Week view usability on mobile

Overall, solid implementation! Address the z-index conflict and scroll lock issues, and this will be ready to merge.