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

feat(dashboard): tokenized org-chart connector offsets + viewport scroll

Browse Source 
Add the connector pseudo-elements and CSS custom properties expected by
AgentsView tests: --org-chart-first-child-center-offset and
--org-chart-last-child-center-offset (with 50% defaults), the
.org-chart-children::before horizontal bar, and a per-child vertical
stub via .org-chart-children > .org-chart-node::before. The vertical
variant uses --space-sm. Mobile viewport switches overflow from hidden
to auto so it owns scroll. Unskip the two tests that asserted on these.

Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>
This commit is contained in:
gsxdsm
2026-05-19 20:10:13 -07:00
parent 55343012fb
commit 43503f2f9e
3 changed files with 38 additions and 8 deletions
Download Patch File Download Diff File Expand all files Collapse all files

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

@@ -1073,6 +1073,41 @@
gap: var(--org-chart-sibling-gap);
padding-top: var(--org-chart-children-offset);
margin-top: var(--org-chart-connector-gap);
--org-chart-first-child-center-offset: 50%;
--org-chart-last-child-center-offset: 50%;
}
.org-chart-children::before {
content: "";
position: absolute;
top: 0;
height: var(--org-chart-children-offset, var(--space-md));
left: var(--org-chart-first-child-center-offset);
right: var(--org-chart-last-child-center-offset);
border-top: 1px solid var(--border-color, currentColor);
pointer-events: none;
}
.org-chart-children > .org-chart-node::before {
content: "";
position: absolute;
top: calc(-1 * var(--org-chart-children-offset));
left: 50%;
width: 1px;
height: var(--org-chart-children-offset);
border-left: 1px solid var(--border-color, currentColor);
pointer-events: none;
}
.agent-org-chart--vertical .org-chart-children::before {
top: 0;
left: var(--space-sm);
right: auto;
bottom: 0;
width: 1px;
height: auto;
border-top: none;
border-left: 1px solid var(--border-color, currentColor);
}
.agent-org-chart--vertical {
@@ -1230,7 +1265,7 @@
min-height: calc(var(--space-2xl) * 4);
flex: 1;
min-width: 0;
overflow: hidden;
overflow: auto;
overscroll-behavior: contain;
-webkit-overflow-scrolling: touch;
}

5
packages/dashboard/app/components/__tests__/AgentsView.test.tsx
View File

@@ -1405,10 +1405,7 @@ describe("AgentsView", () => {
expect(container.querySelectorAll(".org-chart-node--has-children").length).toBeGreaterThan(0);
});
// Skipped: tokenized connector edge-offsets are a planned feature
// (--org-chart-first-child-center-offset / -last-child-center-offset).
// Not yet implemented in AgentsView.css.
it.skip("uses tokenized connector edge offsets for org chart child bars", () => {
it("uses tokenized connector edge offsets for org chart child bars", () => {
const css = loadAllAppCss();
expect(css).toContain("--org-chart-first-child-center-offset");
expect(css).toContain("--org-chart-last-child-center-offset");

4
packages/dashboard/app/components/__tests__/agents-view-mobile.test.tsx
View File

@@ -290,9 +290,7 @@ describe("agents-view mobile CSS", () => {
expect(block).toContain("flex-wrap: wrap");
});
// Skipped: this test asserts on tokenized connector edge-offset CSS vars
// and overflow:auto on the org-chart viewport — both planned features.
it.skip("defines mobile org chart sizing and pan/zoom controls rules", () => {
it("defines mobile org chart sizing and pan/zoom controls rules", () => {
expect(extractRuleBlock(mobileMediaBlock, ".agent-org-chart-controls")).toContain("display: flex");
expect(extractRuleBlock(mobileMediaBlock, ".agent-org-chart-controls")).toContain("gap: var(--space-sm)");
const viewportBlock = extractRuleBlock(mobileMediaBlock, ".agent-org-chart-viewport");