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;
+    width: 42px;
-    height: 48px;
+    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;
+    padding: 6px 11px;
-    text-align: left;
+    font-size: 0.84rem;
-    justify-content: flex-start;
+    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);
         }
+        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;

app/templates/settings/quick_wins.html

@@ -38,15 +38,42 @@
       <h2>Aktive Quick-Wins bearbeiten</h2>
       <p class="muted">Per Drag & Drop kannst du die Reihenfolge festlegen, die später auch bei den Quick-Win-Chips erscheint.</p>
       <input type="hidden" id="quickWinSortToken" value="{{ csrf_token() }}">
+      <div class="quick-win-list__toolbar">
+        <button type="button" class="button button--secondary" id="quickWinSortSave" disabled>Reihenfolge speichern</button>
+      </div>
       <div class="quick-win-list" data-quick-win-sort-list>
         {% for quick_win in quick_wins %}
           <article class="quick-win-manage-card" draggable="true" data-quick-win-sort-item="{{ quick_win.id }}">
-            <form method="post" action="{{ url_for('settings.update_quick_win', quick_win_id=quick_win.id) }}" class="quick-win-manage-form">
+            <div class="quick-win-manage-card__summary">
-              <input type="hidden" name="csrf_token" value="{{ csrf_token() }}">
               <div class="quick-win-manage-card__drag">
                 {{ nav_icon('list') }}
                 <span>Ziehen zum Sortieren</span>
               </div>
+              <div class="quick-win-manage-card__title">
+                <strong>{{ quick_win.title }}</strong>
+              </div>
+              <div class="quick-win-manage-card__actions">
+                <button
+                  type="button"
+                  class="button button--ghost"
+                  data-quick-win-toggle
+                  data-target="quick-win-edit-{{ quick_win.id }}"
+                  aria-expanded="false"
+                  aria-controls="quick-win-edit-{{ quick_win.id }}"
+                >
+                  Bearbeiten
+                </button>
+              </div>
+            </div>
+            <form
+              method="post"
+              action="{{ url_for('settings.update_quick_win', quick_win_id=quick_win.id) }}"
+              class="quick-win-manage-form"
+              id="quick-win-edit-{{ quick_win.id }}"
+              data-quick-win-edit
+              hidden
+            >
+              <input type="hidden" name="csrf_token" value="{{ csrf_token() }}">
               <div class="field">
                 <label for="quick-win-title-{{ quick_win.id }}">Titel</label>
                 <input id="quick-win-title-{{ quick_win.id }}" type="text" name="title" value="{{ quick_win.title }}" minlength="2" maxlength="160" required>