setia/ims
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

fix: lower sidebar breakpoint from md to sm so desktop sidebar renders

Browse Source 
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
This commit is contained in:
admin
2026-07-13 09:57:29 +08:00
co-authored by Claude Sonnet 4.6
parent b1730dbeb1
commit 8a9416abb9
2 changed files with 3 additions and 3 deletions
Download Patch File Download Diff File Expand all files Collapse all files
app/(protected)/layout.tsx
+1 -1
View File
@@ -29,7 +29,7 @@ export default async function ProtectedLayout({
userName={profile?.name ?? user.email ?? ''} userName={profile?.name ?? user.email ?? ''}
userEmail={profile?.email ?? 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} {children}
</div> </div>
</div> </div>
components/layout/sidebar.tsx
+2 -2
View File
@@ -151,7 +151,7 @@ export function Sidebar({ role, userName, userEmail }: SidebarProps) {
return ( return (
<> <>
{/* Desktop sidebar */} {/* 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 */} {/* Header */}
<div className="flex items-center justify-between px-4 py-4 border-b border-gray-100"> <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> <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> </aside>
{/* Mobile bottom tab bar */} {/* 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 => { {mobileItems.map(item => {
const exactRoots = ['/reporter', '/supervisor', '/management', '/capa-owner', '/admin', '/report', '/account'] const exactRoots = ['/reporter', '/supervisor', '/management', '/capa-owner', '/admin', '/report', '/account']
const isActive = exactRoots.includes(item.href) const isActive = exactRoots.includes(item.href)