Iteration Log: Mobile Viewport Spacing & Padding Optimization

Timestamp: 2026-07-30 16:20 WIB
Trigger: User Feedback - Mobile Layout Cramped/Squished ("Kejepit")

Symptom: User reported that on mobile screen sizes, the dashboard layout felt cramped, squished, and restrictive ("kejepit").
Root Cause:
- CardHeader and CardContent used rigid p-6 (24px) padding regardless of screen size.
- Combined with main container's p-4 (16px) padding, a 375px mobile screen lost 80px to margins/padding alone, forcing cards and charts into a narrow 295px column.
- MobileBottomBar items lacked proportional flex-1 distribution, causing active pill indicators to overlap icons on narrow mobile viewports.

src/components/ui/Card.tsx:
- Replaced fixed p-6 padding with responsive p-3.5 sm:p-6 for CardHeader and CardContent.
src/components/layout/DashboardLayout.tsx:
- Adjusted main container padding from p-4 sm:p-6 lg:p-8 to p-2.5 sm:p-5 lg:p-8 pb-24 lg:pb-8.
src/components/layout/MobileBottomBar.tsx:
- Refactored bottom navigation items to use flex-1 flex flex-col items-center justify-center py-1 px-1 text-center min-w-0.
- Repositioned the active indicator pill cleanly to top-0 w-6 h-0.5 bg-primary to avoid overlapping icons or text.
src/components/dashboard/TopWidgets.tsx:
- Expanded mobile chart container heights from h-[160px] to h-[200px] sm:h-[220px] for spacious, readable bar and pie charts.

The mobile UI now has ~40px more horizontal breathing room for all cards, charts, and tables.
Charts render with full-bleed spaciousness and clean legend alignment.
Bottom navigation items are evenly spaced across the entire screen width without clipping.