Make the dialogue/utterance editor vertical, matching the mystery graph

Input on top, output on the bottom, exit sinks in a row below; wires flow
downward. Cards auto-expand, so their heights are measured (offsetHeight) to
place the bottom output port. Seed and Tab-created utterances now stack downward.

Co-Authored-By: Claude Opus 4.8 <noreply@anthropic.com>
This commit is contained in:
2026-08-18 17:59:17 +02:00
co-authored by Claude Opus 4.8
parent aa789bbadb
commit 3b72f38d00
3 changed files with 34 additions and 16 deletions
+4
View File
@@ -544,3 +544,7 @@ button:focus-visible { outline: 2px solid #e99a44; outline-offset: 2px; }
.gout { position: relative; flex: 1 1 0; min-width: 0; display: flex; flex-direction: column; align-items: center; gap: 3px; padding-bottom: 9px; }
.gout-label { font: 9px IBM Plex Mono; color: #b6c6c0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 100%; }
.gout .gport { position: absolute; bottom: -7px; left: 50%; top: auto; right: auto; transform: translateX(-50%); }
/* Utterance canvas vertical flow: input on top, output on the bottom */
.uinput { top: -6px; bottom: auto; left: 50%; right: auto; transform: translateX(-50%); }
.uport.flow { bottom: -7px; top: auto; left: 50%; right: auto; transform: translateX(-50%); }