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 <cursoragent@cursor.com>

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 {

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') {
-            <circle [attr.cx]="node.x" [attr.cy]="node.y" r="28" />
-          } @else {
-            <rect
-              [attr.x]="node.x - node.shapeWidth / 2"
-              [attr.y]="node.y - node.shapeHeight / 2"
-              [attr.width]="node.shapeWidth"
-              [attr.height]="node.shapeHeight"
-              rx="8"
-            />
-          }
+          <rect
+            [attr.x]="node.x - node.shapeWidth / 2"
+            [attr.y]="node.y - node.shapeHeight / 2"
+            [attr.width]="node.shapeWidth"
+            [attr.height]="node.shapeHeight"
+            rx="8"
+          />
           <text [attr.x]="node.x" [attr.y]="node.y">
             @for (line of node.labelLines; track $index) {
               <tspan [attr.x]="node.x" [attr.dy]="$index === 0 ? node.textStartDy : 14">

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;
   }

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),

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 {