fix: topology container height

public/components.js

@@ -2277,11 +2277,44 @@ class TopologyGraphComponent extends Component {
         this.svg = null;
         this.simulation = null;
         this.zoom = null;
-        this.width = 1400;  // Increased from 1000 for more space
-        this.height = 1000;  // Increased from 800 for more space
+        this.width = 0;  // Will be set dynamically based on container size
+        this.height = 0;  // Will be set dynamically based on container size
         this.isInitialized = false;
     }
 
+    updateDimensions(container) {
+        // Get the container's actual dimensions
+        const rect = container.getBoundingClientRect();
+        this.width = rect.width || 1400;  // Fallback to 1400 if width is 0
+        this.height = rect.height || 1000; // Fallback to 1000 if height is 0
+        
+        // Ensure minimum dimensions
+        this.width = Math.max(this.width, 800);
+        this.height = Math.max(this.height, 600);
+        
+        console.log('TopologyGraphComponent: Updated dimensions to', this.width, 'x', this.height);
+    }
+
+    handleResize() {
+        // Debounce resize events to avoid excessive updates
+        if (this.resizeTimeout) {
+            clearTimeout(this.resizeTimeout);
+        }
+        
+        this.resizeTimeout = setTimeout(() => {
+            const container = this.findElement('#topology-graph-container');
+            if (container && this.svg) {
+                this.updateDimensions(container);
+                // Update SVG viewBox and force center
+                this.svg.attr('viewBox', `0 0 ${this.width} ${this.height}`);
+                if (this.simulation) {
+                    this.simulation.force('center', d3.forceCenter(this.width / 2, this.height / 2));
+                    this.simulation.alpha(0.3).restart();
+                }
+            }
+        }, 250); // 250ms debounce
+    }
+
     // Override mount to ensure proper initialization
     mount() {
         if (this.isMounted) return;
@@ -2325,6 +2358,10 @@ class TopologyGraphComponent extends Component {
         console.log('TopologyGraphComponent: Container:', this.container);
         console.log('TopologyGraphComponent: Container ID:', this.container?.id);
         
+        // Add resize listener to update dimensions when window is resized
+        this.resizeHandler = this.handleResize.bind(this);
+        window.addEventListener('resize', this.resizeHandler);
+        
         // Refresh button removed from HTML, so no need to set up event listeners
         console.log('TopologyGraphComponent: No event listeners needed (refresh button removed)');
     }
@@ -2389,14 +2426,17 @@ class TopologyGraphComponent extends Component {
             return;
         }
 
+        // Calculate dynamic dimensions based on container size
+        this.updateDimensions(container);
+
         // Clear existing content
         container.innerHTML = '';
 
         // Create SVG element
         this.svg = d3.select(container)
             .append('svg')
-            .attr('width', this.width)
-            .attr('height', this.height)
+            .attr('width', '100%')
+            .attr('height', '100%')
             .attr('viewBox', `0 0 ${this.width} ${this.height}`)
             .style('border', '1px solid rgba(255, 255, 255, 0.1)')
             .style('background', 'rgba(0, 0, 0, 0.2)')
@@ -2887,6 +2927,22 @@ class TopologyGraphComponent extends Component {
         }
     }
 
+    unmount() {
+        // Clean up resize listener
+        if (this.resizeHandler) {
+            window.removeEventListener('resize', this.resizeHandler);
+            this.resizeHandler = null;
+        }
+        
+        // Clear resize timeout
+        if (this.resizeTimeout) {
+            clearTimeout(this.resizeTimeout);
+            this.resizeTimeout = null;
+        }
+        
+        // Call parent unmount
+        super.unmount();
+    }
 
 }