fusion/packages/dashboard/app/components/DockFilesView.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);
  border-bottom: 1px solid var(--border);
  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-sm);
  font-weight: 600;
  color: var(--text);
}

.dock-files-viewer__back,
.dock-files-viewer__popout {
  flex: 0 0 auto;
}

.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-sm);
  color: var(--text-muted);
}

.dock-files-viewer__status--error {
  color: var(--danger, 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 divider against the viewer. */
  .dock-files-view__tree {
    display: flex;
    flex: 0 0 clamp(220px, 32%, 360px);
    min-width: 0;
    overflow: auto;
    border-right: 1px solid var(--border);
  }

  /* 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, 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: 1px solid var(--border);
}

.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;
}