Improve mobile responsive design on dashboard

[2214962083]

Summary

Ops engineers and developers often check their cron job monitoring dashboards from their phones — especially when receiving an alert outside of work hours. The CronPulse dashboard should provide a great mobile experience so users can quickly assess the situation and take action.

Problem

The current dashboard layout is optimized for desktop screens. On mobile devices (< 768px), users may experience:

• Tables that overflow horizontally and require awkward scrolling
• Navigation that is difficult to use on small screens
• Buttons and touch targets that are too small
• Monitor cards or lists that don't stack properly
• Settings forms that are cramped or misaligned
• Status badges and timestamps that get clipped

Expected Behavior / Deliverable

• Dashboard overview: Monitor cards/list items stack vertically on mobile with clear status indicators.
• Navigation: Collapsible hamburger menu or bottom navigation bar on mobile.
• Monitor detail page: All sections (timeline, settings, alerts) are readable and scrollable on mobile.
• Tables: Horizontal scroll with sticky first column, or switch to card layout on small screens.
• Forms: Full-width inputs, properly spaced labels, and large enough touch targets (min 44x44px).
• Status page: Public status pages should be fully responsive (these are often viewed on phones by end users).
• Modals/dialogs: Properly sized and dismissible on mobile.

Implementation Hints

• UI components live in: src/ — audit all page components for mobile responsiveness.
• If using Tailwind CSS, leverage responsive prefixes: sm:, md:, lg:.
• Key breakpoints to test:
  • 375px (iPhone SE)
  • 390px (iPhone 14)
  • 414px (iPhone 14 Plus)
  • 768px (iPad Mini)
• Use browser DevTools device emulation to test.
• Common quick wins:
  • Add overflow-x-auto to table containers
  • Use flex-col on mobile, flex-row on desktop
  • Ensure min-h-[44px] min-w-[44px] on all interactive elements
  • Hide non-essential columns on mobile tables

Acceptance Criteria

• Dashboard overview is usable on 375px wide screens
• Navigation works on mobile (hamburger menu or equivalent)
• Monitor detail pages are fully scrollable and readable
• All forms are usable on mobile with proper touch targets
• Tables don't break the layout on small screens
• Public status pages are fully responsive
• No horizontal page-level scroll on any page at mobile widths
• Tested on at least 3 common mobile viewport sizes