From 2517b3a09656fdef33d2dcd9991f4a10bc9833b7 Mon Sep 17 00:00:00 2001 From: gsxdsm Date: Mon, 22 Jun 2026 11:52:32 -0700 Subject: [PATCH] feat(dashboard): equal header heights (--view-header-min-height) across all left-sidebar views + missed views Add --view-header-min-height (~61px = space-lg*2 + 28px btn-sm row + 1px divider) and apply via ViewHeader + the bespoke Mission/Planning headers so action-bearing and title-only headers are the same height. Bring the views the sweep missed to canonical: Automations (.automations-embedded-header), Import Tasks (.github-import-modal__embedded-header), Goals (header via ViewHeader + fix main-pane inset so cards align under the title + fill height). Compound Engineering + Research inherit the token automatically. Co-Authored-By: Claude Opus 4.8 (1M context) --- .../app/components/GitHubImportModal.css | 32 ++++++++++++++++--- .../dashboard/app/components/GoalsView.css | 8 ++++- .../app/components/MissionManager.css | 8 ++++- .../app/components/PlanningModeModal.css | 4 +++ .../dashboard/app/components/ScriptsModal.css | 27 +++++++++++++++- .../dashboard/app/components/ViewHeader.css | 6 ++++ packages/dashboard/app/styles.css | 6 ++++ 7 files changed, 84 insertions(+), 7 deletions(-) diff --git a/packages/dashboard/app/components/GitHubImportModal.css b/packages/dashboard/app/components/GitHubImportModal.css index 751225c17f..deda6a1b47 100644 --- a/packages/dashboard/app/components/GitHubImportModal.css +++ b/packages/dashboard/app/components/GitHubImportModal.css @@ -1423,7 +1423,13 @@ The embedded root is a plain flow box that fills the host; the inner shell sheds min-height: 0; } +/* +FNXC:ViewHeader 2026-06-23-04:15: +Embedded root drops its uniform --space-lg padding so the header can span edge-to-edge like the canonical ViewHeader; the body re-applies a horizontal inset below. This keeps the resizable list/preview/comments work intact (only the outer padding moves to the body). +*/ .github-import-modal.github-import-modal--embedded { + display: flex; + flex-direction: column; width: 100%; height: 100%; max-width: none; @@ -1434,28 +1440,46 @@ The embedded root is a plain flow box that fills the host; the inner shell sheds box-shadow: none; border-radius: 0; resize: none; - padding: var(--space-lg); + padding: 0; } /* -FNXC:RightDockEmbedding 2026-06-22-00:40: -Import Tasks embedded header reads like Command Center (cc-header/cc-title): a plain title row with the GitHub logo and the shared 1.125rem embedded-title font, no modal-header bar/background/border. +FNXC:ViewHeader 2026-06-23-04:15: +Import Tasks embedded header now adopts the canonical ViewHeader chrome — edge-to-edge --surface bg, one border-bottom divider, --space-lg/--space-xl padding, and the shared --view-header-min-height (≈61px border-box) — so it matches Agents/Mailbox/Missions/Automations height + padding exactly. (Previously a plain padding-bottom title row with no surface/divider/min-height.) */ .github-import-modal__embedded-header { + box-sizing: border-box; display: flex; flex-shrink: 0; align-items: center; justify-content: space-between; gap: var(--space-md); - padding-bottom: var(--space-md); + min-height: var(--view-header-min-height); + padding: var(--space-lg) var(--space-xl); + background: var(--surface); + border-bottom: 1px solid var(--border); } .github-import-modal__embedded-title { display: flex; align-items: center; gap: var(--space-sm); + min-width: 0; margin: 0; font-size: 1.125rem; + font-weight: 600; + color: var(--text); +} + +/* FNXC:ViewHeader 2026-06-23-04:15: Canonical --todo leading-icon tint at size 20, matching every other view header. */ +.github-import-modal__embedded-title svg { + flex-shrink: 0; + color: var(--todo); +} + +/* Body re-applies the horizontal + bottom inset the now-edge-to-edge header no longer provides. */ +.github-import-modal--embedded .github-import-modal__body { + padding: var(--space-lg) var(--space-xl) var(--space-lg); } /* diff --git a/packages/dashboard/app/components/GoalsView.css b/packages/dashboard/app/components/GoalsView.css index cf58a17e05..7f5701c526 100644 --- a/packages/dashboard/app/components/GoalsView.css +++ b/packages/dashboard/app/components/GoalsView.css @@ -18,12 +18,18 @@ The title row now comes from the shared .view-header (which supplies the --space -webkit-overflow-scrolling: touch; } +/* +FNXC:ViewHeader 2026-06-23-04:15: +Body inset must equal the shared ViewHeader's horizontal padding (var(--space-xl)) so Goals cards align flush under the header title instead of sitting 8px to its left — the prior var(--space-lg) inset left the main pane visibly misaligned with the header. Add a top inset so the first card clears the header divider; flex:1 lets the content fill the scroll viewport so short lists don't leave the pane looking truncated. +*/ .goals-view__content { display: flex; + flex: 1 1 auto; flex-direction: column; gap: var(--space-lg); min-width: 0; - padding: 0 var(--space-lg) var(--space-lg); + min-height: 0; + padding: var(--space-lg) var(--space-xl) var(--space-xl); } .goals-count { diff --git a/packages/dashboard/app/components/MissionManager.css b/packages/dashboard/app/components/MissionManager.css index 694bba2770..fb90ab2b97 100644 --- a/packages/dashboard/app/components/MissionManager.css +++ b/packages/dashboard/app/components/MissionManager.css @@ -58,17 +58,23 @@ FNXC:MissionManager 2026-06-23-03:00: Exactly ONE divider sits under the Missions header — this header's own border-bottom. The scroll body, split, sidebar, and detail-pane add NO border-top, so there is no doubled/extra divider line below the header (verified in DOM: only this element carries a horizontal border in the header region). Planning's embedded header is matched to this single-divider treatment. Do not add a second border-top to the body/split/sidebar. */ +/* +FNXC:ViewHeader 2026-06-23-04:15: +Pin the canonical --view-header-min-height (≈61px border-box) + box-sizing so the Missions header matches the shared ViewHeader height exactly whether or not its right-side controls are present. +*/ .mission-manager__header { + box-sizing: border-box; flex-shrink: 0; display: flex; align-items: center; justify-content: space-between; + min-height: var(--view-header-min-height); padding: var(--space-md) var(--space-lg); border-bottom: 1px solid var(--border); background: color-mix(in srgb, var(--bg) 10%, transparent); } -/* Inline mode header - matches agents-view-header styling */ +/* Inline mode header - matches agents-view-header styling (canonical ViewHeader padding). */ .mission-manager__header--inline { background: var(--surface); padding: var(--space-lg) var(--space-xl); diff --git a/packages/dashboard/app/components/PlanningModeModal.css b/packages/dashboard/app/components/PlanningModeModal.css index 08bcaed517..858b5bba8a 100644 --- a/packages/dashboard/app/components/PlanningModeModal.css +++ b/packages/dashboard/app/components/PlanningModeModal.css @@ -102,7 +102,11 @@ The embedded planning header must be a visual SIBLING of MissionManager's inline - icon: var(--todo) tint + flex-shrink:0, identical to .mission-manager__header-icon (the shared icon-triage tint was a different brown, so it is overridden here). - gap icon<->title: var(--space-sm) (= 8px), identical to .mission-manager__header-title. Scoped to the embedded planning header so the shared .detail-title-row (TaskDetailModal) keeps its own 10px gap. */ +/* FNXC:ViewHeader 2026-06-23-04:15: Pin canonical --view-header-min-height (≈61px border-box) + box-sizing + vertical centering so embedded Planning's header matches the shared ViewHeader/Missions height exactly. */ .planning-modal--embedded .modal-header--embedded { + box-sizing: border-box; + align-items: center; + min-height: var(--view-header-min-height); padding: var(--space-lg) var(--space-xl); background: var(--surface); border-bottom: 1px solid var(--border); diff --git a/packages/dashboard/app/components/ScriptsModal.css b/packages/dashboard/app/components/ScriptsModal.css index d57a674240..13ad3b0ecf 100644 --- a/packages/dashboard/app/components/ScriptsModal.css +++ b/packages/dashboard/app/components/ScriptsModal.css @@ -1224,12 +1224,37 @@ when supported, falling back to a min-width media breakpoint, that collapses to gap: var(--space-lg); min-height: 0; inline-size: 100%; - padding: var(--space-lg); /* Enable container-query-driven two-pane breakpoint scoped to the view's own width, not the viewport. */ container-type: inline-size; overflow-y: auto; } +/* +FNXC:ViewHeader 2026-06-23-04:15: +Bring the embedded Automations header to the canonical ViewHeader treatment: edge-to-edge --surface bg with one border-bottom divider, --space-lg/--space-xl padding, and the shared --view-header-min-height (≈61px border-box) so it matches Agents/Mailbox/Missions exactly. The body rows below carry the horizontal --space-xl inset + a bottom inset (the view itself drops its uniform padding so the header can span edge-to-edge). +*/ +.automations-embedded-header.cc-header { + box-sizing: border-box; + min-height: var(--view-header-min-height); + padding: var(--space-lg) var(--space-xl); + background: var(--surface); + border-bottom: 1px solid var(--border); +} + +/* Canonical --todo leading-icon tint (override Command Center's icon-triage brown) at size 20. */ +.automations-embedded-header .cc-title svg { + color: var(--todo); +} + +/* Body rows keep the --space-xl horizontal inset + bottom inset that the now-edge-to-edge header no longer supplies. */ +.automations-embedded-view > :not(.automations-embedded-header) { + margin-inline: var(--space-xl); +} + +.automations-embedded-view > :last-child:not(.automations-embedded-header) { + margin-bottom: var(--space-lg); +} + /* Two-pane body: single column by default (narrow); two columns when the container is wide enough. */ .automations-two-pane { display: grid; diff --git a/packages/dashboard/app/components/ViewHeader.css b/packages/dashboard/app/components/ViewHeader.css index 8f73165fad..55f2ca832b 100644 --- a/packages/dashboard/app/components/ViewHeader.css +++ b/packages/dashboard/app/components/ViewHeader.css @@ -5,11 +5,17 @@ Shared main-content view header, modeled after Command Center (.cc-header / .cc- FNXC:ViewHeader 2026-06-23-03:45: ViewHeader is now THE canonical top header for every left-sidebar/main-content view. Its defaults match the reference already implemented by Missions (.mission-manager__header--inline) and Agents (.agents-view .view-header): container padding var(--space-lg) var(--space-xl), background var(--surface), a single border-bottom divider, flex-shrink:0, and a --todo-colored leading icon at size 20. The title is 1.125rem/600/var(--text) with a var(--space-sm) icon-title gap. The actions cluster is pushed right with margin-left:auto so refresh/new/filter buttons right-align consistently across views; those buttons should use the shared `btn btn-sm` sizing. Per-view headers must adopt ViewHeader with NO divergent overrides so navigating between any two views shows a pixel-consistent header (same height, icon color/size, title metrics, padding, divider, and button sizing). The Agents scoped override (.agents-view .view-header) is now redundant and removed; these defaults supply that chrome directly. */ +/* +FNXC:ViewHeader 2026-06-23-04:15: +Pin a shared min-height (--view-header-min-height ≈ 61px border-box) so headers WITH btn-sm actions and title-only headers render the SAME height. box-sizing:border-box keeps padding+border inside the pinned height; align-items:center vertically centers the title/actions row within it. +*/ .view-header { + box-sizing: border-box; display: flex; flex-shrink: 0; align-items: center; gap: var(--space-sm); + min-height: var(--view-header-min-height); padding: var(--space-lg) var(--space-xl); background: var(--surface); border-bottom: 1px solid var(--border); diff --git a/packages/dashboard/app/styles.css b/packages/dashboard/app/styles.css index 16b48e5c72..44c3faf8e9 100644 --- a/packages/dashboard/app/styles.css +++ b/packages/dashboard/app/styles.css @@ -147,6 +147,12 @@ html { --card-padding: 10px 12px; --modal-padding: var(--space-lg) 20px; --header-padding: var(--space-md) var(--space-xl); + /* + FNXC:ViewHeader 2026-06-23-04:15: + Canonical main-content view-header height. Headers with btn-sm action buttons render taller (~61px border-box) than title-only headers (~54px), so every canonical header (ViewHeader, Missions, embedded Planning, Goals, Automations, Import Tasks) pins this min-height to stay pixel-identical regardless of whether actions are present. + Derivation (border-box): vertical padding var(--space-lg)*2 = 32px + 1px bottom divider + ~28px tallest content row (btn-sm: 4+4 padding + 1+1 border + ~18px 12px-font line) = 61px. + */ + --view-header-min-height: calc(var(--space-lg) * 2 + 28px + 1px); --column-gap: var(--space-md); --board-padding: var(--space-lg) var(--space-xl); --icon-size-md: 16px;