authorgravatar for maria@kuuro.netmaria <maria@kuuro.net> 2026-10-08 03:18:24-03:00
committergravatar for noreply@github.comGitHub <noreply@github.com> 2026-10-08 03:18:24-03:00
log73e097b8c86000ddc4b38926ba86e1595109d78e
tree05f4d37a0bc8d54b78462fbce033ff19c018563c
parent97a65a3121c11801a877897928efc51ef40fa49f
signature Signed by PGP key B5690EEEBB952194

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>

2 files changed, 6 insertions(+), 5 deletions(-)

apps/web/src/components/WorkspacePageHeader.tsx+5-2
...@@ -3,7 +3,10 @@ import type { ComponentPropsWithoutRef } from "react";...@@ -3,7 +3,10 @@ import type { ComponentPropsWithoutRef } from "react";
3import { cn } from "../lib/utils";3import { cn } from "../lib/utils";
4import { COLLAPSED_SIDEBAR_TITLEBAR_INSET_CLASS } from "../workspaceTitlebar";4import { COLLAPSED_SIDEBAR_TITLEBAR_INSET_CLASS } from "../workspaceTitlebar";
55
6/** Shared workspace top-bar geometry. */6/**
7 * Shared workspace top-bar geometry. The height is `!important` so callers cannot
8 * grow the bar and pull its content off the sidebar header's center line.
9 */
7export function WorkspacePageHeader({10export function WorkspacePageHeader({
8 electron = false,11 electron = false,
9 reserveNativeControls = electron,12 reserveNativeControls = electron,
...@@ -16,7 +19,7 @@ export function WorkspacePageHeader({...@@ -16,7 +19,7 @@ export function WorkspacePageHeader({
16 return (19 return (
17 <header20 <header
18 className={cn(21 className={cn(
19 "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",22 "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",
20 electron && "drag-region",23 electron && "drag-region",
21 reserveNativeControls && "wco:pr-(--workspace-native-controls-inset)",24 reserveNativeControls && "wco:pr-(--workspace-native-controls-inset)",
22 COLLAPSED_SIDEBAR_TITLEBAR_INSET_CLASS,25 COLLAPSED_SIDEBAR_TITLEBAR_INSET_CLASS,
apps/web/src/components/usage/UsagePage.tsx+1-3
...@@ -467,9 +467,7 @@ export function UsagePage() {...@@ -467,9 +467,7 @@ export function UsagePage() {
467 return (467 return (
468 <SidebarInset className="h-dvh min-h-0 overflow-hidden overscroll-y-none isolate">468 <SidebarInset className="h-dvh min-h-0 overflow-hidden overscroll-y-none isolate">
469 <div className="flex min-h-0 min-w-0 flex-1 flex-col bg-background text-foreground">469 <div className="flex min-h-0 min-w-0 flex-1 flex-col bg-background text-foreground">
470 <WorkspacePageHeader electron={isElectron} className="h-auto">470 <WorkspacePageHeader electron={isElectron}>{topbarContent}</WorkspacePageHeader>
471 {topbarContent}
472 </WorkspacePageHeader>
473471
474 <ScrollArea className="min-h-0 flex-1">472 <ScrollArea className="min-h-0 flex-1">
475 <WorkspacePageContainer width="wide">473 <WorkspacePageContainer width="wide">