a91388198b
Make the right dock a persistent far-right surface with its own collapse control. - Default the right dock to visible and preserve a collapsed rail instead of hiding it entirely.\n- Remove Header right-dock toggle props and routing so More views remains a menu and left-sidebar mode has no duplicate Header toggle.\n- Update docs, changeset, and regression tests for persistent dock behavior.\n\nFiles changed:\n .changeset/fn-6899-click-revealed-right-dock.md | 5 ++\n docs/dashboard-guide.md | 6 +-\n packages/dashboard/app/App.tsx | 1 -\n .../mobile-feature-access-regression.test.tsx | 32 ++------\n packages/dashboard/app/components/Header.tsx | 57 +++-----------\n packages/dashboard/app/components/RightDock.css | 18 +++++\n packages/dashboard/app/components/RightDock.tsx | 86 ++++++++++++----------\n .../app/components/__tests__/Header.test.tsx | 57 +++-----------\n .../app/components/__tests__/RightDock.test.tsx | 31 ++++++--\n .../app/components/useRightDockController.tsx | 4 +-\n 10 files changed, 132 insertions(+), 165 deletions(-) Fusion-Task-Id: FN-6899 Fusion-Task-Lineage: 96c4ba70-eb73-4034-8254-6a192402d905
184 lines
3.8 KiB
CSS
184 lines
3.8 KiB
CSS
/*
|
|
FNXC:Navigation 2026-06-21-00:00:
|
|
The right dock CSS uses a mobile media query as a belt-and-suspenders guard only. The authoritative mobile gate is the JS `rightDockActive` value from `useViewportMode`, which also covers phone classes that a width-only query cannot classify reliably.
|
|
*/
|
|
.right-dock {
|
|
position: relative;
|
|
display: flex;
|
|
flex: 0 0 auto;
|
|
flex-direction: column;
|
|
min-width: min(100%, var(--right-dock-min-width, calc(var(--space-2xl) * 8)));
|
|
max-width: min(100%, var(--right-dock-max-width, calc(var(--space-2xl) * 22)));
|
|
min-height: 0;
|
|
background: var(--surface);
|
|
border-left: thin solid var(--border);
|
|
color: var(--text);
|
|
box-shadow: var(--shadow-lg);
|
|
}
|
|
|
|
.right-dock--with-footer {
|
|
padding-bottom: var(--executor-footer-height);
|
|
}
|
|
|
|
.right-dock--collapsed {
|
|
width: calc(var(--space-2xl) + var(--space-sm));
|
|
min-width: calc(var(--space-2xl) + var(--space-sm));
|
|
max-width: calc(var(--space-2xl) + var(--space-sm));
|
|
}
|
|
|
|
.right-dock__resize-handle {
|
|
position: absolute;
|
|
inset-block: 0;
|
|
inset-inline-start: calc(var(--space-xs) * -1);
|
|
z-index: 2;
|
|
width: var(--space-sm);
|
|
cursor: col-resize;
|
|
touch-action: none;
|
|
}
|
|
|
|
.right-dock__resize-handle::before {
|
|
position: absolute;
|
|
inset-block: 0;
|
|
inset-inline-start: calc(var(--space-xs) - var(--btn-border-width));
|
|
width: var(--btn-border-width);
|
|
background: transparent;
|
|
content: "";
|
|
transition: background var(--transition-fast);
|
|
}
|
|
|
|
.right-dock__resize-handle:hover::before,
|
|
.right-dock__resize-handle:focus-visible::before {
|
|
background: var(--todo);
|
|
}
|
|
|
|
.right-dock__resize-handle:focus-visible {
|
|
outline: none;
|
|
}
|
|
|
|
.right-dock__toolbar {
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: space-between;
|
|
gap: var(--space-sm);
|
|
padding: var(--space-sm);
|
|
border-bottom: thin solid var(--border);
|
|
}
|
|
|
|
.right-dock--collapsed .right-dock__toolbar {
|
|
flex-direction: column;
|
|
justify-content: flex-start;
|
|
height: 100%;
|
|
}
|
|
|
|
.right-dock__tabs,
|
|
.right-dock__actions {
|
|
display: flex;
|
|
align-items: center;
|
|
gap: var(--space-xs);
|
|
min-width: 0;
|
|
}
|
|
|
|
.right-dock__tabs {
|
|
flex: 1;
|
|
overflow-x: auto;
|
|
scrollbar-width: thin;
|
|
}
|
|
|
|
.right-dock--collapsed .right-dock__tabs,
|
|
.right-dock--collapsed .right-dock__actions {
|
|
flex-direction: column;
|
|
overflow: visible;
|
|
}
|
|
|
|
.right-dock__tab {
|
|
flex-shrink: 0;
|
|
color: var(--text-muted);
|
|
}
|
|
|
|
.right-dock__tab--active,
|
|
.right-dock__tab[aria-selected="true"] {
|
|
background: var(--status-todo-bg);
|
|
color: var(--todo);
|
|
}
|
|
|
|
.right-dock__header {
|
|
display: flex;
|
|
flex-shrink: 0;
|
|
align-items: center;
|
|
gap: var(--space-sm);
|
|
padding: var(--space-sm) var(--space-md);
|
|
border-bottom: thin solid var(--border);
|
|
color: var(--text);
|
|
}
|
|
|
|
.right-dock__title {
|
|
min-width: 0;
|
|
margin: 0;
|
|
overflow: hidden;
|
|
color: inherit;
|
|
font: inherit;
|
|
font-weight: 600;
|
|
text-overflow: ellipsis;
|
|
white-space: nowrap;
|
|
}
|
|
|
|
.right-dock__body {
|
|
display: flex;
|
|
flex: 1;
|
|
min-height: 0;
|
|
min-width: 0;
|
|
overflow: auto;
|
|
}
|
|
|
|
.right-dock__body > * {
|
|
flex: 1;
|
|
min-width: 0;
|
|
}
|
|
|
|
.right-dock-expand-modal {
|
|
display: flex;
|
|
flex-direction: column;
|
|
width: min(90vw, calc(var(--space-2xl) * 36));
|
|
height: min(85vh, calc(var(--space-2xl) * 24));
|
|
min-width: min(90vw, calc(var(--space-2xl) * 12));
|
|
min-height: min(85vh, calc(var(--space-2xl) * 10));
|
|
max-width: 95vw;
|
|
max-height: 90vh;
|
|
resize: both;
|
|
overflow: hidden;
|
|
}
|
|
|
|
.right-dock-expand-modal__header,
|
|
.right-dock-expand-modal__title {
|
|
display: flex;
|
|
align-items: center;
|
|
gap: var(--space-sm);
|
|
min-width: 0;
|
|
}
|
|
|
|
.right-dock-expand-modal__title {
|
|
flex: 1;
|
|
overflow: hidden;
|
|
text-overflow: ellipsis;
|
|
white-space: nowrap;
|
|
}
|
|
|
|
.right-dock-expand-modal__body {
|
|
display: flex;
|
|
flex: 1;
|
|
min-height: 0;
|
|
min-width: 0;
|
|
overflow: auto;
|
|
}
|
|
|
|
.right-dock-expand-modal__body > * {
|
|
flex: 1;
|
|
min-width: 0;
|
|
}
|
|
|
|
@media (max-width: 768px) {
|
|
.right-dock {
|
|
display: none;
|
|
}
|
|
}
|