BitSquare/Codeman
2
0
Fork 0
mirror of https://github.com/Ark0N/Codeman.git synced 2026-10-03 05:59:43 +02:00
Code Issues Packages Projects Releases Wiki Activity

fix(settings): stop App Settings modal overflowing horizontally

Browse Source 
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) <noreply@anthropic.com>
This commit is contained in:
arkon
2026-06-08 19:38:43 +02:00
co-authored by Claude Opus 4.8
parent 8453e953fd
commit f475caab87
1 changed files with 11 additions and 2 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/web/public/styles.css
+11 -2
View File
@@ -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;