Skip to content

fix horizontal scrolling in chat #430

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
deathbyknowledge merged 2 commits into from
Oct 13, 2026
Merged

fix horizontal scrolling in chat #430

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
2 commits
Select commit Hold shift + click to select a range
238ad76
fix horizontal chat overflow
deathbyknowledge Oct 13, 2026
431d183
keep the browse cursor inside the mobile gutter
deathbyknowledge Oct 13, 2026
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
2 changes: 2 additions & 0 deletions docs/architecture/conversations.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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.

Expand Down
12 changes: 10 additions & 2 deletions web/src/app/features/instrument/zen/zen.css
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -40,6 +40,7 @@
}
.zen-moments {
position: relative;
overflow-x: hidden;

@chatgpt-codex-connector chatgpt-codex-connector Bot Oct 13, 2026

Copy link
Copy Markdown

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

P2 Badge Preserve the browse cursor when clipping transcript overflow

At narrow mobile widths or higher app zoom, this clips the focused-moment indicator because .zen-moment.is-focus::before is positioned 22px to the left of the moment while the moment has only a 4% side margin. For example, in the 320px layout the central column is about 284px wide, leaving an approximately 11px margin, so the cursor is entirely outside .zen-moments and becomes invisible in keyboard browse mode. Contain overflowing message content without clipping this intentional gutter affordance, or reposition the cursor inside the scrollport.

Useful? React with 👍 / 👎.

overflow-y: auto;
overscroll-behavior: contain;
scrollbar-width: none;
Expand Down Expand Up @@ -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; }
Expand Down Expand Up @@ -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;
Expand Down Expand Up @@ -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;
Expand Down
Loading