From f7599cb720382d6f85349b02aa44209ff67cf74a Mon Sep 17 00:00:00 2001 From: gsxdsm Date: Mon, 22 Jun 2026 12:05:44 -0700 Subject: [PATCH] fix(dashboard): Planning panes fill to bottom; Goals card layout; Automations/Goals header margin - Planning: .modal max-height:80vh capped the embedded panel ~49px short; .planning-view .planning-modal--embedded { max-height:none } (higher specificity) lets sidebar + detail fill to the view bottom. - Goals: .goals-card-main had no flex so a long description grew to content width and starved the equal-weight Linked Missions column to ~13px; flex:1 + min-width:0 rebalances them. - Small margin below the Automations + Goals headers so content clears the divider. Co-Authored-By: Claude Opus 4.8 (1M context) --- packages/dashboard/app/components/GoalsView.css | 10 +++++++++- .../dashboard/app/components/PlanningModeModal.css | 5 +++++ packages/dashboard/app/components/ScriptsModal.css | 8 ++++++++ 3 files changed, 22 insertions(+), 1 deletion(-) diff --git a/packages/dashboard/app/components/GoalsView.css b/packages/dashboard/app/components/GoalsView.css index 7f5701c526..99bf87ffa6 100644 --- a/packages/dashboard/app/components/GoalsView.css +++ b/packages/dashboard/app/components/GoalsView.css @@ -21,6 +21,9 @@ The title row now comes from the shared .view-header (which supplies the --space /* 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. + +FNXC:Goals 2026-06-23-04:45: +Bump the top padding from var(--space-lg) to var(--space-xl) so the first card/warning gets clear breathing room below the header divider instead of reading flush against it (matches the small top-margin breathing room added to the embedded Automations body below its edge-to-edge header). */ .goals-view__content { display: flex; @@ -29,7 +32,7 @@ Body inset must equal the shared ViewHeader's horizontal padding (var(--space-xl gap: var(--space-lg); min-width: 0; min-height: 0; - padding: var(--space-lg) var(--space-xl) var(--space-xl); + padding: var(--space-xl) var(--space-xl) var(--space-xl); } .goals-count { @@ -124,7 +127,12 @@ FN-6828 keeps Goals action controls and linked-mission panels at intrinsic heigh border-color: color-mix(in srgb, var(--text-muted) 25%, transparent); } +/* +FNXC:Goals 2026-06-23-04:45: +The goal card is a 3-column flex row: .goals-card-main | .goals-card-actions | .goals-linked-missions. .goals-card-main previously had only min-width:0 (no flex), so it defaulted to flex:0 1 auto and sized to its content. A long markdown description made main grow to its full intrinsic width (measured 819px in a 1024px card), starving the equal-weight .goals-linked-missions (flex:1) down to ~13px — the linked-missions column collapsed and read as "messed up". Give main flex:1 so it shares row width with the linked-missions column (each ~50%) and both stay legible regardless of description length. min-width:0 keeps the markdown body from forcing overflow. +*/ .goals-card-main { + flex: 1; min-width: 0; } diff --git a/packages/dashboard/app/components/PlanningModeModal.css b/packages/dashboard/app/components/PlanningModeModal.css index 858b5bba8a..91f5a122e7 100644 --- a/packages/dashboard/app/components/PlanningModeModal.css +++ b/packages/dashboard/app/components/PlanningModeModal.css @@ -91,6 +91,11 @@ Embedded planning must blend into the main content like Command Center: no panel border: none; border-radius: 0; background: transparent; + /* + FNXC:Planning 2026-06-23-04:45: + The base .modal sets max-height:80vh; that wins over the equal-specificity .planning-modal--embedded { max-height:none } by source order, so the embedded panel was capped at 80vh (≈576px) and stopped ~49px short of the .planning-view bottom (measured: embedded bottom 635 vs view bottom 684). Re-assert max-height:none here at higher specificity (.planning-view .planning-modal--embedded) so the embedded shell — and therefore the sidebar list+footer and the detail pane below it — fills the full main-content height with no bottom gap, in both the initial (no-session) and active-session states. + */ + max-height: none; } /* diff --git a/packages/dashboard/app/components/ScriptsModal.css b/packages/dashboard/app/components/ScriptsModal.css index 13ad3b0ecf..1bbce840a6 100644 --- a/packages/dashboard/app/components/ScriptsModal.css +++ b/packages/dashboard/app/components/ScriptsModal.css @@ -1251,6 +1251,14 @@ Bring the embedded Automations header to the canonical ViewHeader treatment: edg margin-inline: var(--space-xl); } +/* +FNXC:Automations 2026-06-23-04:45: +With the header now edge-to-edge (its own border-bottom divider), the first body row sat too close to the divider. Add a small top margin on the first non-header child so the body content gets breathing room below the divider instead of reading flush against it. Scoped to the first body row only (the flex gap handles spacing between subsequent rows). +*/ +.automations-embedded-header + :not(.automations-embedded-header) { + margin-top: var(--space-sm); +} + .automations-embedded-view > :last-child:not(.automations-embedded-header) { margin-bottom: var(--space-lg); }