root/fusion
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

feat(FN-3375): rework agents view org chart spacing

Browse Source 
Rebuilt the agents/org chart layout with improved spacing, adding corresponding tests for the updated card styling and mobile responsiveness.

Fusion-Task-Id: FN-3375
This commit is contained in:
Fusion
2026-05-04 19:33:53 -07:00
committed by gsxdsm
parent 196adbd04e
commit d216c6fe74
5 changed files with 67 additions and 14 deletions
Download Patch File Download Diff File Expand all files Collapse all files

35
packages/dashboard/app/components/AgentsView.css
View File

@@ -843,7 +843,9 @@
.agent-org-chart {
--org-chart-node-width: calc(var(--space-xl) * 9 + var(--space-xs));
--org-chart-connector-gap: var(--space-xs);
--org-chart-sibling-gap: var(--space-xl);
--org-chart-connector-gap: var(--space-sm);
--org-chart-children-offset: calc(var(--space-lg) + var(--space-sm));
display: flex;
align-items: flex-start;
justify-content: flex-start;
@@ -861,17 +863,22 @@
}
.org-chart-node {
--org-chart-subtree-leaves-number: var(--org-chart-subtree-leaves, 1);
position: relative;
display: flex;
flex-direction: column;
align-items: center;
width: var(--org-chart-node-width);
min-width: var(--org-chart-node-width);
width: max-content;
min-width: calc(
var(--org-chart-subtree-leaves-number) * var(--org-chart-node-width) +
(var(--org-chart-subtree-leaves-number) - 1) * var(--org-chart-sibling-gap)
);
flex: 0 0 auto;
}
.org-chart-node-card {
width: 100%;
width: var(--org-chart-node-width);
max-width: 100%;
background: var(--surface);
border: 1px solid var(--border);
border-radius: var(--radius-lg);
@@ -918,8 +925,9 @@
.org-chart-node__meta {
display: flex;
align-items: center;
justify-content: space-between;
gap: var(--space-sm);
justify-content: center;
flex-wrap: wrap;
gap: var(--space-xs);
}
.org-chart-node__badge {
@@ -945,7 +953,7 @@
transform: translateX(-50%);
bottom: calc(var(--org-chart-connector-gap) * -1);
width: 1px;
height: calc(var(--org-chart-connector-gap) * 2);
height: var(--org-chart-children-offset);
background: var(--border);
}
@@ -953,9 +961,10 @@
position: relative;
display: flex;
align-items: flex-start;
justify-content: center;
gap: var(--space-lg);
padding-top: var(--space-xl);
justify-content: space-between;
width: 100%;
gap: var(--org-chart-sibling-gap);
padding-top: var(--org-chart-children-offset);
margin-top: var(--org-chart-connector-gap);
}
@@ -972,11 +981,11 @@
.org-chart-children > .org-chart-node::before {
content: "";
position: absolute;
top: calc(var(--space-xl) * -1);
top: calc(var(--org-chart-children-offset) * -1);
left: 50%;
transform: translateX(-50%);
width: 1px;
height: var(--space-xl);
height: var(--org-chart-children-offset);
background: var(--border);
}
@@ -1077,6 +1086,8 @@
.agent-org-chart {
--org-chart-node-width: calc(var(--space-2xl) * 5);
--org-chart-sibling-gap: var(--space-sm);
--org-chart-children-offset: var(--space-lg);
padding: var(--space-sm);
padding-bottom: calc(var(--space-lg) + var(--space-sm));
gap: var(--space-sm);