From 73e097b8c86000ddc4b38926ba86e1595109d78e Mon Sep 17 00:00:00 2001
From: maria <maria@kuuro.net>
Date: Thu, 8 Oct 2026 03:18:24 -0300
Subject: [PATCH] fix(web): workspace page headers can no longer grow past the
 top-bar height (#17086)

Co-authored-by: maria-rcks <254055478+maria-rcks@users.noreply.github.com>
---
 apps/web/src/components/WorkspacePageHeader.tsx | 7 +++++--
 apps/web/src/components/usage/UsagePage.tsx     | 4 +---
 2 files changed, 6 insertions(+), 5 deletions(-)

diff --git a/apps/web/src/components/WorkspacePageHeader.tsx b/apps/web/src/components/WorkspacePageHeader.tsx
index a484b4497539507e676ebc48d8c255197218b3e9..0fb53585d1b3b71ddc51a19669169438e858ceb0 100644
--- a/apps/web/src/components/WorkspacePageHeader.tsx
+++ b/apps/web/src/components/WorkspacePageHeader.tsx
@@ -3,7 +3,10 @@ import type { ComponentPropsWithoutRef } from "react";
 import { cn } from "../lib/utils";
 import { COLLAPSED_SIDEBAR_TITLEBAR_INSET_CLASS } from "../workspaceTitlebar";
 
-/** Shared workspace top-bar geometry. */
+/**
+ * Shared workspace top-bar geometry. The height is `!important` so callers cannot
+ * grow the bar and pull its content off the sidebar header's center line.
+ */
 export function WorkspacePageHeader({
   electron = false,
   reserveNativeControls = electron,
@@ -16,7 +19,7 @@ export function WorkspacePageHeader({
   return (
     <header
       className={cn(
-        "flex h-[var(--workspace-topbar-height)] min-h-[var(--workspace-topbar-height)] shrink-0 items-center gap-3 pl-(--workspace-gutter-start) pr-(--workspace-gutter-end) [[data-panel-animations=true]_&]:motion-safe:transition-[padding-left,padding-right] [[data-panel-animations=true]_&]:motion-safe:duration-(--panel-animation-duration) [[data-panel-animations=true]_&]:motion-safe:ease-out",
+        "flex h-[var(--workspace-topbar-height)]! min-h-[var(--workspace-topbar-height)]! max-h-[var(--workspace-topbar-height)]! shrink-0 items-center gap-3 pl-(--workspace-gutter-start) pr-(--workspace-gutter-end) [[data-panel-animations=true]_&]:motion-safe:transition-[padding-left,padding-right] [[data-panel-animations=true]_&]:motion-safe:duration-(--panel-animation-duration) [[data-panel-animations=true]_&]:motion-safe:ease-out",
         electron && "drag-region",
         reserveNativeControls && "wco:pr-(--workspace-native-controls-inset)",
         COLLAPSED_SIDEBAR_TITLEBAR_INSET_CLASS,
diff --git a/apps/web/src/components/usage/UsagePage.tsx b/apps/web/src/components/usage/UsagePage.tsx
index a7a1be01188d13eef537e5add3bd1b7d9f63c73f..eef087395dc450bc313750379c482f9a875b4df1 100644
--- a/apps/web/src/components/usage/UsagePage.tsx
+++ b/apps/web/src/components/usage/UsagePage.tsx
@@ -467,9 +467,7 @@ export function UsagePage() {
   return (
     <SidebarInset className="h-dvh min-h-0 overflow-hidden overscroll-y-none isolate">
       <div className="flex min-h-0 min-w-0 flex-1 flex-col bg-background text-foreground">
-        <WorkspacePageHeader electron={isElectron} className="h-auto">
-          {topbarContent}
-        </WorkspacePageHeader>
+        <WorkspacePageHeader electron={isElectron}>{topbarContent}</WorkspacePageHeader>
 
         <ScrollArea className="min-h-0 flex-1">
           <WorkspacePageContainer width="wide">
-- 
2.54.0