The shadcn component update pulled sidebar.tsx using Tailwind v3-style
bare-bracket custom property syntax (w-[--sidebar-width]). Under Tailwind
v4 this compiles to invalid CSS (width: --sidebar-width) which the browser
ignores, so width fell back to auto and the fixed sidebar blew out to its
content's intrinsic width (the 1372px logo header ~ half the page). The
empty spacer div was equally broken, reserving zero space and leaving the
inset m-2 margin as a stray left gap.
Three fixes:
- sidebar.tsx: wrap all 7 bare-bracket custom properties in var() so they
compile to width: var(--sidebar-width) / var(--sidebar-width-icon) /
max-width: var(--skeleton-width). The calc(var(...)) rules were already
valid; only the bare forms were broken.
- layout.tsx: replace the raw <main className="min-h-full bg-background
w-full"> with <SidebarInset>. AppSidebar uses variant="inset", whose
peer styling (md:peer-data-[variant=inset]:m-2 / :rounded-xl / :shadow)
only applies to a SidebarInset sibling, so the inset gap/rounding/shadow
were silently dropped.
- SiteHeader.tsx: replace the raw <div> + border-gray-800 + p-4 with the
standard shadcn <header className="flex h-16 shrink-0 items-center gap-2
border-b px-4"> using semantic border-b, plus -ml-1 on SidebarTrigger
and an ml-auto wrapper for NotificationsBell (which takes no className).
Verified via the running dev server: SSR HTML carries
data-variant="inset", a single <main> with the peer-data-[variant=inset]
classes, <header ... border-b>, and zero border-gray-800 occurrences.
tsc --noEmit clean for the changed files.
Z8MB1E
088b6cefb6