Mobile responsiveness pass for the events table, settings grids, and dashboard navbar drawer

[greatest0fallt1me]

Description

The repo has responsiveness primitives — hooks/use-mobile.tsx (useIsMobile, 768px breakpoint) and hooks/use-media-query.ts (useMediaQuery) — and components/navbar/MobileDrawer.tsx exists, but several surfaces still assume desktop. The seven-column components/events/events-table.tsx overflows on narrow screens, the multi-column grids in app/(dashboard)/settings/page.tsx can crowd at small widths, and the navbar/drawer interaction needs verification on mobile. This issue does a focused responsiveness pass on those three surfaces.

Requirements and context

• Make EventsTable usable on mobile (horizontal scroll with a sticky first column, or a stacked card layout below the useIsMobile breakpoint) without breaking the desktop table.
• Audit the settings grids in app/(dashboard)/settings/page.tsx so sections reflow to a single column on small screens.
• Verify the navbar collapses to MobileDrawer correctly and that the drawer is scrollable/usable at common mobile widths.
• Non-functional: use the existing useIsMobile/useMediaQuery hooks rather than introducing new breakpoint logic; no horizontal page scroll at 360px; no desktop regressions.
• Keep Tailwind responsive utilities consistent with the existing config in tailwind.config.ts.

Acceptance criteria

• EventsTable is readable and operable at 360px without clipping action controls.
• Settings sections reflow to a single column on small screens.
• The navbar collapses to the mobile drawer and the drawer is fully usable on mobile.
• Existing useIsMobile/useMediaQuery hooks are reused (no duplicate breakpoint logic).
• No horizontal page overflow at 360px and no desktop regressions.
• Any extracted responsive helper is covered by tests (>=80% lines).

Suggested execution

1. Fork the repo and create a branch — git checkout -b feature/mobile-responsiveness-pass.

2. Implement changes — components/events/events-table.tsx, app/(dashboard)/settings/page.tsx, components/navbar/Navbar.tsx, components/navbar/MobileDrawer.tsx.

3. Write/extend tests — Jest + React Testing Library with pnpm; mock matchMedia (the existing jest.setup.js already mocks ResizeObserver) to assert mobile vs desktop rendering branches.

4. Test and commit —

pnpm install
pnpm test
pnpm lint
pnpm build

Example commit message

fix(responsive): adapt events table, settings grids, and navbar drawer for mobile

Guidelines

• Aim for >=80% coverage on any new responsive helper.
• Verify across common breakpoints and document the chosen mobile pattern; keep desktop UX unchanged.
• Timeframe: 96 hours.