2517b3a096
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>
56 lines
2.8 KiB
CSS
56 lines
2.8 KiB
CSS
/*
|
|
FNXC:Navigation 2026-06-22-01:00:
|
|
Shared main-content view header, modeled after Command Center (.cc-header / .cc-title). Provides the standard --space-lg side/top padding and --space-md bottom gap, an icon + 1.125rem title, and an optional right-aligned actions cluster that wraps below the title on narrow widths so the two never overlap.
|
|
|
|
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);
|
|
}
|
|
|
|
.view-header__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-03:45: Leading icon is --todo-colored at size 20 to match Missions/Agents; never let it shrink. */
|
|
.view-header__title svg {
|
|
flex-shrink: 0;
|
|
color: var(--todo);
|
|
}
|
|
|
|
.view-header__title span {
|
|
min-width: 0;
|
|
overflow: hidden;
|
|
text-overflow: ellipsis;
|
|
white-space: nowrap;
|
|
}
|
|
|
|
/* FNXC:ViewHeader 2026-06-23-03:45: Right-align the action cluster with margin-left:auto so it pins to the trailing edge consistently; btn btn-sm gives every header button the same height/padding. */
|
|
.view-header__actions {
|
|
display: flex;
|
|
align-items: center;
|
|
flex-wrap: wrap;
|
|
gap: var(--space-sm);
|
|
margin-left: auto;
|
|
}
|