From 88a1a787433de5357a87cab0a6f999f66a6de027 Mon Sep 17 00:00:00 2001
From: "Konrad M." <github@0bs.de>
Date: Tue, 21 Apr 2026 21:53:17 +0200
Subject: [PATCH] fix(tasks): reorder toolbar buttons; wrap list in tasks-body;
 remove flex-wrap on mobile
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

group-mode toggle moved before view toggle in markup order.
Filter panel, task list, and FAB wrapped in .tasks-body for scroll containment.
tasks-toolbar flex-wrap removed — actions stay on one line on narrow screens.
---
 public/pages/tasks.js   | 34 ++++++++++++++++++----------------
 public/styles/tasks.css | 32 +++++++++++++++++---------------
 2 files changed, 35 insertions(+), 31 deletions(-)

diff --git a/public/pages/tasks.js b/public/pages/tasks.js
index 5cb2c1a..91ce4ec 100644
--- a/public/pages/tasks.js
+++ b/public/pages/tasks.js
@@ -1430,6 +1430,10 @@ export async function render(container, { user }) {
       <div class="tasks-toolbar">
         <h1 class="tasks-toolbar__title">${t('tasks.title')}</h1>
         <div class="tasks-toolbar__actions">
+          <div class="group-toggle" id="group-mode-toggle" ${isKanban ? 'style="display:none"' : ''}>
+            <button class="group-toggle__btn group-toggle__btn--active" data-mode="category">${t('tasks.categoryLabel')}</button>
+            <button class="group-toggle__btn" data-mode="due">${t('tasks.dueDateLabel')}</button>
+          </div>
           <div class="group-toggle" id="view-toggle">
             <button class="group-toggle__btn ${isKanban ? '' : 'group-toggle__btn--active'}" data-view="list"
                     title="${t('tasks.listView')}" aria-label="${t('tasks.listView')}">
@@ -1440,30 +1444,28 @@ export async function render(container, { user }) {
               <i data-lucide="columns" class="icon-md" aria-hidden="true"></i>
             </button>
           </div>
-          <div class="group-toggle" id="group-mode-toggle" ${isKanban ? 'style="display:none"' : ''}>
-            <button class="group-toggle__btn group-toggle__btn--active" data-mode="category">${t('tasks.categoryLabel')}</button>
-            <button class="group-toggle__btn" data-mode="due">${t('tasks.dueDateLabel')}</button>
-          </div>
           <button class="btn btn--primary" id="btn-new-task" style="gap:var(--space-1)">
             <i data-lucide="plus" class="icon-lg" aria-hidden="true"></i> ${t('tasks.newTask')}
           </button>
         </div>
       </div>
 
-      <div class="tasks-filters" id="filter-bar"></div>
-      <div class="filter-panel" id="filter-panel" hidden></div>
+      <div class="tasks-body">
+        <div class="tasks-filters" id="filter-bar"></div>
+        <div class="filter-panel" id="filter-panel" hidden></div>
 
-      <div id="task-list">
-        ${[1,2,3].map(() => `
-          <div class="widget-skeleton" style="margin-bottom:var(--space-2)">
-            <div class="skeleton skeleton-line skeleton-line--medium" style="height:18px;margin-bottom:var(--space-3)"></div>
-            <div class="skeleton skeleton-line skeleton-line--full" style="height:14px;margin-bottom:var(--space-2)"></div>
-            <div class="skeleton skeleton-line skeleton-line--short" style="height:12px"></div>
-          </div>`).join('')}
+        <div id="task-list">
+          ${[1,2,3].map(() => `
+            <div class="widget-skeleton" style="margin-bottom:var(--space-2)">
+              <div class="skeleton skeleton-line skeleton-line--medium" style="height:18px;margin-bottom:var(--space-3)"></div>
+              <div class="skeleton skeleton-line skeleton-line--full" style="height:14px;margin-bottom:var(--space-2)"></div>
+              <div class="skeleton skeleton-line skeleton-line--short" style="height:12px"></div>
+            </div>`).join('')}
+        </div>
+        <button class="page-fab" id="fab-new-task" aria-label="${t('tasks.newTask')}">
+          <i data-lucide="plus" class="icon-2xl" aria-hidden="true"></i>
+        </button>
       </div>
-      <button class="page-fab" id="fab-new-task" aria-label="${t('tasks.newTask')}">
-        <i data-lucide="plus" class="icon-2xl" aria-hidden="true"></i>
-      </button>
     </div>
   `;
 
diff --git a/public/styles/tasks.css b/public/styles/tasks.css
index bf9a830..46418c0 100644
--- a/public/styles/tasks.css
+++ b/public/styles/tasks.css
@@ -13,14 +13,17 @@
  * Seiten-Layout
  * -------------------------------------------------------- */
 .tasks-page {
-  padding: var(--space-4);
-  padding-bottom: var(--space-16);
   max-width: var(--content-max-width);
   margin: 0 auto;
 }
 
+.tasks-body {
+  padding: var(--space-4);
+  padding-bottom: var(--space-16);
+}
+
 @media (min-width: 1024px) {
-  .tasks-page {
+  .tasks-body {
     padding: var(--space-8);
     padding-bottom: var(--space-16);
   }
@@ -32,20 +35,18 @@
 .tasks-toolbar {
   display: flex;
   align-items: center;
-  gap: var(--space-3);
-  margin-bottom: var(--space-4);
-  flex-wrap: wrap;
+  gap: var(--space-2);
+  padding: var(--space-3) var(--space-4);
   border-top: 3px solid var(--module-accent);
+  border-bottom: 1px solid var(--color-border);
+  background-color: var(--color-surface);
 }
 
 .tasks-toolbar__title {
-  font-size: var(--text-2xl);
+  font-size: var(--text-lg);
   font-weight: var(--font-weight-bold);
-  flex: 1 1 auto;
-  min-width: min-content;
+  flex: 1;
   white-space: nowrap;
-  overflow: hidden;
-  text-overflow: ellipsis;
 }
 
 .tasks-toolbar__actions {
@@ -54,6 +55,7 @@
   gap: var(--space-2);
 }
 
+
 /* Gruppierungs-Toggle */
 .group-toggle {
   display: flex;
@@ -196,15 +198,15 @@
 }
 
 /* Filter-Panel */
-.filter-panel {
+.filter-panel:not([hidden]) {
+  display: flex;
+  flex-direction: column;
+  gap: var(--space-3);
   background-color: var(--color-surface);
   border: 1.5px solid var(--color-border);
   border-radius: var(--radius-md);
   padding: var(--space-3) var(--space-4);
   margin-bottom: var(--space-4);
-  display: flex;
-  flex-direction: column;
-  gap: var(--space-3);
 }
 
 .filter-panel__group {