diff --git a/docs/architecture/conversations.md b/docs/architecture/conversations.md index 329d69b32..c6d9a7d6a 100644 --- a/docs/architecture/conversations.md +++ b/docs/architecture/conversations.md @@ -16,6 +16,8 @@ Long lines scroll inside the block. Copy preserves indentation and internal line adding the renderer's final newline to the clipboard. Chat renders human messages as plain text with clickable web URLs. External web links in human messages and Ship's Markdown replies open in a new tab. +The Chat transcript scrolls vertically. Long words, URLs and compaction notes wrap within the +reading column; wide tables and code blocks scroll horizontally within their own bounds. When the reader scrolls above the latest chat message, a small button returns the transcript to the bottom and resumes following new replies. diff --git a/web/src/app/features/instrument/zen/zen.css b/web/src/app/features/instrument/zen/zen.css index aa40dd675..38e65a4be 100644 --- a/web/src/app/features/instrument/zen/zen.css +++ b/web/src/app/features/instrument/zen/zen.css @@ -40,6 +40,7 @@ } .zen-moments { position: relative; + overflow-x: hidden; overflow-y: auto; overscroll-behavior: contain; scrollbar-width: none; @@ -78,10 +79,11 @@ .zen-history-status.is-err { color: var(--error); } .zen-moment { flex-shrink: 0; - max-width: min(var(--measure-response), 92%); + max-width: min(var(--measure-response), 92%, calc(100% - 24px)); margin: 0 auto; width: 100%; padding: 2.2vh 0; + overflow-wrap: anywhere; } .zen-moment.is-older { opacity: 0.55; } .zen-moment.is-work { padding-block: 1vh; } @@ -156,6 +158,12 @@ } .zen-moment .text p { margin: 0 0 0.6em; } .zen-moment .text p:last-child { margin-bottom: 0; } +.zen-moment .text table { + display: block; + max-width: 100%; + overflow-x: auto; + overflow-wrap: normal; +} .zen-moment .text :not(pre) > code { font-family: var(--gsv-font-mono); font-size: 0.72em; @@ -498,7 +506,7 @@ .zen-moment.is-focus::before { content: ""; position: absolute; - left: -22px; + left: clamp(-22px, -4%, -12px); top: 2.2vh; width: 8px; height: 1.1em;