b293525751
Fixes ~19 deterministic dashboard test failures pre-existing on origin/main (non-blocking full-suite lane). Mix of real product fixes and stale-test reconciliation; no appeasement (no widened timeouts, skips, or weakened assertions). Product CSS fixes (real regressions the guards caught): - Info toast contrast: shadcn-custom light theme had white-on-#0284c7 (4.10, below WCAG AA 4.5); enrolled it in the light-mode dark-text correction. - 27 undefined CSS token references (typos/foreign tokens) renamed to canonical defined tokens; defined the genuinely-intended --border-strong and --right-dock-min/max-width. - Raw rgba() box-shadow fallback tokenized to color-mix; dev-server mobile header split into its own responsive rule. Stale tests reconciled with intentional product changes: - workflowColumns graduated to always-on (board-workflows unit test). - workflow optional-steps source re-pointed to v2 optional-group nodes. - command-center pricing docs (one doc gap filled: openai-codex:* keying). - SetupWizardModal added detectWorkspace + workspaceMode/taskPrefix payload. - board-mobile listener-count assertion → unmount no-throw behavior. - CommandCenterControls / ThemeSelector: default theme relabeled "Fusion Legacy". - ProjectOverview / WorkflowNodeEditor: header divider intentionally removed. Co-Authored-By: Claude Opus 4.8 (1M context) <noreply@anthropic.com>
206 lines
7.6 KiB
CSS
206 lines
7.6 KiB
CSS
/*
|
|
FNXC:RightDockFiles 2026-06-22-00:00:
|
|
The inline Files viewer fills the right-dock body and scrolls internally so the read-only FileEditor never overflows the dock.
|
|
The header is a compact bar: BACK on the left, a truncating file name in the middle, POP-OUT on the right.
|
|
|
|
FNXC:Files 2026-06-22-00:00:
|
|
Responsive single-panel vs two-pane layout driven entirely by a CSS container query.
|
|
The root is a query container (container-type: inline-size, container-name: dock-files). Both the tree pane (.dock-files-view__tree) and the viewer pane (.dock-files-view__viewer) are always rendered in the DOM; CSS decides visibility per container width.
|
|
- NARROW (default, in the dock): single-panel stack. The tree fills the root. When a file is selected (root [data-selected="true"]) the viewer pane covers the stack and the tree is hidden; BACK returns to the tree.
|
|
- WIDE (>=640px, the RightDockExpandModal pop-out): two-pane side-by-side. Tree pinned left (clamped width, scrollable), viewer flex:1 on the right (scrollable). Both always visible regardless of data-selected; BACK is hidden because the tree never disappears.
|
|
|
|
FNXC:Files 2026-06-22-01:00:
|
|
Breakpoint lowered 720px -> 640px and root forced to width:100%. The expand modal body has horizontal padding/overflow, so the root's content-box landed just under 720px at common laptop widths and the query never fired, leaving the pop-out stacked. 640px triggers two-pane for any realistic pop-out while staying above the narrow dock width.
|
|
|
|
FNXC:RightDockFiles 2026-06-22-15:00:
|
|
DETERMINISTIC replacement for the container query in the pop-out. The @container rule kept missing inside RightDockExpandModal (the root content-box measured under the breakpoint despite width:100%, because the modal body's flex/overflow context never gave the root the expected inline-size), so the pop-out stayed stacked. The expand host now passes `layout="two-pane"` -> `.dock-files-view--two-pane`, which forces the LEFT|RIGHT split with NO container-query gate. The @container path below is kept ONLY for the default `auto` (dock) layout.
|
|
*/
|
|
.dock-files-view {
|
|
display: flex;
|
|
flex-direction: column;
|
|
min-height: 0;
|
|
height: 100%;
|
|
/*
|
|
FNXC:Files 2026-06-22-01:00:
|
|
The root must fill its host (right-dock body OR the wide RightDockExpandModal body) so the inline-size query
|
|
measures the true available width. Without width:100% the flex root only measured its shrunk content width, so
|
|
the @container breakpoint never fired in the expand modal and the layout stayed stacked. Pair with width:100%.
|
|
*/
|
|
width: 100%;
|
|
/* FNXC:RightDockFiles 2026-06-22-12:00: establish the query container so child panes can respond to the dock vs expand-modal width. */
|
|
container-type: inline-size;
|
|
container-name: dock-files;
|
|
}
|
|
|
|
/* FNXC:RightDockFiles 2026-06-22-12:00: NARROW default: tree fills the root as the single panel. */
|
|
.dock-files-view__tree {
|
|
display: flex;
|
|
flex-direction: column;
|
|
min-height: 0;
|
|
flex: 1 1 auto;
|
|
overflow: hidden;
|
|
}
|
|
|
|
/*
|
|
FNXC:RightDockFiles 2026-06-22-12:00: NARROW default: viewer is the stacked second panel.
|
|
Hidden until a file is selected; when selected it overlays the tree as the single visible panel (the tree is hidden below).
|
|
*/
|
|
.dock-files-view__viewer {
|
|
display: none;
|
|
flex-direction: column;
|
|
min-height: 0;
|
|
flex: 1 1 auto;
|
|
overflow: hidden;
|
|
}
|
|
|
|
.dock-files-view[data-selected="true"] .dock-files-view__tree {
|
|
display: none;
|
|
}
|
|
|
|
.dock-files-view[data-selected="true"] .dock-files-view__viewer {
|
|
display: flex;
|
|
}
|
|
|
|
.dock-files-viewer__header {
|
|
display: flex;
|
|
align-items: center;
|
|
gap: var(--space-xs);
|
|
padding: var(--space-xs) var(--space-sm);
|
|
/*
|
|
FNXC:RightDockChrome 2026-06-23-19:10:
|
|
Files is the default right-sidebar view, so its own header and tree/viewer split follow the right-dock divider token contract: invisible by default, theme-restorable via --right-dock-view-divider-color.
|
|
*/
|
|
border-bottom: var(--chrome-divider-width, 1px) solid var(--right-dock-view-divider-color, transparent);
|
|
flex: 0 0 auto;
|
|
}
|
|
|
|
.dock-files-viewer__title {
|
|
flex: 1 1 auto;
|
|
min-width: 0;
|
|
overflow: hidden;
|
|
text-overflow: ellipsis;
|
|
white-space: nowrap;
|
|
font-size: var(--font-size-xs);
|
|
font-weight: 600;
|
|
color: var(--text);
|
|
}
|
|
|
|
.dock-files-viewer__back,
|
|
.dock-files-viewer__popout,
|
|
.dock-files-viewer__save {
|
|
flex: 0 0 auto;
|
|
}
|
|
|
|
.dock-files-viewer__save {
|
|
gap: var(--space-xs);
|
|
white-space: nowrap;
|
|
}
|
|
|
|
.dock-files-viewer__body {
|
|
flex: 1 1 auto;
|
|
min-height: 0;
|
|
overflow: auto;
|
|
display: flex;
|
|
flex-direction: column;
|
|
}
|
|
|
|
.dock-files-viewer__body .file-editor-container {
|
|
flex: 1 1 auto;
|
|
min-height: 0;
|
|
}
|
|
|
|
.dock-files-viewer__status {
|
|
padding: var(--space-md);
|
|
font-size: var(--font-size-xs);
|
|
color: var(--text-muted);
|
|
}
|
|
|
|
.dock-files-viewer__status--error {
|
|
color: var(--color-error, var(--text));
|
|
}
|
|
|
|
/* FNXC:RightDockFiles 2026-06-22-12:00: empty-state placeholder shown in the wide right pane until a file is selected. */
|
|
.dock-files-viewer__empty {
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
flex: 1 1 auto;
|
|
text-align: center;
|
|
}
|
|
|
|
/*
|
|
FNXC:Files 2026-06-22-01:00:
|
|
WIDE container (>=640px): two-pane side-by-side. Activated when DockFilesView is rendered in the wide RightDockExpandModal.
|
|
Both panes are always visible; data-selected no longer toggles visibility here.
|
|
*/
|
|
@container dock-files (min-width: 640px) {
|
|
.dock-files-view {
|
|
flex-direction: row;
|
|
}
|
|
|
|
/* Tree pinned left: clamped, scrollable, with a tokenized divider against the viewer. */
|
|
.dock-files-view__tree {
|
|
display: flex;
|
|
flex: 0 0 clamp(220px, 32%, 360px);
|
|
min-width: 0;
|
|
overflow: auto;
|
|
border-right: var(--chrome-divider-width, 1px) solid var(--right-dock-view-divider-color, transparent);
|
|
}
|
|
|
|
/* Viewer fills the remaining width; always visible (empty-state until a file is selected). */
|
|
.dock-files-view__viewer,
|
|
.dock-files-view[data-selected="true"] .dock-files-view__viewer {
|
|
display: flex;
|
|
flex: 1 1 auto;
|
|
min-width: 0;
|
|
overflow: hidden;
|
|
}
|
|
|
|
.dock-files-view[data-selected="true"] .dock-files-view__tree {
|
|
display: flex;
|
|
}
|
|
|
|
/* BACK is meaningless when the tree is always visible. */
|
|
.dock-files-view__viewer .dock-files-viewer__back {
|
|
display: none;
|
|
}
|
|
}
|
|
|
|
/*
|
|
FNXC:RightDockFiles 2026-06-22-15:00:
|
|
DETERMINISTIC two-pane layout for the RightDockExpandModal pop-out. Driven by the `.dock-files-view--two-pane` modifier (DockFilesView layout="two-pane"), NOT by any @container width, so it always renders LEFT|RIGHT regardless of how the modal body measures the root's inline-size. Mirrors the @container rules above but unconditionally.
|
|
- Tree pinned LEFT: clamped/resizable-feel fixed width, scrolls independently, tokenized divider against the viewer.
|
|
- Viewer fills the RIGHT, scrolls independently, empty-state until a file is selected.
|
|
- data-selected never toggles pane visibility here (both panes always visible); BACK is hidden because the tree never disappears.
|
|
*/
|
|
.dock-files-view--two-pane {
|
|
flex-direction: row;
|
|
}
|
|
|
|
.dock-files-view--two-pane .dock-files-view__tree {
|
|
display: flex;
|
|
flex: 0 0 clamp(220px, 32%, 360px);
|
|
min-width: 0;
|
|
min-height: 0;
|
|
overflow: auto;
|
|
border-right: var(--chrome-divider-width, 1px) solid var(--right-dock-view-divider-color, transparent);
|
|
}
|
|
|
|
.dock-files-view--two-pane .dock-files-view__viewer,
|
|
.dock-files-view--two-pane[data-selected="true"] .dock-files-view__viewer {
|
|
display: flex;
|
|
flex: 1 1 auto;
|
|
min-width: 0;
|
|
min-height: 0;
|
|
overflow: hidden;
|
|
}
|
|
|
|
.dock-files-view--two-pane[data-selected="true"] .dock-files-view__tree {
|
|
display: flex;
|
|
}
|
|
|
|
/* BACK is meaningless when the tree is always visible in the two-pane split. */
|
|
.dock-files-view--two-pane .dock-files-view__viewer .dock-files-viewer__back {
|
|
display: none;
|
|
}
|