mirror of
https://github.com/pewdiepie-archdaemon/odysseus.git
synced 2026-07-13 12:38:02 +00:00
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:
@@ -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; }
|
||||
}
|
||||
|
||||
Reference in New Issue
Block a user