From 389bb733c00c06e3bcc52607bff3d3d946c68dc3 Mon Sep 17 00:00:00 2001 From: Patrick Balsiger Date: Sat, 30 Aug 2025 20:51:51 +0200 Subject: [PATCH] fix: scrolling issue --- public/index.html | 22 ++++++++ public/styles.css | 133 ++++++++++++++++++++++++++++++++++++++++++++-- 2 files changed, 150 insertions(+), 5 deletions(-) diff --git a/public/index.html b/public/index.html index 15cff54..252dcdd 100644 --- a/public/index.html +++ b/public/index.html @@ -53,6 +53,17 @@
Loading cluster members...
+ + +
+

Test Scrolling Content

+

This is test content to verify that scrolling works properly when elements are outside the visible screen height.

+

You should be able to scroll down to see this content and scroll back up to the top.

+

If scrolling is not working, there may be CSS issues preventing it.

+
+ ✓ Scrolling is working if you can see this! +
+
@@ -129,6 +140,17 @@
+ + +
+

Firmware View Test Scrolling

+

This is test content in the firmware view to verify that scrolling works properly.

+

You should be able to scroll down to see this content and scroll back up to the top.

+

If scrolling is not working, there may be CSS issues preventing it.

+
+ ✓ Firmware scrolling is working if you can see this! +
+
diff --git a/public/styles.css b/public/styles.css index 081eb60..1d5d972 100644 --- a/public/styles.css +++ b/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 */ @@ -3012,4 +3019,120 @@ p { padding: 0.75rem; 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 */ } \ No newline at end of file