fix(tasks): align Tasks-page header with sidebar nav row (#1443)

Two related top-band issues:

1. Non-workspace view: Tasks page used pt-3 above its X/source-icons row,
   placing the cluster's center 6px below the sidebar "Tasks" nav row's
   center. Drop to pt-1.5 so both rows center on the same baseline.

2. Workspace view: the strip TaskPage renders to replace the full-width
   titlebar was 42px, but PR #1356 standardized titlebar/titlebar-left/
   right-sidebar header at 36px. Match that with h-9 so the band is
   uniform across columns when a worktree is active.

Co-authored-by: Orca <help@stably.ai>
This commit is contained in:
Jinjing 2026-05-05 11:37:08 -07:00 committed by GitHub
parent 5ce9c3b481
commit bb8b9765e1
No known key found for this signature in database
GPG Key ID: B5690EEEBB952194
1 changed files with 10 additions and 4 deletions

View File

@ -678,7 +678,7 @@ export default function TaskPage(): React.JSX.Element {
const listLinearIssues = useAppStore((s) => s.listLinearIssues)
const checkLinearConnection = useAppStore((s) => s.checkLinearConnection)
// Why: in workspace view (a worktree is active) App.tsx hides its
// full-width titlebar, so this page renders its own 42px titlebar strip to
// full-width titlebar, so this page renders its own 36px titlebar strip to
// keep the top band continuous with the sidebar header and tab rows. When
// the sidebar is also collapsed, App.tsx floats its titlebar-left controls
// (traffic lights, sidebar toggle, agent badge) over our strip — reserve
@ -1812,7 +1812,7 @@ export default function TaskPage(): React.JSX.Element {
paint above our content and receive the click cleanly. */}
<div className="relative flex min-h-0 flex-1 flex-col">
{/* Why: in workspace view App.tsx suppresses its full-width titlebar,
so render a matching 42px strip here to keep the top band
so render a matching 36px strip here to keep the top band
continuous with the sidebar header and tab rows. When the sidebar
is collapsed, App.tsx floats its titlebar-left controls (traffic
lights, sidebar toggle, agent badge) over the top-left of this
@ -1825,7 +1825,7 @@ export default function TaskPage(): React.JSX.Element {
non-workspace mode because App.tsx already owns the top titlebar
and a second strip would produce a duplicate band. */}
{workspaceActive ? (
<div className="flex-none flex h-[42px]">
<div className="flex-none flex h-9">
{reserveCollapsedHeaderSpace ? (
// Why: the floating titlebar-left hosts real interactive chrome
// (sidebar-expand toggle, agent badge) under this segment. Both
@ -1852,7 +1852,13 @@ export default function TaskPage(): React.JSX.Element {
</div>
) : null}
<div className="mx-auto flex w-full flex-1 flex-col min-h-0 px-5 pt-3 pb-5 md:px-8 md:pt-3 md:pb-7">
{/* Why: pt-1.5 vertically centers this row's 32px icon cluster (X +
source toggles) with the sidebar's "Tasks" nav row. Sidebar Tasks
center sits 22px below the titlebar (pt-2 + py-1.5 + half size-4
icon). Matching that here needs 6px top padding above the 32px
cluster (6 + 16 = 22). The previous pt-3 placed the cluster 6px
too low, breaking the visual band across the top chrome. */}
<div className="mx-auto flex w-full flex-1 flex-col min-h-0 px-5 pt-1.5 pb-5 md:px-8 md:pt-1.5 md:pb-7">
<div className="flex-none flex flex-col gap-3">
<section className="flex flex-col gap-3">
<div className="flex flex-col gap-3">