Implement Mobile-First Responsive UI.

The current expense tracker UI is not fully responsive on small screens (≤414px): navigation overflows, the transactions table requires horizontal scrolling, charts and modals clip, and tap targets are too small—making mobile use frustrating.

🎯 Proposed Solution

- Adopt a mobile-first layout with revised breakpoints (sm/md/lg) and fluid spacing/typography.
- Replace the sidebar with a bottom tab bar on small screens (e.g., Home, Add, Reports, Settings).
- Convert the transactions table into stacked, card-style rows on mobile; keep the table for desktop.
- Make charts responsive (use a responsive container and flexible aspect ratio) and ensure legends/tooltips wrap.
- Increase tap targets to at least 44×44px; add comfortable spacing between interactive elements.
- Simplify forms to a single column with native mobile-friendly inputs (date, number, select); ensure keyboard does not cover fields.
- Use full-screen modals/drawers on mobile and prevent content from being clipped.
- Add/verify meta viewport and safe-area handling for devices with notches (env(safe-area-inset-*)).
- Optionally persist a “compact/comfortable” density preference for users.

✅ Expected Behavior

- No horizontal scrolling on 320–414px widths; content fits within the viewport.
- Navigation is reachable with one-hand thumb use; bottom bar appears on mobile, sidebar on desktop.
- Transactions list stacks cleanly and remains readable; charts resize without overlap or clipping.
- Forms are easy to complete on mobile; focus moves correctly and the on-screen keyboard does not hide inputs.
- UI adapts smoothly on orientation changes; layout and spacing remain consistent.

💻 Technical Notes

- Frontend: React with Tailwind responsive utilities (sm, md, lg), container queries where helpful, and CSS clamp() for fluid type.
- Layout: Prefer flex/grid over absolute positioning; avoid fixed widths—use max-w, min-w-0, overflow-hidden as needed.
- Charts: Wrap in a ResponsiveContainer (Recharts) or set maintainAspectRatio: false (Chart.js); ensure legends/tooltips wrap on small screens.
- Tables: Maintain semantic table on desktop; render a11y-friendly cards on mobile (roles/headings) to avoid horizontal scrolling.
- Meta: Ensure `` is present; support safe-area insets.
- Backend: No API or schema changes required for responsiveness.

🧪 Test Steps

1. In Chrome DevTools Device Toolbar, test iPhone SE/12/14 Pro, Pixel 7, and iPad widths; verify no horizontal scrolling and readable typography.
2. Rotate to landscape; confirm nav, transactions, and charts remain usable without clipping.
3. Interact with the transactions list: expand/collapse details, long merchant/category names, large amounts—confirm wrapping and no overflow.
4. Add a new transaction: ensure all inputs are accessible, keyboard doesn’t cover fields, and the submit button remains visible.
5. Validate charts: legends wrap, tooltips position correctly on touch, and elements are readable at small widths.
6. Run Lighthouse (Mobile): verify Accessibility ≥ 90 and Best Practices/Performance are not regressed.
7. Cross-browser check: iOS Safari and Android Chrome on a real device/emulator for touch accuracy and scroll behavior.