From bb9912daef23fd2ab43fa39b59b8f9c6ace6a708 Mon Sep 17 00:00:00 2001 From: Antonio Ledebuhr Date: Thu, 27 Aug 2026 00:43:56 +0200 Subject: [PATCH] Keep the default-open terminal inside the viewport and the map labels inside their shapes. The dock prompt and placeholder now meet contrast on the raised surface, and service nodes use the same rect geometry as the cases. Co-authored-by: Cursor --- e2e/systems-map.e2e.ts | 4 +++- e2e/terminal.e2e.ts | 3 ++- src/app/shared/case-study/case-study.scss | 1 + src/app/shared/systems-map/systems-map.html | 19 ++++++++----------- src/app/shared/systems-map/systems-map.scss | 7 +------ src/app/shared/systems-map/systems-map.ts | 2 +- src/app/shared/terminal/terminal-dock.scss | 18 ++++++++++++++++-- 7 files changed, 32 insertions(+), 22 deletions(-) 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 {