# Responsive Layout
## Breakpoint Kunci
| Lebar | Perilaku |
|-------|----------|
| <480px | Theme toggle: label disembunyikan, icon saja |
| <768px | Header user name disembunyikan |
| <1024px | Sidebar disembunyikan; bottom nav + sheet aktif; kolom aksi tabel disembunyikan |
| ≥1024px | Sidebar permanen; bottom nav disembunyikan; aksi tabel inline |
| ≥1280px | List panel max-height lebih besar; layout dua kolom (tabel + sidebar catatan) |

## Pola Layout Halaman Data
- Header halaman: `flex-col md:flex-row` (judul + toolbar)
- List panel: `flex-col xl:flex-row` dengan panel sticky di desktop
- Toolbar filter: `flex-wrap` dengan input full-width di mobile

## List Panel (Scrollable Table)
- Class `.list-panel`: max-height `min(100vh - chrome, 900px)`
- Toolbar fixed atas, body scroll, thead sticky
- `-webkit-overflow-scrolling: touch` untuk iOS

## Safe Area
- Bottom nav & sheet: `env(safe-area-inset-bottom)`
- PWA install prompt: fixed bottom dengan padding adaptif

## Viewport
- `<meta name="viewport" content="width=device-width, initial-scale=1.0">`
- Min-height konten: `100dvh` aware di `.app-content-frame`