root/fusion
1
0
Fork 0
Code Issues Pull Requests Actions 1 Packages Projects Releases Wiki Activity

feat(dashboard): equal header heights (--view-header-min-height) across all left-sidebar views + missed views

Browse Source 
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) <noreply@anthropic.com>
This commit is contained in:
gsxdsm
2026-06-22 11:52:32 -07:00
parent 84d7498235
commit 2517b3a096
7 changed files with 84 additions and 7 deletions
Download Patch File Download Diff File Expand all files Collapse all files

32
packages/dashboard/app/components/GitHubImportModal.css
View File

@@ -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);
}
/*

8
packages/dashboard/app/components/GoalsView.css
View File

@@ -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 {

8
packages/dashboard/app/components/MissionManager.css
View File

@@ -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);

4
packages/dashboard/app/components/PlanningModeModal.css
View File

@@ -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);

27
packages/dashboard/app/components/ScriptsModal.css
View File

@@ -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;

6
packages/dashboard/app/components/ViewHeader.css
View File

@@ -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);

6
packages/dashboard/app/styles.css
View File

@@ -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;