WooNooW

Files

dwindown 14103895e2 fix: Prevent sidebar from shrinking in fullscreen mode

Problem:
- Sidebar was shrinking when viewport width decreased
- Sidebar should maintain fixed width (224px / w-56)
- At breakpoint (<1024px), sidebar should hide and TopNav should show

Root Cause:
Sidebar is inside a flex container without flex-shrink-0:
<div className="flex">
  <aside className="w-56">  ← Can shrink by default!
  <main className="flex-1">

Solution:
Add flex-shrink-0 to sidebar:
<aside className="w-56 flex-shrink-0">

Behavior:
✅ Desktop (≥1024px): Sidebar fixed at 224px, content shrinks
✅ Mobile (<1024px): Sidebar hidden, TopNav shown
✅ Sidebar never shrinks below 224px

Layout:
┌─────────────────────────────────────┐
│ Desktop (≥1024px):                  │
│ ┌──────────┬────────────────────┐   │
│ │ Sidebar  │ Content (flex-1)   │   │
│ │ 224px    │ Shrinks            │   │
│ │ Fixed    │                    │   │
│ └──────────┴────────────────────┘   │
├─────────────────────────────────────┤
│ Mobile (<1024px):                   │
│ ┌─────────────────────────────────┐ │
│ │ TopNav                          │ │
│ ├─────────────────────────────────┤ │
│ │ Content (full width)            │ │
│ └─────────────────────────────────┘ │
└─────────────────────────────────────┘

Breakpoint Logic (useIsDesktop):
const isDesktop = useIsDesktop(1024); // lg breakpoint

{fullscreen ? (
  isDesktop ? (
    <Sidebar /> + <main>  ← Desktop layout
  ) : (
    <TopNav /> + <main>   ← Mobile layout
  )
) : (
  <TopNav /> + <main>     ← WP-Admin layout
)}

Files Modified:
- App.tsx: Added flex-shrink-0 to Sidebar

Result:
✅ Sidebar maintains 224px width
✅ Content area shrinks responsively
✅ Clean breakpoint behavior at 1024px

2025-11-06 15:56:36 +07:00