Align top panel headers with master sidebar

agent.md

@@ -41,6 +41,7 @@ This project replaces the Excel/VBA workflow named `Catalog maker - 20` with a N
 - When the left sidebar is closed on desktop, its open control keeps a dedicated narrow rail; it must not be positioned inside the secondary product-details panel. On mobile, the rail collapses and the control may overlay the stacked layout.
 - Top headers for the sidebar, secondary panel and main workspace must use one shared fixed height so the columns align visually across the application.
 - All top panel headers must use the shared `panel-header` component class, including identical background, border, typography, spacing and dark/light theme behavior. Do not style `Catalog controls`, `Product details` or `Main workspace` headers independently.
+- The three top panel headers must share the same top baseline and visual bounds. The sidebar header must compensate for the sidebar's inner padding so it is not offset from the product-details and main-workspace headers.
 - Panel collapse/open controls must use the shared `panel-control-button` style; do not create separate visual variants for `X`, chevrons or future panel toggles.
 - Verify shared panel-control styling through computed browser styles, not only by checking class names.
 - Use Playwright to inspect the rendered result after every visual change at desktop and narrow viewport sizes.

src/tailwind.css

@@ -47,6 +47,7 @@
   .catalog-screen.workspace-collapsed { --workspace-track: 44px; }
   .sidebar-drawer { @apply fixed inset-y-0 left-0 z-40 flex w-72 min-h-screen flex-col gap-1.5 overflow-y-auto bg-slate-900 p-1.5 text-[11px] text-slate-200 shadow-xl transition-transform duration-200 ease-out; }
   .panel-header, .sidebar-drawer-header, .column-header { @apply box-border flex h-7 min-h-7 items-center justify-between gap-1 border-b border-slate-700 bg-slate-900 px-1 text-[10px] font-semibold uppercase tracking-wide text-slate-300; }
+  .sidebar-drawer-header { @apply -mx-1.5 -mt-1.5 mb-1.5; }
   .sidebar-drawer-title { @apply px-1 text-[10px] font-semibold uppercase tracking-wide text-slate-400; }
   .sidebar-close-button, .sidebar-open-button { @apply inline-flex h-7 w-7 items-center justify-center rounded border border-slate-700 bg-slate-800 text-slate-200 shadow-sm transition hover:border-slate-500 hover:bg-slate-700; }
   .sidebar-close-button .sidebar-icon, .sidebar-open-button .sidebar-icon { @apply h-4 w-4; }

tests/ui/catalog-maker.smoke.spec.ts

@@ -90,6 +90,16 @@ test("uses one shared visual style for the top panel headers", async ({ page })
   expect(new Set(styles.map((style) => JSON.stringify(style))).size).toBe(1);
 });
 
+test("keeps the top panel headers on one baseline", async ({ page }) => {
+  await page.goto("/");
+  const positions = await page.locator(".panel-header").evaluateAll((elements) => elements.map((element) => {
+    const rect = element.getBoundingClientRect();
+    return [rect.top, rect.height];
+  }));
+  expect(new Set(positions.map((position) => JSON.stringify(position))).size).toBe(1);
+  expect(positions[0][0]).toBe(0);
+});
+
 test("uses one shared visual style for panel controls", async ({ page }) => {
   await page.goto("/");
   const styles = await page.locator("#sidebarCloseButton, #secondaryPanelToggle, #mainWorkspaceToggle").evaluateAll((elements) => elements.map((element) => {