refactor: simplify quick win settings and mobile dialog

app/static/css/style.css

@@ -1071,6 +1071,12 @@ p {
   gap: 12px;
 }
 
+.quick-win-list__toolbar {
+  display: flex;
+  justify-content: flex-end;
+  margin-bottom: 14px;
+}
+
 .quick-win-manage-card {
   display: grid;
   gap: 12px;
@@ -1092,6 +1098,18 @@ p {
 .quick-win-manage-form {
   display: grid;
   gap: 12px;
+  padding-top: 4px;
+}
+
+.quick-win-manage-card__summary {
+  display: grid;
+  gap: 10px;
+}
+
+.quick-win-manage-card__title strong {
+  display: block;
+  font-size: 1.12rem;
+  line-height: 1.25;
 }
 
 .quick-win-manage-card__drag {
@@ -1146,6 +1164,9 @@ p {
   display: flex;
   flex-wrap: wrap;
   gap: 12px;
+  width: 100%;
+  min-width: 0;
+  overflow-x: hidden;
 }
 
 .quick-win-tag {
@@ -1168,15 +1189,15 @@ p {
   justify-content: center;
   min-height: 0;
   max-width: 100%;
-  padding: 10px 16px;
+  padding: 8px 13px;
   border-radius: 999px;
   border: 1px solid rgba(132, 152, 190, 0.22);
   background: var(--surface-soft);
   color: var(--text);
   font-weight: 700;
-  font-size: 0.97rem;
+  font-size: 0.9rem;
   text-align: center;
-  line-height: 1.2;
+  line-height: 1.1;
   white-space: nowrap;
   transition: transform 0.18s ease, border-color 0.18s ease, background 0.18s ease, box-shadow 0.18s ease, color 0.18s ease;
   cursor: pointer;
@@ -1217,34 +1238,60 @@ p {
 }
 
 @media (max-width: 640px) {
+  .complete-dialog__surface {
+    width: min(100vw - 16px, 410px);
+    max-width: calc(100vw - 16px);
+    padding: 18px 16px;
+    gap: 14px;
+    overflow-x: hidden;
+  }
+
   .quick-win-dialog-header {
     grid-template-columns: 1fr;
+    gap: 10px;
   }
 
   .quick-win-dialog-header__badge {
-    width: 48px;
-    height: 48px;
+    width: 42px;
+    height: 42px;
+    border-radius: 14px;
+  }
+
+  .quick-win-dialog-header__badge svg {
+    width: 19px;
+    height: 19px;
   }
 
   .quick-win-tag-grid {
-    gap: 10px;
+    gap: 8px;
   }
 
   .quick-win-tag {
     max-width: 100%;
+    flex: 0 1 auto;
   }
 
   .quick-win-tag span {
     width: auto;
     max-width: 100%;
-    white-space: normal;
-    text-align: left;
-    justify-content: flex-start;
+    padding: 6px 11px;
+    font-size: 0.84rem;
+    white-space: nowrap;
+    text-align: center;
+    justify-content: center;
   }
 
   .quick-win-tag--custom span {
     width: auto;
   }
+
+  .quick-win-list__toolbar {
+    justify-content: stretch;
+  }
+
+  .quick-win-list__toolbar .button {
+    width: 100%;
+  }
 }
 
 .push-box__state {
@@ -1352,6 +1399,10 @@ p {
 
 .complete-dialog__surface--task {
   width: min(520px, calc(100vw - 24px));
+  max-width: calc(100vw - 24px);
+  overflow-x: hidden;
+  overscroll-behavior-x: contain;
+  touch-action: pan-y;
 }
 
 .choice-grid {

app/static/js/app.js

@@ -18,7 +18,10 @@
   const currentUserName = document.body.dataset.currentUserName;
   const quickWinSortList = document.querySelector("[data-quick-win-sort-list]");
   const quickWinSortToken = document.getElementById("quickWinSortToken");
+  const quickWinSortSave = document.getElementById("quickWinSortSave");
+  const quickWinToggleButtons = document.querySelectorAll("[data-quick-win-toggle]");
   let draggedQuickWin = null;
+  let quickWinSortDirty = false;
 
   function buildCompletionOptions(button) {
     const options = [];
@@ -138,7 +141,16 @@
     });
   }
 
+  function setQuickWinSortDirty(isDirty) {
+    quickWinSortDirty = isDirty;
+    if (quickWinSortSave) {
+      quickWinSortSave.disabled = !isDirty;
+    }
+  }
+
   if (quickWinSortList) {
+    setQuickWinSortDirty(false);
+
     quickWinSortList.querySelectorAll("[data-quick-win-sort-item]").forEach((item) => {
       item.addEventListener("dragstart", () => {
         draggedQuickWin = item;
@@ -168,16 +180,55 @@
         } else {
           item.before(draggedQuickWin);
         }
-
-        try {
-          await persistQuickWinSort();
-        } catch (error) {
-          console.error("Quick-Win-Sortierung konnte nicht gespeichert werden", error);
-        }
+        setQuickWinSortDirty(true);
       });
     });
   }
 
+  if (quickWinSortSave) {
+    quickWinSortSave.addEventListener("click", async () => {
+      if (!quickWinSortDirty) {
+        return;
+      }
+      try {
+        await persistQuickWinSort();
+        setQuickWinSortDirty(false);
+      } catch (error) {
+        console.error("Quick-Win-Sortierung konnte nicht gespeichert werden", error);
+      }
+    });
+  }
+
+  quickWinToggleButtons.forEach((button) => {
+    button.addEventListener("click", () => {
+      const targetId = button.dataset.target;
+      if (!targetId) {
+        return;
+      }
+
+      const target = document.getElementById(targetId);
+      if (!target) {
+        return;
+      }
+
+      const willOpen = target.hidden;
+
+      document.querySelectorAll("[data-quick-win-edit]").forEach((editForm) => {
+        editForm.hidden = true;
+      });
+      quickWinToggleButtons.forEach((toggle) => {
+        toggle.setAttribute("aria-expanded", "false");
+        toggle.textContent = "Bearbeiten";
+      });
+
+      if (willOpen) {
+        target.hidden = false;
+        button.setAttribute("aria-expanded", "true");
+        button.textContent = "Schließen";
+      }
+    });
+  });
+
   const pushButton = document.getElementById("pushToggle");
   const pushHint = document.getElementById("pushHint");
   const vapidKey = document.body.dataset.pushKey;