From 8c943226f8159811fb2a0592a5475dd14c67c1e1 Mon Sep 17 00:00:00 2001 From: Moniz <44476844+BrunooMoniz@users.noreply.github.com> Date: Thu, 2 Jul 2026 12:28:23 -0300 Subject: [PATCH] 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) --- static/style.css | 10 ++++++++++ 1 file changed, 10 insertions(+) diff --git a/static/style.css b/static/style.css index 3d48db469..d5de9a465 100644 --- a/static/style.css +++ b/static/style.css @@ -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; } +}