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

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
+10
View File
@@ -39695,3 +39695,13 @@ body.theme-frosted .modal {
.log-line-default {
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; }
}