# Sidebar Collapse Responsive Fix

## Overview

Beberapa halaman dashboard (frontend & admin) menggunakan wrapper `container` Tambahan di dalam layout sidebar, yang menyebabkan layout **tidak responsive** saat sidebar di-collapse ke icon mode.

## Root Cause

Semua sidebar layout sudah menyediakan wrapper padding:
- `frontend-sidebar-layout.tsx`: `<div className="flex flex-1 flex-col p-4 md:p-6">`
- `admin-sidebar-layout.tsx`: `<div className="flex flex-1 flex-col p-4 md:p-6">`

Halaman yang menambahkan wrapper `container` sendiri di dalamnya menghasilkan:
1. **Double padding** dari layout + container
2. **Fixed max-width** dari Tailwind `container` class yang tidak menyesuaikan saat sidebar collapse/expand
3. **Layout tidak fluid** — content tidak mengikuti lebar sidebar inset

## Perubahan

### Frontend Pages

| File | Route | Sebelum | Sesudah |
|------|-------|---------|---------|
| `resources/js/pages/frontend/shop/index.tsx:130` | `/dashboard/shop` | `<div className="container py-4 px-4 md:py-8 md:px-8">` | `<div className="space-y-6">` |
| `resources/js/pages/frontend/shop/history.tsx:59` | `/dashboard/shop/history` | `<div className="container py-4 px-4 md:py-8 md:px-8">` | `<div className="space-y-6">` |
| `resources/js/pages/frontend/voucher/index.tsx:117` | `/dashboard/voucher` | `<div className="container py-4 px-4 md:py-8 md:px-8">` | `<div className="space-y-6">` |
| `resources/js/pages/frontend/ingame/index.tsx:163` | `/dashboard/service` | `<div className="flex h-full flex-1 flex-col space-y-8 p-4 md:p-8">` | `<div className="space-y-6">` |

### Admin Pages

| File | Route | Sebelum | Sesudah |
|------|-------|---------|---------|
| `resources/js/pages/admin/news/pages/NewsEditPage.tsx:60` | `/admin/news/:id/edit` | `<div className="container py-6">` | `<div className="space-y-6">` |
| `resources/js/pages/admin/news/pages/NewsCreatePage.tsx:41` | `/admin/news/create` | `<div className="container py-6">` | `<div className="space-y-6">` |
| `resources/js/pages/admin/manage/characters/show.tsx:58` | `/admin/manage/characters/:id` | `<div className="container mx-auto px-3 py-6">` | `<div className="space-y-6">` |
| `resources/js/pages/admin/manage/factions/show.tsx:70` | `/admin/manage/factions/:id` | `<div className="container mx-auto py-6 px-3">` | `<div className="space-y-6">` |

## Pattern Konsisten

Setelah fix, semua halaman mengikuti pattern yang sama:

```
Layout Wrapper (p-4 md:p-6)    <-- padding dari sidebar layout
  └── Page Content (space-y-6) <-- spacing antar section, TANPA container/max-width
       ├── Section 1 (Card, heading, dll)
       ├── Section 2
       └── Section 3
```

Halaman yang **sudah benar** sejak awal (sebagai referensi):
- `/dashboard` (`dashboard/index.tsx`)
- `/dashboard/topspender` (`topspender/index.tsx`)
- `/dashboard/event` (`event/index.tsx`)
- `/dashboard/ranking/*` (`ranking/*/index.tsx`)
- `/dashboard/streamer` (`streamer/index.tsx`)

## Catatan Penting

- **Jangan gunakan** class `container` sebagai wrapper utama di dalam sidebar layout
- **Jangan tambahkan** padding (`p-*`) di level root halaman karena sudah di-handle layout wrapper
- Gunakan `space-y-6` atau `space-y-4` untuk spacing antar section
- Untuk max-width pada elemen tertentu (seperti form), gunakan `max-w-4xl mx-auto` pada **elemen spesifik**, bukan wrapper halaman