diff --git a/e2e/systems-map.e2e.ts b/e2e/systems-map.e2e.ts
index efff86a..de7c652 100644
--- a/e2e/systems-map.e2e.ts
+++ b/e2e/systems-map.e2e.ts
@@ -43,7 +43,9 @@ test.describe('Systems Map', () => {
textBox.x + textBox.width <= shapeBox.x + shapeBox.width + 0.5 &&
textBox.y + textBox.height <= shapeBox.y + shapeBox.height + 0.5;
- return fits ? [] : [node.getAttribute('aria-label') ?? 'unnamed node'];
+ return fits
+ ? []
+ : [node.getAttribute('data-id') ?? node.getAttribute('aria-label') ?? 'unnamed node'];
});
});
diff --git a/e2e/terminal.e2e.ts b/e2e/terminal.e2e.ts
index ea108bc..c4645e9 100644
--- a/e2e/terminal.e2e.ts
+++ b/e2e/terminal.e2e.ts
@@ -55,7 +55,8 @@ test.describe('terminal dock', () => {
await input.fill('clear');
await input.press('Enter');
- await expect(session.locator('p')).toHaveText(copy.clearedMessage);
+ await expect(session).toContainText(copy.clearedMessage);
+ await expect(session.locator('p')).toHaveCount(1);
await input.fill('navigate p');
await input.press('Tab');
diff --git a/src/app/shared/case-study/case-study.scss b/src/app/shared/case-study/case-study.scss
index 1f695df..fb31d84 100644
--- a/src/app/shared/case-study/case-study.scss
+++ b/src/app/shared/case-study/case-study.scss
@@ -2,6 +2,7 @@
padding: var(--space-6);
border-radius: var(--radius-md);
background: var(--color-surface-raised);
+ overflow-wrap: anywhere;
}
h2 {
diff --git a/src/app/shared/systems-map/systems-map.html b/src/app/shared/systems-map/systems-map.html
index c82f3cd..1aa0a1a 100644
--- a/src/app/shared/systems-map/systems-map.html
+++ b/src/app/shared/systems-map/systems-map.html
@@ -32,23 +32,20 @@
tabindex="-1"
class="systems-map-node"
[attr.data-kind]="node.kind"
+ [attr.data-id]="node.id"
[class.is-connected]="isConnectedNode(node.id)"
[class.is-dimmed]="isDimmedNode(node.id)"
(click)="onNodeActivate($event, node)"
(mouseenter)="onNodeEnter(node.id)"
(mouseleave)="onNodeLeave(node.id)"
>
- @if (node.kind === 'ai' || node.kind === 'platform') {
-
- } @else {
-
- }
+
@for (line of node.labelLines; track $index) {
diff --git a/src/app/shared/systems-map/systems-map.scss b/src/app/shared/systems-map/systems-map.scss
index 0608436..cfcaa47 100644
--- a/src/app/shared/systems-map/systems-map.scss
+++ b/src/app/shared/systems-map/systems-map.scss
@@ -64,7 +64,6 @@
color: var(--color-text);
}
-.systems-map-node circle,
.systems-map-node rect {
fill: var(--color-surface-overlay);
stroke: var(--color-accent);
@@ -79,7 +78,7 @@
stroke: var(--color-accent-soft);
}
-.systems-map-node[data-kind='ai'] circle,
+.systems-map-node[data-kind='ai'] rect,
.systems-map-legend [data-kind='ai'] {
stroke: var(--color-accent-strong);
}
@@ -90,7 +89,6 @@
text-anchor: middle;
}
-.systems-map-node.is-connected circle,
.systems-map-node.is-connected rect,
.systems-map-edge.is-connected {
stroke: var(--color-accent-strong);
@@ -131,7 +129,6 @@
outline-offset: var(--focus-ring-offset);
}
-.systems-map-node:focus-visible circle,
.systems-map-node:focus-visible rect {
stroke: var(--focus-ring-color);
stroke-width: 3;
@@ -187,7 +184,6 @@
}
@media (hover: hover) and (pointer: fine) {
- .systems-map-node:hover circle,
.systems-map-node:hover rect {
stroke: var(--color-accent-strong);
}
@@ -199,7 +195,6 @@
@media (prefers-reduced-motion: reduce) {
.systems-map-edge,
- .systems-map-node circle,
.systems-map-node rect {
transition: none;
}
diff --git a/src/app/shared/systems-map/systems-map.ts b/src/app/shared/systems-map/systems-map.ts
index 72ef756..2402e07 100644
--- a/src/app/shared/systems-map/systems-map.ts
+++ b/src/app/shared/systems-map/systems-map.ts
@@ -295,7 +295,7 @@ export class SystemsMap {
labelLines,
summary,
gist,
- shapeWidth: Math.max(140, longest * 8 + 24),
+ shapeWidth: Math.max(160, longest * 9 + 32),
shapeHeight: multiline ? 52 : 40,
textStartDy: multiline ? -6 : 4,
href: nodeHref(node, locale),
diff --git a/src/app/shared/terminal/terminal-dock.scss b/src/app/shared/terminal/terminal-dock.scss
index cab5456..a426482 100644
--- a/src/app/shared/terminal/terminal-dock.scss
+++ b/src/app/shared/terminal/terminal-dock.scss
@@ -12,6 +12,7 @@
display: grid;
justify-items: end;
gap: var(--space-2);
+ max-width: 100%;
}
.terminal-dock-trigger {
@@ -41,6 +42,8 @@
grid-template-rows: auto 1fr;
gap: var(--space-3);
width: 100%;
+ min-width: 0;
+ max-width: 100%;
max-height: min(70vh, 32rem);
padding: var(--space-4);
border: 1px solid var(--surface-glass-border);
@@ -101,11 +104,13 @@
.terminal-dock-session {
overflow: auto;
+ min-width: 0;
min-height: 8rem;
font-family: var(--font-mono);
font-size: var(--text-sm);
color: var(--color-text-muted);
white-space: pre-wrap;
+ overflow-wrap: anywhere;
}
.terminal-dock-session .echo {
@@ -114,18 +119,22 @@
.terminal-dock-form {
display: grid;
- grid-template-columns: auto 1fr;
+ grid-template-columns: minmax(0, auto) minmax(0, 1fr);
align-items: center;
gap: var(--space-2);
+ min-width: 0;
}
.terminal-dock-prompt {
font-family: var(--font-mono);
font-size: var(--text-sm);
- color: var(--color-accent-cool);
+ color: var(--color-text);
+ overflow-wrap: anywhere;
}
.terminal-dock-form input {
+ min-width: 0;
+ width: 100%;
min-height: 2.75rem;
padding: var(--space-2) var(--space-3);
border: 1px solid var(--surface-glass-border);
@@ -136,6 +145,11 @@
font-size: var(--text-sm);
}
+.terminal-dock-form input::placeholder {
+ color: var(--color-text-subtle);
+ opacity: 1;
+}
+
@media (hover: hover) and (pointer: fine) {
.terminal-dock-trigger:hover,
.terminal-dock-control:hover {