From 2a9ae61dceda18148abee2ceba06ed22ab83c4d0 Mon Sep 17 00:00:00 2001
From: Kelly <kelly@cannabrands.com>
Date: Thu, 11 Dec 2025 09:04:21 -0700
Subject: [PATCH] fix(ui): Make Tasks Dashboard header sticky
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

🤖 Generated with [Claude Code](https://claude.com/claude-code)

Co-Authored-By: Claude Opus 4.5 <noreply@anthropic.com>
---
 cannaiq/src/pages/TasksDashboard.tsx | 78 ++++++++++++++--------------
 1 file changed, 40 insertions(+), 38 deletions(-)

diff --git a/cannaiq/src/pages/TasksDashboard.tsx b/cannaiq/src/pages/TasksDashboard.tsx
index 8ed8f134..670ae295 100644
--- a/cannaiq/src/pages/TasksDashboard.tsx
+++ b/cannaiq/src/pages/TasksDashboard.tsx
@@ -256,46 +256,47 @@ export default function TasksDashboard() {
   return (
     <Layout>
       <div className="space-y-6">
-        {/* Header */}
-        <div className="flex flex-col sm:flex-row sm:items-center sm:justify-between gap-4">
-          <div>
-            <h1 className="text-2xl font-bold text-gray-900 flex items-center gap-2">
-              <ListChecks className="w-7 h-7 text-emerald-600" />
-              Task Queue
-            </h1>
-            <p className="text-gray-500 mt-1">
-              {totalActive} active, {totalPending} pending tasks
-            </p>
-          </div>
+        {/* Sticky Header */}
+        <div className="sticky top-0 z-10 bg-white pb-4 -mx-6 px-6 pt-2 border-b border-gray-200 shadow-sm">
+          <div className="flex flex-col sm:flex-row sm:items-center sm:justify-between gap-4">
+            <div>
+              <h1 className="text-2xl font-bold text-gray-900 flex items-center gap-2">
+                <ListChecks className="w-7 h-7 text-emerald-600" />
+                Task Queue
+              </h1>
+              <p className="text-gray-500 mt-1">
+                {totalActive} active, {totalPending} pending tasks
+              </p>
+            </div>
 
-          <div className="flex items-center gap-4">
-            {/* Worker Scaling */}
-            {k8sAvailable && (
-              <div className="flex items-center gap-2 px-3 py-2 bg-gray-100 rounded-lg">
-                <Server className="w-4 h-4 text-gray-500" />
-                <button
-                  onClick={() => scaleWorkers(-5)}
-                  disabled={scalingWorkers || workerReplicas === 0}
-                  className="p-1 hover:bg-gray-200 rounded disabled:opacity-50"
-                  title="Remove 5 workers"
-                >
-                  <Minus className="w-4 h-4" />
-                </button>
-                <span className={`min-w-[60px] text-center font-mono ${scalingWorkers ? 'animate-pulse' : ''}`}>
-                  {workerReady}/{workerReplicas}
-                </span>
-                <button
-                  onClick={() => scaleWorkers(5)}
-                  disabled={scalingWorkers || workerReplicas >= 50}
-                  className="p-1 hover:bg-gray-200 rounded disabled:opacity-50"
-                  title="Add 5 workers"
-                >
-                  <Plus className="w-4 h-4" />
-                </button>
-              </div>
-            )}
+            <div className="flex items-center gap-4">
+              {/* Worker Scaling */}
+              {k8sAvailable && (
+                <div className="flex items-center gap-2 px-3 py-2 bg-gray-100 rounded-lg">
+                  <Server className="w-4 h-4 text-gray-500" />
+                  <button
+                    onClick={() => scaleWorkers(-5)}
+                    disabled={scalingWorkers || workerReplicas === 0}
+                    className="p-1 hover:bg-gray-200 rounded disabled:opacity-50"
+                    title="Remove 5 workers"
+                  >
+                    <Minus className="w-4 h-4" />
+                  </button>
+                  <span className={`min-w-[60px] text-center font-mono ${scalingWorkers ? 'animate-pulse' : ''}`}>
+                    {workerReady}/{workerReplicas}
+                  </span>
+                  <button
+                    onClick={() => scaleWorkers(5)}
+                    disabled={scalingWorkers || workerReplicas >= 50}
+                    className="p-1 hover:bg-gray-200 rounded disabled:opacity-50"
+                    title="Add 5 workers"
+                  >
+                    <Plus className="w-4 h-4" />
+                  </button>
+                </div>
+              )}
 
-            {/* Pool Toggle */}
+              {/* Pool Toggle */}
             <button
               onClick={togglePool}
               disabled={poolLoading}
@@ -318,6 +319,7 @@ export default function TasksDashboard() {
               )}
             </button>
             <span className="text-sm text-gray-400">Auto-refreshes every 15s</span>
+            </div>
           </div>
         </div>