helm/ulysses
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

fix(mobile): stack the model-comparison grid into one column on phones (#4979)

Browse source 
The comparison grid hard-codes 2-4 equal columns with no phone breakpoint, so at
390px two models get ~178px columns and four get ~88px columns. Each column is a
full scrolling chat, so content is unreadably over-wrapped and clipped. On
phones (<=768px), stack the panes into a single scrollable column. Desktop is
unaffected.

Co-authored-by: Claude Opus 4.8 (1M context) <noreply@anthropic.com>
This commit is contained in:
Moniz 2026-07-02 12:28:23 -03:00 • committed by GitHub
parent 0dc98ec9b9
commit 8c943226f8
No known key found for this signature in database
GPG key ID: B5690EEEBB952194
1 changed files with 10 additions and 0 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

10
static/style.css
View file

@ -39695,3 +39695,13 @@ body.theme-frosted .modal {
.log-line-default { .log-line-default {
color: var(--fg, #9cdef2); color: var(--fg, #9cdef2);
} }
/* The model-comparison grid hard-codes 2-4 equal columns with no phone
breakpoint that stacks them, so at 390px two models render ~178px columns and
four render ~88px columns. Each column is a full scrolling chat (code blocks,
tool output, vote footer), so the text is unreadably over-wrapped and clipped.
On phones, stack the panes into a single scrollable column instead. */
@media (max-width: 768px) {
.compare-grid[data-cols] { grid-template-columns: 1fr !important; overflow-y: auto; }
.compare-pane { min-height: 60dvh; }
}