From 7bf5b8b09db41e96581f96f81958b965bbe4feff Mon Sep 17 00:00:00 2001
From: Florian Heinz <mail@hnz.io>
Date: Thu, 16 Apr 2026 12:39:50 +0200
Subject: [PATCH] fix: prevent mobile form and quick win overflow

---
 app/static/css/style.css | 32 ++++++++++++++++++++++++++++----
 1 file changed, 28 insertions(+), 4 deletions(-)

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