hnzio/putzliga
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases 5 Wiki Activity

fix: prevent mobile form and quick win overflow

Browse Source
This commit is contained in:
Florian Heinz
2026-04-16 12:39:50 +02:00
parent 81c8f5fd9b
commit 7bf5b8b09d
1 changed files with 28 additions and 4 deletions
Download Patch File Download Diff File Expand all files Collapse all files

32
app/static/css/style.css
View File

@@ -410,6 +410,11 @@ p {
gap: 14px; gap: 14px;
} }
.form-actions {
flex-wrap: wrap;
min-width: 0;
}
.progress { .progress {
margin-top: 12px; margin-top: 12px;
height: 14px; height: 14px;
@@ -1442,6 +1447,8 @@ p {
.form-panel h2 { .form-panel h2 {
font-size: 1.85rem; font-size: 1.85rem;
line-height: 1.08; line-height: 1.08;
overflow-wrap: break-word;
hyphens: auto;
} }
.complete-dialog__surface { .complete-dialog__surface {
@@ -1478,11 +1485,12 @@ p {
} }
.quick-win-tag span { .quick-win-tag span {
width: auto; width: 100%;
max-width: 100%; max-width: 100%;
padding: 6px 11px; padding: 6px 11px;
font-size: 0.84rem; font-size: 0.84rem;
white-space: nowrap; white-space: normal;
overflow-wrap: anywhere;
text-align: center; text-align: center;
justify-content: center; justify-content: center;
} }
@@ -1491,6 +1499,17 @@ p {
width: auto; width: auto;
} }
.form-actions {
display: grid;
grid-template-columns: 1fr;
align-items: stretch;
}
.form-actions .button,
.form-actions a.button {
width: 100%;
}
.quick-win-list__toolbar { .quick-win-list__toolbar {
justify-content: stretch; justify-content: stretch;
} }
@@ -1586,6 +1605,9 @@ p {
border: 0; border: 0;
padding: 0; padding: 0;
background: transparent; background: transparent;
width: min(520px, calc(100vw - 16px));
max-width: calc(100vw - 16px);
overflow: visible;
} }
.complete-dialog::backdrop { .complete-dialog::backdrop {
@@ -1595,17 +1617,19 @@ p {
.complete-dialog__surface { .complete-dialog__surface {
width: min(460px, calc(100vw - 24px)); width: min(460px, calc(100vw - 24px));
max-width: calc(100vw - 24px);
padding: 24px; padding: 24px;
border-radius: 28px; border-radius: 28px;
background: var(--surface-strong); background: var(--surface-strong);
box-shadow: var(--shadow); box-shadow: var(--shadow);
display: grid; display: grid;
gap: 18px; gap: 18px;
min-width: 0;
} }
.complete-dialog__surface--task { .complete-dialog__surface--task {
width: min(520px, calc(100vw - 24px)); width: 100%;
max-width: calc(100vw - 24px); max-width: 100%;
overflow-x: hidden; overflow-x: hidden;
overscroll-behavior-x: contain; overscroll-behavior-x: contain;
touch-action: pan-y; touch-action: pan-y;