dfef26bad5
Add collapsible sidebars with slide-in drawers on mobile, hamburger menu for session sidebar, stacked layouts for screens under 768px, 44px touch targets, and overflow prevention across all pages. Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
81 lines
3.9 KiB
Markdown
81 lines
3.9 KiB
Markdown
# Issue #19: Responsive layout and mobile support
|
|
|
|
**Status: COMPLETED**
|
|
|
|
## Summary
|
|
|
|
Make the dashboard fully usable on mobile with collapsible sidebars, stacked layouts for small screens, touch-friendly tap targets, and no horizontal scrolling.
|
|
|
|
## Changes
|
|
|
|
### Chat Page (`src/routes/chat/+page.svelte`)
|
|
- Added hamburger menu button visible only on mobile (`md:hidden`) to toggle the session sidebar
|
|
- SessionSidebar rendered twice: always-visible wrapper for desktop (`hidden md:flex`) and a mobile drawer controlled by `showSessionSidebar` state
|
|
- Config sidebar now passes `onClose` callback to enable closing on mobile
|
|
- Nav links (Lineage, Memory, Audit) hidden on small screens (`hidden sm:inline-flex`)
|
|
- Config button shows gear icon on small screens, text label on larger screens
|
|
- Added `overflow-hidden` to root container to prevent horizontal scrolling
|
|
- All header padding reduced on mobile (`px-3` vs `md:px-4`)
|
|
|
|
### SessionSidebar (`src/lib/components/SessionSidebar.svelte`)
|
|
- Accepts new `open` and `onClose` props for mobile drawer control
|
|
- On mobile: renders as fixed overlay (`fixed inset-y-0 left-0 z-50`) with slide-in transition
|
|
- On desktop: renders as relative-positioned sidebar with no transition (`md:relative md:translate-x-0`)
|
|
- Backdrop overlay (`bg-black/50`) shown on mobile when sidebar is open
|
|
- Close button visible only on mobile (`md:hidden`)
|
|
- Session selection and new chat actions auto-close the sidebar on mobile
|
|
|
|
### ConfigSidebar (`src/lib/components/ConfigSidebar.svelte`)
|
|
- Accepts new optional `onClose` prop
|
|
- On mobile: renders as fixed overlay from the right (`fixed inset-y-0 right-0 z-50`)
|
|
- On desktop: renders as relative-positioned sidebar (`md:relative md:z-auto`)
|
|
- Backdrop overlay shown when `onClose` is provided (mobile only)
|
|
- Close button visible only on mobile
|
|
|
|
### MessageInput (`src/lib/components/MessageInput.svelte`)
|
|
- Send button has `min-h-[44px] min-w-[44px]` for touch-friendly 44px tap target
|
|
- Textarea uses `text-base` on mobile (prevents iOS zoom) and `md:text-sm` on desktop
|
|
- Reduced padding on mobile (`p-3` vs `md:p-4`)
|
|
|
|
### MessageBubble (`src/lib/components/MessageBubble.svelte`)
|
|
- Increased max-width on mobile from 75% to 85% (`max-w-[85%] md:max-w-[75%]`)
|
|
- Slightly reduced padding on mobile
|
|
|
|
### Home Page (`src/routes/+page.svelte`)
|
|
- Nav cards stack vertically on mobile (`flex-col sm:flex-row`)
|
|
- Full-width centered layout with `max-w-md` constraint on mobile
|
|
- Larger touch targets for nav links (`py-3 sm:py-2`)
|
|
- Added horizontal padding to prevent edge clipping
|
|
|
|
### Lineage Page (`src/routes/lineage/+page.svelte`)
|
|
- Content area stacks vertically on mobile (`flex-col md:flex-row`)
|
|
- Detail panel renders as fixed overlay on mobile with backdrop
|
|
- Reduced padding on mobile
|
|
- "Sample Data" badge hidden on very small screens
|
|
|
|
### Memory Page (`src/routes/memory/+page.svelte`)
|
|
- Filters stack vertically on mobile (`flex-col sm:flex-row`)
|
|
- Reduced padding on mobile
|
|
- "Sample Data" badge hidden on very small screens
|
|
|
|
### Audit Page (`src/routes/audit/+page.svelte`)
|
|
- Filters stack vertically on mobile (`flex-col sm:flex-row`)
|
|
- Session select constrained to prevent horizontal overflow (`min-w-0 max-w-full truncate`)
|
|
- Reduced padding on mobile
|
|
- "Sample Data" badge hidden on very small screens
|
|
|
|
## Acceptance Criteria Met
|
|
|
|
- [x] Sidebars collapsible on mobile (hamburger menu for sessions, tap to close)
|
|
- [x] Stacked layout for screens < 768px (md breakpoint = 768px)
|
|
- [x] Chat input remains accessible and usable on mobile (always at bottom, full width)
|
|
- [x] Touch-friendly tap targets (min 44px on send button, hamburger, config toggle)
|
|
- [x] No horizontal scrolling on any viewport (overflow-hidden on containers)
|
|
- [x] Works on common mobile breakpoints (320px, 375px, 414px) via responsive Tailwind classes
|
|
|
|
## Quality Gates
|
|
|
|
- `npm run build` - PASSED
|
|
- `npm run lint` - PASSED (0 errors)
|
|
- `npm run check` - PASSED (0 errors, 0 warnings)
|