feat(dashboard): add zoom and fit navigation to graph and fix kanban flex layout overflow

server/src/dashboard.html

@@ -14,7 +14,7 @@
         .panel h2 { margin-top: 0; margin-bottom: 15px; color: #34495e; font-size: 1.2em; border-bottom: 1px solid #ecf0f1; padding-bottom: 10px; }
         
         /* Graph Panel */
-        .graph-panel { flex: 2; }
+        .graph-panel { flex: 2; position: relative; display: flex; flex-direction: column; }
         #network-container { flex: 1; min-height: 400px; position: relative; border: 1px solid #bdc3c7; border-radius: 4px; background: #fafafa; }
         
         /* Right Column */
@@ -28,11 +28,16 @@
         .search-result-item strong { color: #2980b9; display: block; }
         
         /* Kanban Panel */
-        .kanban-panel { flex: 1.5; }
+        .kanban-panel { flex: 1.5; display: flex; flex-direction: column; min-height: 0; }
-        .kanban-board { display: flex; gap: 10px; height: 100%; }
+        .kanban-board { display: flex; gap: 10px; flex: 1; min-height: 0; }
-        .kanban-column { flex: 1; background: #f8f9fa; border-radius: 4px; padding: 10px; display: flex; flex-direction: column; }
+        .kanban-column { flex: 1; background: #f8f9fa; border-radius: 4px; padding: 10px; display: flex; flex-direction: column; min-height: 0; }
         .kanban-column h3 { margin: 0 0 10px 0; font-size: 0.9em; color: #7f8c8d; text-align: center; }
-        .kanban-items { flex: 1; overflow-y: auto; display: flex; flex-direction: column; gap: 8px; }
+                .kanban-items { flex: 1; overflow-y: auto; display: flex; flex-direction: column; gap: 8px; min-height: 0; padding-right: 5px; }
+        
+        /* Graph Controls */
+        .graph-controls { position: absolute; top: 50px; right: 30px; z-index: 10; display: flex; flex-direction: column; gap: 5px; }
+        .graph-controls button { background: white; border: 1px solid #bdc3c7; border-radius: 4px; width: 30px; height: 30px; cursor: pointer; font-weight: bold; }
+        .graph-controls button:hover { background: #ecf0f1; }
         .task-card { background: white; padding: 8px; border-radius: 4px; border-left: 4px solid #3498db; font-size: 0.85em; box-shadow: 0 1px 3px rgba(0,0,0,0.1); }
         .task-card.completed { border-left-color: #2ecc71; opacity: 0.7; }
         
@@ -51,8 +56,14 @@
     <div class="main-container">
                 <div class="panel graph-panel">
             <h2>Knowledge Graph</h2>
+            <div class="graph-controls">
+                <button onclick="zoomGraph(0.2)" title="Zoom In">+</button>
+                <button onclick="zoomGraph(-0.2)" title="Zoom Out">-</button>
+                <button onclick="resetGraph()" title="Reset View">⌂</button>
+            </div>
             <div id="network-container"></div>
         </div>
+        </div>
         
         <div class="right-column">
             <div class="panel search-panel">
@@ -83,6 +94,17 @@
     </div>
 
     <script>
+                // Graph Controls
+        function zoomGraph(step) {
+            if (!network) return;
+            const currentScale = network.getScale();
+            network.moveTo({ scale: currentScale * (1 + step) });
+        }
+        function resetGraph() {
+            if (!network) return;
+            network.fit({ animation: { duration: 500, easingFunction: 'easeInOutQuad' } });
+        }
+
         // Graph Initialization
         let network = null;
         async function loadGraph() {
@@ -205,3 +227,4 @@
 
 
 
+