fix(layout): prevent horizontal overflow in modals, sheets, and input fields

Modal overlay gets overflow: hidden; sheet scroll container gets overflow-x: hidden
to stop content bleed on narrow viewports. Inputs get min-width: 0 and
box-sizing: border-box so they cannot overflow two-column grid containers.
This commit is contained in:
Konrad M.
2026-04-21 21:55:06 +02:00
parent 28e2ca6b01
commit 68645d2483
+4
View File
@@ -825,6 +825,7 @@
display: flex; display: flex;
align-items: flex-end; align-items: flex-end;
justify-content: center; justify-content: center;
overflow: hidden;
animation: modal-overlay-in 0.2s ease forwards; animation: modal-overlay-in 0.2s ease forwards;
/* iOS Safari: click-Events auf non-interactive divs erfordern cursor:pointer */ /* iOS Safari: click-Events auf non-interactive divs erfordern cursor:pointer */
cursor: pointer; cursor: pointer;
@@ -902,6 +903,7 @@
flex: 1; flex: 1;
min-height: 0; min-height: 0;
overflow-y: auto; overflow-y: auto;
overflow-x: hidden;
-webkit-overflow-scrolling: touch; -webkit-overflow-scrolling: touch;
} }
@@ -1174,6 +1176,8 @@
.input, .input,
.form-input { .form-input {
width: 100%; width: 100%;
min-width: 0;
box-sizing: border-box;
padding: var(--space-2) var(--space-3); padding: var(--space-2) var(--space-3);
border-radius: var(--radius-sm); border-radius: var(--radius-sm);
border: 1.5px solid var(--color-border); border: 1.5px solid var(--color-border);