fix: topology container height

public/styles.css

@@ -7,14 +7,24 @@
 body {
     font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, sans-serif;
     background: linear-gradient(135deg, #2c3e50 0%, #34495e 50%, #1a252f 100%);
-    min-height: 100vh;
+    height: 100vh;  /* Fixed height instead of min-height */
     padding: 1rem;
     color: #ecf0f1;
+    display: flex;
+    flex-direction: column;
+    overflow: hidden;  /* Prevent body from growing beyond viewport */
 }
 
 .container {
-    max-width: 1200px;
+    max-width: none;  /* Remove width constraint for full screen coverage */
+    width: 100%;
     margin: 0 auto;
+    display: flex;
+    flex-direction: column;
+    flex: 1;
+    padding: 0 2rem;  /* Increase horizontal padding for better spacing */
+    max-height: calc(100vh - 2rem);  /* Constrain to viewport height minus body padding */
+    overflow: hidden;  /* Prevent container from growing beyond bounds */
 }
 
 /* Header styles removed - integrated into navigation */
@@ -233,7 +243,7 @@ p {
 		display: inline-flex;
 		align-items: center;
 		font-size: 0.75rem;
-		padding: 0.25rem 0.6rem;
+		padding: 0.3rem 0.7rem;
 		border-radius: 9999px;
 		background: rgba(30, 58, 138, 0.35);
 		border: 1px solid rgba(59, 130, 246, 0.4);
@@ -804,10 +814,15 @@ p {
 }
 
 .view-content.active {
-    display: block;
+    display: flex;
     opacity: 1;
 }
 
+/* Special handling for cluster and firmware views to ensure proper width */
+#cluster-view.active, #firmware-view.active {
+    display: block;  /* Use block display for proper width inheritance */
+}
+
 /* Firmware Section Styles */
 .firmware-section {
     background: rgba(0, 0, 0, 0.3);
@@ -2308,22 +2323,37 @@ p {
 
 /* Topology View Styles */
 #topology-view {
-    height: 100%;
+    flex: 1;  /* Take up remaining space */
     padding: 0;
-    min-height: 100vh;  /* Ensure full viewport height */
+    margin: 0;
+    position: relative;
+    width: 100%;  /* Use full container width */
+    min-height: 0;  /* Allow flex item to shrink */
+    max-height: 100vh;  /* Never exceed viewport height */
+    overflow: hidden;  /* Prevent content from exceeding bounds */
+}
+
+/* Ensure other views work properly with flexbox */
+#cluster-view, #firmware-view {
+    flex: 0 0 auto;  /* Don't grow or shrink, use natural size */
+    width: 100%;  /* Use full container width */
 }
 
 #topology-graph-container {
     background: rgba(0, 0, 0, 0.2);
     border-radius: 12px;
     box-shadow: 0 4px 16px rgba(0, 0, 0, 0.3);
-    min-height: 100%;
-    height: 100vh;  /* Use full viewport height */
+    height: 100%;
+    width: 100%;
+    margin: 0;
+    padding: 0;
     display: flex;
     align-items: center;
     justify-content: center;
     overflow: hidden;
     border: 1px solid rgba(255, 255, 255, 0.1);
+    box-sizing: border-box;
+    max-height: 100%;  /* Ensure it doesn't exceed parent height */
 }
 
 #topology-graph-container svg {