Mobile layout pass from the Figma #83

New issue

Open

opened 2026-10-03 19:44:45 +00:00 by jalenluorion · 0 comments

jalenluorion commented

2026-10-03 19:44:45 +00:00

Member

Goal
Most students will open CMUCal on their phone first. The Figma has mobile frames for home, Explore and the manager dashboard; the app should match them.

Current state

web/src/app/hooks/useIsMobile.ts switches layouts; BottomNav.tsx and MobileSidebarDrawer.tsx exist.
web/src/app/components/Navbar.tsx renders ConnectGoogleButton and the theme toggle only when !isMobile, so phones cannot switch theme or connect Google Calendar.
ManagerDashboard.tsx (about 1100 lines) has no responsive Tailwind classes at all.
On mobile, Explore shows only the search list (web/src/app/explore/page.tsx).

Scope

Add the theme toggle and Connect Google Calendar on mobile (user menu or drawer, per the Figma).
Home: match the mobile home frame (calendar view, course/club/event toggles in the drawer).
Explore: match the mobile Explore frame (cards, filters in a sheet).
Manager dashboard: make it usable at 375px (stacked sections, scrollable tables, full-width modals).
Check every modal (upload, event details, create schedule) at 375px and 768px.
Fix horizontal scrolling and tap targets under 44px.

Done when

Home, Explore and Manager match their Figma mobile frames at 375px with no horizontal scroll.
Theme toggle and Connect Google work on a phone.

Notes
Coordinate with Explore v2 so the card component is responsive from the start.

**Goal** Most students will open CMUCal on their phone first. The Figma has mobile frames for home, Explore and the manager dashboard; the app should match them. **Current state** - `web/src/app/hooks/useIsMobile.ts` switches layouts; `BottomNav.tsx` and `MobileSidebarDrawer.tsx` exist. - `web/src/app/components/Navbar.tsx` renders `ConnectGoogleButton` and the theme toggle only when `!isMobile`, so phones cannot switch theme or connect Google Calendar. - `ManagerDashboard.tsx` (about 1100 lines) has no responsive Tailwind classes at all. - On mobile, Explore shows only the search list (`web/src/app/explore/page.tsx`). **Scope** - [ ] Add the theme toggle and Connect Google Calendar on mobile (user menu or drawer, per the Figma). - [ ] Home: match the mobile home frame (calendar view, course/club/event toggles in the drawer). - [ ] Explore: match the mobile Explore frame (cards, filters in a sheet). - [ ] Manager dashboard: make it usable at 375px (stacked sections, scrollable tables, full-width modals). - [ ] Check every modal (upload, event details, create schedule) at 375px and 768px. - [ ] Fix horizontal scrolling and tap targets under 44px. **Done when** - [ ] Home, Explore and Manager match their Figma mobile frames at 375px with no horizontal scroll. - [ ] Theme toggle and Connect Google work on a phone. **Notes** Coordinate with Explore v2 so the card component is responsive from the start.

jalenluorion added this to the Phase 3 milestone

2026-10-03 19:44:45 +00:00

jalenluorion added the

frontend

feature

labels

2026-10-03 19:44:45 +00:00

jalenluorion added this to the CMUCal project

2026-10-03 19:45:09 +00:00