Z8MB1E
088b6cefb6
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.
15 lines
577 B
TypeScript
15 lines
577 B
TypeScript
import { SidebarTrigger } from "@/components/ui/sidebar";
|
|
import { Separator } from "@/components/ui/separator";
|
|
import { NotificationsBell } from "@/components/frontend/notifications/NotificationsBell";
|
|
|
|
export const SiteHeader = () => {
|
|
return (
|
|
<header className="flex h-16 shrink-0 items-center gap-2 border-b px-4">
|
|
<SidebarTrigger className="-ml-1" />
|
|
<Separator orientation="vertical" className="mr-2 data-[orientation=vertical]:h-4" />
|
|
<div className="ml-auto flex items-center">
|
|
<NotificationsBell />
|
|
</div>
|
|
</header>
|
|
);
|
|
};
|