43160a7aae
Unify complex dashboard modal presentation under persisted FloatingWindow geometry. - Migrate Create Room, Task Detail, Agent Detail, and GitHub Import modal presentations. - Preserve documented embedded and docked exceptions, dismissal behavior, and nested scrolling. - Add presentation-contract coverage and publish dashboard guidance and changesets. Files changed: ...n-8619-resize-persist-modals-floating-window.md | 7 ++ .changeset/fn-8621-create-room-floating-window.md | 7 ++ docs/dashboard-guide.md | 16 +++- docs/dashboard-modal-inventory.md | 12 +-- .../dashboard/app/components/AgentDetailView.css | 16 +--- .../dashboard/app/components/AgentDetailView.tsx | 102 ++++++++++++++++----- .../dashboard/app/components/CreateRoomModal.css | 19 +++- .../dashboard/app/components/CreateRoomModal.tsx | 57 ++++++++---- .../dashboard/app/components/FloatingWindow.css | 13 ++- .../dashboard/app/components/FloatingWindow.tsx | 15 +++ .../dashboard/app/components/GitHubImportModal.css | 11 +-- .../dashboard/app/components/GitHubImportModal.tsx | 40 ++++++-- .../dashboard/app/components/TaskDetailModal.css | 52 +---------- .../dashboard/app/components/TaskDetailModal.tsx | 58 ++++++------ .../__tests__/AgentDetailView.core.test.tsx | 2 +- .../AgentDetailView.mobile-scroll.test.tsx | 6 +- .../components/__tests__/CreateRoomModal.test.tsx | 62 +++++++++++-- .../components/__tests__/FloatingWindow.test.tsx | 1 + .../__tests__/GitHubImportModal.test.tsx | 8 +- ...etailModal.responsive-and-dependencies.test.tsx | 77 +++++++--------- .../__tests__/modal-presentation-contract.test.tsx | 74 +++++++++++++++ .../dashboard/app/hooks/useEmbeddedPresentation.ts | 2 +- .../dashboard/app/hooks/useModalResizePersist.ts | 5 + 23 files changed, 441 insertions(+), 221 deletions(-) Fusion-Task-Id: FN-8621 Fusion-Task-Lineage: 04b6f3fe-d527-4a21-a0cb-489eb20f5e91 Co-authored-by: Fusion (runfusion.ai) <noreply@runfusion.ai>
121 lines
2.5 KiB
CSS
121 lines
2.5 KiB
CSS
/*
|
|
FNXC:ModalTouchGeometry 2026-07-26-19:25:
|
|
Create Room now lives inside FloatingWindow's body. Fill that host without creating a competing
|
|
scroll surface; the member list below remains the only picker scroll owner.
|
|
*/
|
|
.floating-window--create-room .floating-window__body {
|
|
overflow: hidden;
|
|
}
|
|
|
|
.floating-window--create-room .create-room-modal {
|
|
width: 100%;
|
|
height: 100%;
|
|
max-width: none;
|
|
max-height: none;
|
|
border: none;
|
|
border-radius: inherit;
|
|
display: flex;
|
|
flex-direction: column;
|
|
gap: var(--space-md);
|
|
}
|
|
|
|
.create-room-modal-name-group {
|
|
margin-bottom: 0;
|
|
}
|
|
|
|
.create-room-modal-name-field {
|
|
display: flex;
|
|
align-items: center;
|
|
gap: var(--space-sm);
|
|
}
|
|
|
|
.create-room-modal-name-hash {
|
|
color: var(--text-muted);
|
|
font-family: var(--font-mono);
|
|
}
|
|
|
|
.create-room-modal-name-field .input {
|
|
flex: 1;
|
|
}
|
|
|
|
.create-room-modal-selected {
|
|
display: flex;
|
|
flex-wrap: wrap;
|
|
gap: var(--space-sm);
|
|
padding: 0 var(--space-xl);
|
|
}
|
|
|
|
.create-room-modal-chip {
|
|
border-color: var(--border);
|
|
}
|
|
|
|
.create-room-modal-member-list {
|
|
display: flex;
|
|
flex-direction: column;
|
|
gap: var(--space-xs);
|
|
max-height: calc(var(--space-2xl) * 8);
|
|
overflow-y: auto;
|
|
padding: 0 var(--space-xl);
|
|
}
|
|
|
|
.create-room-modal-member-row {
|
|
display: flex;
|
|
width: 100%;
|
|
align-items: center;
|
|
gap: var(--space-sm);
|
|
text-align: left;
|
|
border: 1px solid var(--border);
|
|
border-radius: var(--radius-md);
|
|
padding: var(--space-sm);
|
|
background: var(--surface);
|
|
color: var(--text);
|
|
transition: background var(--transition-fast), border-color var(--transition-fast);
|
|
}
|
|
|
|
.create-room-modal-member-row:hover {
|
|
background: var(--card-hover);
|
|
}
|
|
|
|
.create-room-modal-member-row:focus-visible {
|
|
outline: none;
|
|
box-shadow: var(--focus-ring-strong);
|
|
}
|
|
|
|
.create-room-modal-member-row--selected {
|
|
border-color: var(--todo);
|
|
background: color-mix(in srgb, var(--todo) 12%, transparent);
|
|
}
|
|
|
|
.create-room-modal-member-role {
|
|
margin-left: auto;
|
|
color: var(--text-muted);
|
|
font-size: var(--space-md);
|
|
}
|
|
|
|
.create-room-modal-empty {
|
|
color: var(--text-muted);
|
|
padding: var(--space-md);
|
|
text-align: center;
|
|
}
|
|
|
|
@media (max-width: 768px) {
|
|
.floating-window--create-room .create-room-modal {
|
|
width: 100%;
|
|
}
|
|
|
|
.create-room-modal-selected,
|
|
.create-room-modal-member-list {
|
|
padding: 0 var(--space-md);
|
|
}
|
|
|
|
.create-room-modal .modal-actions {
|
|
display: flex;
|
|
flex-direction: column;
|
|
gap: var(--space-sm);
|
|
}
|
|
|
|
.create-room-modal .modal-actions .btn {
|
|
width: 100%;
|
|
}
|
|
}
|