From 8ee7b135af685679ee87216e476d9225bb690376 Mon Sep 17 00:00:00 2001
From: Sandro <mail@sandrodach.de>
Date: Tue, 27 Oct 2026 11:07:36 +0100
Subject: [PATCH] style(tasks,lists): align header spacing with workspace by
 eliminating top margin

---
 .../src/features/lists/SharedListsView.tsx    | 90 +++++++++----------
 frontend/src/features/triage/TasksView.tsx    | 58 ++++++------
 2 files changed, 74 insertions(+), 74 deletions(-)

diff --git a/frontend/src/features/lists/SharedListsView.tsx b/frontend/src/features/lists/SharedListsView.tsx
index 03b737d..49f9484 100644
--- a/frontend/src/features/lists/SharedListsView.tsx
+++ b/frontend/src/features/lists/SharedListsView.tsx
@@ -794,52 +794,8 @@ export const SharedListsView: React.FC<SharedListsViewProps> = ({ onRefreshGloba
 
   return (
     <div className="w-full space-y-3">
-      {/* Mobile Compact Header Bar (List switching & actions live in MindSift Logo Menu) */}
-      <div className="flex sm:hidden items-center justify-between gap-2 px-3 py-2 rounded-btn bg-panel border border-border">
-        <div className="flex items-center gap-2 min-w-0">
-          <span className="text-sm font-semibold text-main truncate">
-            {activeList ? `${activeList.icon} ${activeList.title}` : '🛒 Einkaufsliste'}
-          </span>
-          {openItems.length > 0 && (
-            <span className="badge-neutral text-[11px] flex-shrink-0">
-              {openItems.length} offen
-            </span>
-          )}
-        </div>
-        <div className="flex items-center gap-1.5 flex-shrink-0">
-          {activeList && (
-            <button
-              type="button"
-              onClick={openShareModal}
-              className="btn-icon min-h-[36px] min-w-[36px] flex items-center justify-center"
-              title="Liste teilen"
-            >
-              <Users className="w-4 h-4 text-accent" />
-            </button>
-          )}
-          <div
-            className={`h-9 w-9 flex items-center justify-center rounded-btn border transition-colors ${
-              wsConnected
-                ? realtimeTransport === 'sse'
-                  ? 'bg-teal-500/10 border-teal-500/30 text-teal-400'
-                  : 'bg-emerald-500/10 border-emerald-500/30 text-emerald-500'
-                : 'bg-canvas border-border text-muted'
-            }`}
-            title={
-              wsConnected
-                ? realtimeTransport === 'sse'
-                  ? 'Live synchronisiert (Server-Sent Events / Proxy-Stream)'
-                  : 'Live synchronisiert (WebSocket online)'
-                : 'Offline'
-            }
-          >
-            <Radio className={`w-3.5 h-3.5 ${wsConnected ? 'animate-pulse' : ''}`} />
-          </div>
-        </div>
-      </div>
-
       {/* Top Header: List Tabs & Actions (Desktop) */}
-      <div className="hidden sm:flex flex-wrap items-center justify-between gap-2 border-b border-border pb-2">
+      <div className="hidden sm:flex flex-wrap items-center justify-between gap-2 border-b border-border pb-2 !mt-0">
         {/* List Tabs */}
         <div className="flex flex-wrap items-center gap-1">
           {lists.map((lst) => {
@@ -952,6 +908,50 @@ export const SharedListsView: React.FC<SharedListsViewProps> = ({ onRefreshGloba
         </div>
       </div>
 
+      {/* Mobile Compact Header Bar (List switching & actions live in MindSift Logo Menu) */}
+      <div className="flex sm:hidden items-center justify-between gap-2 px-3 py-2 rounded-btn bg-panel border border-border !mt-0">
+        <div className="flex items-center gap-2 min-w-0">
+          <span className="text-sm font-semibold text-main truncate">
+            {activeList ? `${activeList.icon} ${activeList.title}` : '🛒 Einkaufsliste'}
+          </span>
+          {openItems.length > 0 && (
+            <span className="badge-neutral text-[11px] flex-shrink-0">
+              {openItems.length} offen
+            </span>
+          )}
+        </div>
+        <div className="flex items-center gap-1.5 flex-shrink-0">
+          {activeList && (
+            <button
+              type="button"
+              onClick={openShareModal}
+              className="btn-icon min-h-[36px] min-w-[36px] flex items-center justify-center"
+              title="Liste teilen"
+            >
+              <Users className="w-4 h-4 text-accent" />
+            </button>
+          )}
+          <div
+            className={`h-9 w-9 flex items-center justify-center rounded-btn border transition-colors ${
+              wsConnected
+                ? realtimeTransport === 'sse'
+                  ? 'bg-teal-500/10 border-teal-500/30 text-teal-400'
+                  : 'bg-emerald-500/10 border-emerald-500/30 text-emerald-500'
+                : 'bg-canvas border-border text-muted'
+            }`}
+            title={
+              wsConnected
+                ? realtimeTransport === 'sse'
+                  ? 'Live synchronisiert (Server-Sent Events / Proxy-Stream)'
+                  : 'Live synchronisiert (WebSocket online)'
+                : 'Offline'
+            }
+          >
+            <Radio className={`w-3.5 h-3.5 ${wsConnected ? 'animate-pulse' : ''}`} />
+          </div>
+        </div>
+      </div>
+
       {showNewListModal && (
         <form
           onSubmit={handleCreateList}
diff --git a/frontend/src/features/triage/TasksView.tsx b/frontend/src/features/triage/TasksView.tsx
index de19dd4..3c057e4 100644
--- a/frontend/src/features/triage/TasksView.tsx
+++ b/frontend/src/features/triage/TasksView.tsx
@@ -1264,36 +1264,8 @@ export const TasksView: React.FC<TasksViewProps> = ({
 
   return (
     <div className="w-full space-y-3">
-      {/* Mobile Compact Context Bar (replaces cluttered button rows; options live in MindSift Logo Menu) */}
-      <div className="flex sm:hidden items-center justify-between gap-2 px-3 py-2 rounded-btn bg-panel border border-border">
-        <div className="flex items-center gap-2 min-w-0">
-          <span className="text-sm font-semibold text-main truncate">
-            {currentSelectedList ? `${currentSelectedList.icon} ${currentSelectedList.title}` : '📋 Alle Aufgaben'}
-          </span>
-          <span className="badge-neutral text-[11px] flex-shrink-0">
-            {viewMode === 'kanban'
-              ? 'Kanban'
-              : filter === 'open'
-              ? `Offen (${openTasks.length})`
-              : filter === 'done'
-              ? `Erledigt (${doneTasks.length})`
-              : `Papierkorb (${safeDiscarded.length})`}
-          </span>
-        </div>
-        {currentSelectedList && (
-          <button
-            type="button"
-            onClick={() => handleOpenShareModal(currentSelectedList)}
-            className="btn-icon min-h-[36px] min-w-[36px] flex items-center justify-center flex-shrink-0"
-            title="Aufgabenliste teilen"
-          >
-            <Users className="w-4 h-4 text-accent" />
-          </button>
-        )}
-      </div>
-
       {/* Top Header: Task Lists Tabs & View Mode Switcher (Desktop) */}
-      <div className="hidden sm:flex flex-wrap items-center justify-between gap-2 border-b border-border pb-2">
+      <div className="hidden sm:flex flex-wrap items-center justify-between gap-2 border-b border-border pb-2 !mt-0">
         {/* Task Lists selector tabs */}
         <div className="flex flex-wrap items-center gap-1">
           <button
@@ -1448,6 +1420,34 @@ export const TasksView: React.FC<TasksViewProps> = ({
         </div>
       </div>
 
+      {/* Mobile Compact Context Bar (replaces cluttered button rows; options live in MindSift Logo Menu) */}
+      <div className="flex sm:hidden items-center justify-between gap-2 px-3 py-2 rounded-btn bg-panel border border-border !mt-0">
+        <div className="flex items-center gap-2 min-w-0">
+          <span className="text-sm font-semibold text-main truncate">
+            {currentSelectedList ? `${currentSelectedList.icon} ${currentSelectedList.title}` : '📋 Alle Aufgaben'}
+          </span>
+          <span className="badge-neutral text-[11px] flex-shrink-0">
+            {viewMode === 'kanban'
+              ? 'Kanban'
+              : filter === 'open'
+              ? `Offen (${openTasks.length})`
+              : filter === 'done'
+              ? `Erledigt (${doneTasks.length})`
+              : `Papierkorb (${safeDiscarded.length})`}
+          </span>
+        </div>
+        {currentSelectedList && (
+          <button
+            type="button"
+            onClick={() => handleOpenShareModal(currentSelectedList)}
+            className="btn-icon min-h-[36px] min-w-[36px] flex items-center justify-center flex-shrink-0"
+            title="Aufgabenliste teilen"
+          >
+            <Users className="w-4 h-4 text-accent" />
+          </button>
+        )}
+      </div>
+
       {/* Quick Add Task Input (Desktop only - on mobile, tapping the bottom '+' FAB opens mobile create sheet) */}
       <form
         onSubmit={handleQuickAddTask}