fix: scrolling issue

public/index.html

@@ -53,6 +53,17 @@
                     <div class="loading">
                         <div>Loading cluster members...</div>
                     </div>
+                    
+                    <!-- Test content to verify scrolling -->
+                    <div style="height: 2000px; background: linear-gradient(to bottom, rgba(255,0,0,0.1), rgba(0,255,0,0.1), rgba(0,0,255,0.1)); padding: 20px; margin: 20px 0; border-radius: 10px; border: 1px solid rgba(255,255,255,0.2);">
+                        <h3 style="color: white; margin-bottom: 20px;">Test Scrolling Content</h3>
+                        <p style="color: rgba(255,255,255,0.8); margin-bottom: 15px;">This is test content to verify that scrolling works properly when elements are outside the visible screen height.</p>
+                        <p style="color: rgba(255,255,255,0.8); margin-bottom: 15px;">You should be able to scroll down to see this content and scroll back up to the top.</p>
+                        <p style="color: rgba(255,255,255,0.8); margin-bottom: 15px;">If scrolling is not working, there may be CSS issues preventing it.</p>
+                        <div style="text-align: center; margin-top: 50px;">
+                            <span style="color: #4ade80; font-size: 1.2rem;">✓ Scrolling is working if you can see this!</span>
+                        </div>
+                    </div>
                 </div>
             </div>
         </div>
@@ -129,6 +140,17 @@
                     
                     <div class="firmware-nodes-list" id="firmware-nodes-list">
                         <!-- Nodes will be populated here -->
+                        
+                        <!-- Test content to verify scrolling -->
+                        <div style="height: 1500px; background: linear-gradient(to bottom, rgba(255,0,0,0.1), rgba(0,255,0,0.1), rgba(0,0,255,0.1)); padding: 20px; margin: 20px 0; border-radius: 10px; border: 1px solid rgba(255,255,255,0.2);">
+                            <h3 style="color: white; margin-bottom: 20px;">Firmware View Test Scrolling</h3>
+                            <p style="color: rgba(255,255,255,0.8); margin-bottom: 15px;">This is test content in the firmware view to verify that scrolling works properly.</p>
+                            <p style="color: rgba(255,255,255,0.8); margin-bottom: 15px;">You should be able to scroll down to see this content and scroll back up to the top.</p>
+                            <p style="color: rgba(255,255,255,0.8); margin-bottom: 15px;">If scrolling is not working, there may be CSS issues preventing it.</p>
+                            <div style="text-align: center; margin-top: 50px;">
+                                <span style="color: #4ade80; font-size: 1.2rem;">✓ Firmware scrolling is working if you can see this!</span>
+                            </div>
+                        </div>
                     </div>
                 </div>
             </div>

public/styles.css

@@ -12,7 +12,7 @@ body {
     color: #ecf0f1;
     display: flex;
     flex-direction: column;
-    overflow: hidden;  /* Prevent body from growing beyond viewport */
+    overflow: hidden;  /* Keep this to prevent body scrolling */
 }
 
 .container {
@@ -24,7 +24,7 @@ body {
     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 */
+    overflow: hidden;  /* Keep this to maintain layout constraints */
 }
 
 /* Header styles removed - integrated into navigation */
@@ -279,6 +279,7 @@ p {
 	border-color: rgba(255, 255, 255, 0.2);
 	box-shadow: 0 8px 32px rgba(0, 0, 0, 0.6);
 	z-index: 5;
+    overflow: visible;  /* Allow content to expand */
 }
 
 .member-card.expanded:hover {
@@ -1003,6 +1004,10 @@ p {
     display: none;
     opacity: 0;
     transition: opacity 0.2s ease-in-out;
+    overflow-y: auto;  /* Allow vertical scrolling on content */
+    max-height: 100%;  /* Allow content to use available height */
+    flex: 1;  /* Take up available space */
+    flex-direction: column;  /* Stack content vertically */
 }
 
 .view-content.active {
@@ -1012,7 +1017,9 @@ p {
 
 /* 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 */
+    display: flex;  /* Use flex display for proper layout */
+    flex-direction: column;  /* Stack content vertically */
+    overflow-y: auto;  /* Allow vertical scrolling */
 }
 
 /* Firmware Section Styles */
@@ -1025,7 +1032,7 @@ p {
     padding: 0.75rem;
     margin-bottom: 1rem;
     position: relative;
-    overflow: hidden;
+    overflow: visible;  /* Allow content to expand and scroll */
 }
 
 .firmware-section::before {
@@ -2522,7 +2529,7 @@ p {
     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 */
+    overflow: hidden;  /* Keep this for topology view since it has its own scrolling */
 }
 
 /* Ensure other views work properly with flexbox */
@@ -3013,3 +3020,119 @@ p {
 		font-size: 0.95rem;
 	}
 }
+
+#cluster-members-container {
+    overflow-y: auto;  /* Allow vertical scrolling */
+    max-height: calc(100vh - 200px);  /* Leave space for header and navigation */
+    padding-right: 0.5rem;  /* Add some padding for scrollbar */
+}
+
+#firmware-container {
+    overflow-y: auto;  /* Allow vertical scrolling */
+    max-height: calc(100vh - 200px);  /* Leave space for header and navigation */
+    padding-right: 0.5rem;  /* Add some padding for scrollbar */
+}
+
+/* Ensure proper scrolling for expanded member cards */
+.member-card.expanded {
+    background: rgba(0, 0, 0, 0.6);
+    border-color: rgba(255, 255, 255, 0.2);
+    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.6);
+    z-index: 5;
+    overflow: visible;  /* Allow content to expand */
+}
+
+/* Custom scrollbar styling for better UX */
+.view-content::-webkit-scrollbar,
+#cluster-members-container::-webkit-scrollbar,
+#firmware-container::-webkit-scrollbar {
+    width: 8px;
+}
+
+.view-content::-webkit-scrollbar-track,
+#cluster-members-container::-webkit-scrollbar-track,
+#firmware-container::-webkit-scrollbar-track {
+    background: rgba(255, 255, 255, 0.1);
+    border-radius: 4px;
+}
+
+.view-content::-webkit-scrollbar-thumb,
+#cluster-members-container::-webkit-scrollbar-thumb,
+#firmware-container::-webkit-scrollbar-thumb {
+    background: rgba(255, 255, 255, 0.3);
+    border-radius: 4px;
+    transition: background 0.2s ease;
+}
+
+.view-content::-webkit-scrollbar-thumb:hover,
+#cluster-members-container::-webkit-scrollbar-thumb:hover,
+#firmware-container::-webkit-scrollbar-thumb:hover {
+    background: rgba(255, 255, 255, 0.5);
+}
+
+.firmware-nodes-list {
+    overflow-y: auto;  /* Allow vertical scrolling */
+    max-height: calc(100vh - 300px);  /* Leave space for header, navigation, and upload area */
+    padding-right: 0.5rem;  /* Add some padding for scrollbar */
+}
+
+.firmware-nodes-list::-webkit-scrollbar {
+    width: 8px;
+}
+
+.firmware-nodes-list::-webkit-scrollbar-track {
+    background: rgba(255, 255, 255, 0.1);
+    border-radius: 4px;
+}
+
+.firmware-nodes-list::-webkit-scrollbar-thumb {
+    background: rgba(255, 255, 255, 0.3);
+    border-radius: 4px;
+    transition: background 0.2s ease;
+}
+
+.firmware-nodes-list::-webkit-scrollbar-thumb:hover {
+    background: rgba(255, 255, 255, 0.5);
+}
+
+/* Responsive scrolling adjustments */
+@media (max-width: 768px) {
+    #cluster-members-container,
+    #firmware-container,
+    .firmware-nodes-list {
+        max-height: calc(100vh - 180px);  /* Adjust for mobile layout */
+        padding-right: 0.25rem;  /* Reduce padding on mobile */
+    }
+    
+    .view-content {
+        max-height: calc(100vh - 180px);  /* Adjust for mobile layout */
+    }
+}
+
+@media (max-width: 480px) {
+    #cluster-members-container,
+    #firmware-container,
+    .firmware-nodes-list {
+        max-height: calc(100vh - 160px);  /* Further adjust for small screens */
+        padding-right: 0.25rem;
+    }
+    
+    .view-content {
+        max-height: calc(100vh - 160px);  /* Further adjust for small screens */
+    }
+}
+
+/* Ensure smooth scrolling behavior */
+html {
+    scroll-behavior: smooth;
+}
+
+/* Improve touch scrolling on mobile devices */
+.view-content,
+#cluster-members-container,
+#firmware-container,
+.firmware-nodes-list {
+    -webkit-overflow-scrolling: touch;  /* Smooth scrolling on iOS */
+    scrollbar-width: thin;  /* Thin scrollbar on Firefox */
+    scrollbar-color: rgba(255, 255, 255, 0.3) rgba(255, 255, 255, 0.1);  /* Firefox scrollbar colors */
+}