From 8a9416abb9ba31726569836a85989ecd0340fda4 Mon Sep 17 00:00:00 2001
From: weeihan <whyap79@gmail.com>
Date: Mon, 13 Jul 2026 09:57:29 +0800
Subject: [PATCH] fix: lower sidebar breakpoint from md to sm so desktop
 sidebar renders
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Responsive variants (md:flex, md:hidden) were silently missing from the
Tailwind CSS bundle due to stale build cache — sidebar was always hidden.
Changed breakpoint to sm (640px) and use rm -rf .next before builds.

Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
Claude-Session: https://claude.ai/code/session_01CPf5Rc8QPx6V8KLEEgfKEQ
---
 app/(protected)/layout.tsx    | 2 +-
 components/layout/sidebar.tsx | 4 ++--
 2 files changed, 3 insertions(+), 3 deletions(-)

diff --git a/app/(protected)/layout.tsx b/app/(protected)/layout.tsx
index fd98d25..98c73f0 100644
--- a/app/(protected)/layout.tsx
+++ b/app/(protected)/layout.tsx
@@ -29,7 +29,7 @@ export default async function ProtectedLayout({
         userName={profile?.name ?? user.email ?? ''}
         userEmail={profile?.email ?? user.email ?? ''}
       />
-      <div className="md:ml-60 pb-16 md:pb-0">
+      <div className="sm:ml-60 pb-16 sm:pb-0">
         {children}
       </div>
     </div>
diff --git a/components/layout/sidebar.tsx b/components/layout/sidebar.tsx
index 4ade245..c447757 100644
--- a/components/layout/sidebar.tsx
+++ b/components/layout/sidebar.tsx
@@ -151,7 +151,7 @@ export function Sidebar({ role, userName, userEmail }: SidebarProps) {
   return (
     <>
       {/* Desktop sidebar */}
-      <aside className="hidden md:flex fixed left-0 top-0 h-full w-60 bg-white border-r border-gray-200 flex-col z-40">
+      <aside className="hidden sm:flex fixed left-0 top-0 h-full w-60 bg-white border-r border-gray-200 flex-col z-40">
         {/* Header */}
         <div className="flex items-center justify-between px-4 py-4 border-b border-gray-100">
           <span className="text-base font-bold text-gray-900 tracking-tight">IMS</span>
@@ -200,7 +200,7 @@ export function Sidebar({ role, userName, userEmail }: SidebarProps) {
       </aside>
 
       {/* Mobile bottom tab bar */}
-      <nav className="md:hidden fixed bottom-0 left-0 right-0 bg-white border-t border-gray-200 flex z-40 safe-area-pb">
+      <nav className="sm:hidden fixed bottom-0 left-0 right-0 bg-white border-t border-gray-200 flex z-40 safe-area-pb">
         {mobileItems.map(item => {
           const exactRoots = ['/reporter', '/supervisor', '/management', '/capa-owner', '/admin', '/report', '/account']
           const isActive = exactRoots.includes(item.href)