Center session header controls on the sidebar toggle row and compact the view tabs

The h-12 header centered its content at 24px while the sidebar toggle overlay (pt-[9px] + size-7) sits at 23px, so the tabs, title, Record/Join button, and overflow menu rendered 1px low. Add pb-0.5 so the 46px content box centers at 23px. Shrink the view-switcher pill from 30px to h-7 (matching the header buttons) and its tabs from 26px to h-6.

Author: ComputelessComputer

apps/desktop/src/session/components/note-input/header-shared.tsx

@@ -95,7 +95,7 @@ export function iconHeaderViewClassName(
   size: "tray" | "standalone" = "tray",
   className?: string,
 ) {
-  const heightClassName = size === "tray" ? "h-[26px]" : "h-7";
+  const heightClassName = size === "tray" ? "h-6" : "h-7";
 
   return cn([
     "group/header-view rounded-pill flex shrink-0 items-center justify-center transition-colors select-none [corner-shape:round] [&>svg]:shrink-0",

apps/desktop/src/session/components/note-input/header.test.tsx

@@ -391,7 +391,7 @@ describe("Header", () => {
 
     expect(summaryTab.getAttribute("data-state")).toBeNull();
     expect(viewSwitcher.getAttribute("data-tauri-drag-region")).toBe("false");
-    expect(viewSwitcher.className).toContain("h-[30px]");
+    expect(viewSwitcher.className).toContain("h-7");
     expect(viewSwitcher.className).toContain("p-[2px]");
     expect(viewSwitcher.className).toContain("gap-[2px]");
     expect(viewSwitcher.className).toContain("rounded-pill");
@@ -403,7 +403,7 @@ describe("Header", () => {
     expect(summaryTab.getAttribute("aria-current")).toBeNull();
     expect(memoTab.getAttribute("aria-current")).toBe("page");
     expect(memoTab.textContent).toBe("Memos");
-    expect(memoTab.className).toContain("h-[26px]");
+    expect(memoTab.className).toContain("h-6");
     expect(memoTab.className).not.toContain("-my-px");
     expect(memoTab.className).toContain("bg-white");
     expect(memoTab.className).toContain("text-foreground");
@@ -415,7 +415,7 @@ describe("Header", () => {
     expect(memoTab.querySelector("span")?.className).toContain(
       "@max-[480px]:sr-only",
     );
-    expect(summaryTab.className).toContain("h-[26px]");
+    expect(summaryTab.className).toContain("h-6");
     expect(summaryTab.className).toContain("px-2");
     expect(summaryTab.className).not.toContain("min-w-10");
     expect(summaryTab.className).toContain("dark:hover:bg-accent/80");

apps/desktop/src/session/components/note-input/header.tsx

@@ -51,7 +51,7 @@ export function SessionViewSwitcher({
       data-tauri-drag-region="false"
       className={cn([
         "pointer-events-auto relative z-10 w-fit max-w-full shrink-0 overflow-visible",
-        "bg-foreground/10 dark:bg-accent/55 rounded-pill flex h-[30px] items-center gap-[2px] p-[2px] [corner-shape:round]",
+        "bg-foreground/10 dark:bg-accent/55 rounded-pill flex h-7 items-center gap-[2px] p-[2px] [corner-shape:round]",
       ])}
     >
       {editorTabs.map((view, index) => {

apps/desktop/src/session/components/outer-header/index.test.tsx

@@ -364,7 +364,7 @@ describe("OuterHeader", () => {
     expect(container.firstElementChild?.className).not.toContain("pl-[108px]");
   });
 
-  it("keeps the session header at 48px tall", () => {
+  it("keeps the session header at 48px tall and centers controls on the sidebar toggle row", () => {
     const { container } = render(
       <OuterHeader
         sessionId="session-1"
@@ -373,6 +373,7 @@ describe("OuterHeader", () => {
     );
 
     expect(container.firstElementChild?.className).toContain("h-12");
+    expect(container.firstElementChild?.className).toContain("pb-0.5");
   });
 
   it("marks the spacer and action strip as draggable", () => {

apps/desktop/src/session/components/outer-header/index.tsx

@@ -78,7 +78,9 @@ export function OuterHeader({
       data-tauri-drag-region
       className={cn([
         "relative flex w-full items-center gap-[2px]",
-        "h-12",
+        // 46px content box centers the 28px controls at 23px, matching the
+        // sidebar toggle row (pt-[9px] + size-7).
+        "h-12 pb-0.5",
         standaloneWindow && (showWindowControlsGutter ? "pl-[76px]" : "pl-2"),
         !standaloneWindow && leftsidebar.expanded && "pl-2",
         showSidebarTimelineHeaderGutter &&