be0140c1b4
Ensure the bundled dependency graph stretches to the full available dashboard width. - add flex sizing and min-width rules so the dependency graph fills its parent container - cover empty-state and populated mobile-width layouts with CSS-backed flex sizing assertions - add a patch changeset for the published CLI bundle Files changed: .changeset/sharp-graphs-stretch.md | 5 +++ plugins/fusion-plugin-dependency-graph/src/DependencyGraph.css | 3 ++ plugins/fusion-plugin-dependency-graph/src/__tests__/DependencyGraph.test.tsx | 44 ++++++++++++++++++++++ 3 files changed, 52 insertions(+) Fusion-Task-Id: FN-6019 Fusion-Task-Lineage: a34b2bdd-d489-4e84-9604-e6265bce733a
66 lines
1.2 KiB
CSS
66 lines
1.2 KiB
CSS
.dependency-graph {
|
|
position: relative;
|
|
flex: 1 1 auto;
|
|
min-width: 0;
|
|
box-sizing: border-box;
|
|
height: 100%;
|
|
padding: var(--space-md);
|
|
}
|
|
|
|
.dependency-graph__viewport {
|
|
position: relative;
|
|
overflow: hidden;
|
|
height: 100%;
|
|
min-height: calc(var(--space-2xl) * 10);
|
|
border: var(--btn-border-width) solid var(--border);
|
|
border-radius: var(--radius-md);
|
|
background: var(--surface);
|
|
touch-action: none;
|
|
}
|
|
|
|
.dependency-graph__viewport:focus-visible {
|
|
box-shadow: var(--focus-ring-strong);
|
|
}
|
|
|
|
.graph-canvas-transform {
|
|
position: relative;
|
|
transform-origin: top left;
|
|
}
|
|
|
|
.graph-canvas-transform--animate {
|
|
transition: transform var(--transition-normal);
|
|
}
|
|
|
|
.dependency-graph__nodes-layer {
|
|
position: relative;
|
|
z-index: 1;
|
|
}
|
|
|
|
.dependency-graph__nodes-layer .graph-task-node {
|
|
max-width: min(100%, calc(var(--space-2xl) * 9));
|
|
}
|
|
|
|
.dependency-graph-edges {
|
|
position: absolute;
|
|
inset: 0;
|
|
width: 100%;
|
|
height: 100%;
|
|
pointer-events: none;
|
|
overflow: visible;
|
|
}
|
|
|
|
|
|
.dependency-graph__empty {
|
|
color: var(--text-muted);
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
height: 100%;
|
|
}
|
|
|
|
@media (max-width: 768px) {
|
|
.dependency-graph {
|
|
padding: var(--space-sm);
|
|
}
|
|
}
|