2284d6683e
Make shared-branch task details open in a compact collapsed state by default. - Default branch group cards to collapsed and remount them when switching tasks in the same group. - Add compact token-based styling for collapsed branch group summaries. - Update branch group and task detail tests for collapsed defaults and state reset behavior. - Add a patch changeset for the published CLI bundle. Files changed: .changeset/fn-7319-compact-branch-groups.md | 7 ++++ .../dashboard/app/components/BranchGroupCard.css | 38 +++++++++++++++++- .../dashboard/app/components/BranchGroupCard.tsx | 30 +++----------- .../dashboard/app/components/TaskDetailModal.tsx | 3 +- .../components/__tests__/BranchGroupCard.test.tsx | 46 ++++++++++++++++++---- .../components/__tests__/TaskDetailModal.test.tsx | 38 +++++++++++++++--- 6 files changed, 123 insertions(+), 39 deletions(-) Fusion-Task-Id: FN-7319 Fusion-Task-Lineage: a4469ecd-cffa-4af4-b4dc-064246ff9a39 Co-authored-by: Fusion (runfusion.ai) <noreply@runfusion.ai>
143 lines
2.8 KiB
CSS
143 lines
2.8 KiB
CSS
.branch-group-card {
|
|
display: flex;
|
|
flex-direction: column;
|
|
gap: var(--space-sm);
|
|
}
|
|
|
|
/*
|
|
FNXC:BranchGroupDetails 2026-06-30-00:00:
|
|
Collapsed branch-group details must consume less task-detail space with token-based typography and spacing while keeping the expand button large enough to remain usable.
|
|
*/
|
|
.branch-group-card--collapsed {
|
|
gap: calc(var(--space-xs) / 2);
|
|
padding: var(--space-sm);
|
|
}
|
|
|
|
.branch-group-card-error {
|
|
color: var(--color-error);
|
|
}
|
|
|
|
.branch-group-card-header {
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: space-between;
|
|
gap: var(--space-sm);
|
|
}
|
|
|
|
.branch-group-card-title {
|
|
display: inline-flex;
|
|
align-items: center;
|
|
gap: var(--space-xs);
|
|
}
|
|
|
|
.branch-group-card--collapsed .branch-group-card-title {
|
|
font-size: var(--font-size-xs);
|
|
line-height: var(--line-height-tight);
|
|
}
|
|
|
|
.branch-group-card-header-meta {
|
|
display: inline-flex;
|
|
align-items: center;
|
|
gap: var(--space-xs);
|
|
}
|
|
|
|
.branch-group-card--collapsed .branch-group-card-header,
|
|
.branch-group-card--collapsed .branch-group-card-header-meta {
|
|
gap: calc(var(--space-xs) / 2);
|
|
}
|
|
|
|
.branch-group-card-badge {
|
|
background: var(--surface-1);
|
|
}
|
|
|
|
.branch-group-card-header-meta .btn {
|
|
flex-shrink: 0;
|
|
}
|
|
|
|
.branch-group-card-header-meta .btn-icon {
|
|
padding: calc(var(--space-xs) / 2);
|
|
}
|
|
|
|
.branch-group-card--collapsed .branch-group-card-header-meta .btn-icon {
|
|
padding: 0;
|
|
}
|
|
|
|
.branch-group-card-header-meta .btn-icon svg {
|
|
display: block;
|
|
}
|
|
|
|
.branch-group-card-progress-text {
|
|
color: var(--text-muted);
|
|
font-size: calc(var(--font-size-base) * 0.875);
|
|
}
|
|
|
|
.branch-group-card--collapsed .branch-group-card-progress-text {
|
|
font-size: var(--font-size-xs);
|
|
line-height: var(--line-height-tight);
|
|
}
|
|
|
|
.branch-group-card-progress {
|
|
width: 100%;
|
|
height: var(--space-xs);
|
|
border-radius: var(--radius-pill);
|
|
background: var(--surface-1);
|
|
overflow: hidden;
|
|
}
|
|
|
|
.branch-group-card--collapsed .branch-group-card-progress {
|
|
height: calc(var(--space-xs) / 2);
|
|
}
|
|
|
|
.branch-group-card-progress-fill {
|
|
display: block;
|
|
height: 100%;
|
|
background: var(--color-info);
|
|
}
|
|
|
|
.branch-group-card-members {
|
|
list-style: none;
|
|
margin: 0;
|
|
padding: 0;
|
|
display: flex;
|
|
flex-direction: column;
|
|
gap: calc(var(--space-xs) / 2);
|
|
}
|
|
|
|
.branch-group-card-member {
|
|
display: flex;
|
|
align-items: center;
|
|
gap: var(--space-xs);
|
|
}
|
|
|
|
.branch-group-card-member-title {
|
|
flex: 1;
|
|
}
|
|
|
|
.branch-group-card-member-status {
|
|
color: var(--text-muted);
|
|
display: inline-flex;
|
|
}
|
|
|
|
.branch-group-card-actions {
|
|
display: flex;
|
|
align-items: center;
|
|
gap: var(--space-sm);
|
|
flex-wrap: wrap;
|
|
}
|
|
|
|
@media (max-width: 768px) {
|
|
.branch-group-card-header {
|
|
flex-direction: column;
|
|
align-items: flex-start;
|
|
}
|
|
|
|
.branch-group-card-header-meta {
|
|
width: 100%;
|
|
justify-content: space-between;
|
|
}
|
|
|
|
.branch-group-card--collapsed .branch-group-card-header {
|
|
gap: calc(var(--space-xs) / 2);
|
|
}
|
|
}
|