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 {