WebUI: Improve table overflow handling

This PR relies on flexbox to ensure all WebUI tables are the correct height without overflowing. Table headers are now always visible and JS-based dynamic resizing is no longer needed.

PR #21652.

src/webui/www/private/css/Layout.css

@@ -246,6 +246,7 @@ li.divider {
 }
 
 .pad {
+    height: 100%;
     padding: 8px;
 }
 

src/webui/www/private/css/dynamicTable.css

@@ -32,6 +32,11 @@
     vertical-align: middle;
 }
 
+#transferList #transferList_pad {
+    /* override for default mocha inline style */
+    display: flex !important;
+}
+
 tr.dynamicTableHeader {
     cursor: pointer;
 }
@@ -82,7 +87,14 @@ tr.dynamicTableHeader {
     padding-left: 25px;
 }
 
+div:has(> div.dynamicTableFixedHeaderDiv):not(.invisible) {
+    display: flex;
+    flex-direction: column;
+    height: 100%;
+}
+
 .dynamicTableFixedHeaderDiv {
+    flex-shrink: 0;
     overflow: hidden;
 }
 
@@ -92,6 +104,7 @@ tr.dynamicTableHeader {
 }
 
 .dynamicTableDiv {
+    flex-grow: 1;
     overflow: auto;
 }
 

src/webui/www/private/css/style.css

@@ -270,6 +270,14 @@ a.propButton img {
     overflow: hidden auto;
 }
 
+.propertiesTabContent {
+    height: 100%;
+
+    > div {
+        height: 100%;
+    }
+}
+
 /* context menu specific */
 
 .contextMenu {