From 14103895e2dbdcba008d1c74616abba1587783a8 Mon Sep 17 00:00:00 2001
From: dwindown <dwinx.ramz@gmail.com>
Date: Thu, 6 Nov 2025 15:56:36 +0700
Subject: [PATCH] fix: Prevent sidebar from shrinking in fullscreen mode
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

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
---
 admin-spa/src/App.tsx | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/admin-spa/src/App.tsx b/admin-spa/src/App.tsx
index ea3959a..abfe188 100644
--- a/admin-spa/src/App.tsx
+++ b/admin-spa/src/App.tsx
@@ -108,7 +108,7 @@ function Sidebar() {
   const link = "flex items-center gap-2 rounded-md px-3 py-2 hover:bg-accent hover:text-accent-foreground shadow-none hover:shadow-none focus:shadow-none focus:outline-none focus:ring-0";
   const active = "bg-secondary";
   return (
-    <aside className="w-56 p-3 border-r border-border sticky top-16 h-[calc(100vh-64px)] overflow-y-auto bg-background">
+    <aside className="w-56 flex-shrink-0 p-3 border-r border-border sticky top-16 h-[calc(100vh-64px)] overflow-y-auto bg-background">
       <nav className="flex flex-col gap-1">
         <ActiveNavLink to="/dashboard" startsWith="/dashboard" className={({ isActive }: any) => `${link} ${isActive ? active : ''}`}>
           <LayoutDashboard className="w-4 h-4" />