From f475caab87851cf391fc52091dfb190191d95c8e Mon Sep 17 00:00:00 2001 From: arkon Date: Mon, 8 Jun 2026 19:38:43 +0200 Subject: [PATCH] fix(settings): stop App Settings modal overflowing horizontally The App Settings toggle grid used grid-template-columns: 1fr 1fr, which resolves to minmax(auto, 1fr): the auto minimum equals the items' min-content (~550px), exceeding the available width and forcing a horizontal scrollbar with the right-column switches clipped at the edge. Switch the settings grids to minmax(0, 1fr) tracks so they can shrink (labels ellipsis-truncate as a last resort instead of blowing out), and widen the App Settings modal from 540 to 600px so the two-column layout fits comfortably. Width bump is scoped to #appSettingsModal so the other modal-lg modal (Add Case) is unaffected. Verified with Playwright across all six tabs: 0 horizontal overflow, 0 truncated labels, clean single-column collapse at 390px. Co-Authored-By: Claude Opus 4.8 (1M context) --- src/web/public/styles.css | 13 +++++++++++-- 1 file changed, 11 insertions(+), 2 deletions(-) diff --git a/src/web/public/styles.css b/src/web/public/styles.css index d2cb1d4f..912788f5 100644 --- a/src/web/public/styles.css +++ b/src/web/public/styles.css @@ -3728,7 +3728,10 @@ body.solo-mode .btn-lifecycle-log { /* Settings Grid Layout - 2 column compact view */ .settings-grid { display: grid; - grid-template-columns: 1fr 1fr; + /* minmax(0, 1fr) lets tracks shrink below their min-content so long + labels ellipsis-truncate instead of blowing out the modal width and + forcing a horizontal scrollbar (1fr === minmax(auto, 1fr) would not). */ + grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 0.5rem 1rem; } @@ -3794,7 +3797,7 @@ body.solo-mode .btn-lifecycle-log { /* Three column variant for notification levels */ .settings-grid-3col { - grid-template-columns: 1fr 1fr 1fr; + grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) minmax(0, 1fr); } /* Inline input in settings item */ @@ -3965,6 +3968,12 @@ body.solo-mode .btn-lifecycle-log { min-height: 0; } +/* App Settings packs a 2-column toggle grid; give it room so right-column + switches aren't cramped against the edge (other modal-lg modals stay 540). */ +#appSettingsModal .modal-content.modal-lg { + max-width: 600px; +} + /* Mobile Case Picker - Base Styles */ .mobile-case-picker-sheet { position: fixed;