feat: keep tabs and table headers sticky, scroll table bodies

packages/web/src/elements/TabControl.svelte

@@ -15,7 +15,10 @@
   export let menu = null;
   export let isInline = false;
   export let containerMaxWidth = undefined;
+  export let containerMaxHeight = undefined;
   export let flex1 = true;
+  export let flexColContainer = true;
+  export let maxHeight100 = false;
   export let contentTestId = undefined;
   export let inlineTabs = false;
   export let onUserChange = null;
@@ -28,7 +31,7 @@
   }
 </script>
 
-<div class="main" class:flex1>
+<div class="main" class:maxHeight100 class:flex1>
   <div class="tabs" class:inlineTabs>
     {#each _.compact(tabs) as tab, index}
       <div
@@ -50,9 +53,16 @@
     {/if}
   </div>
 
-  <div class="content-container" data-testid={contentTestId}>
+  <div class="content-container" style:max-height={containerMaxHeight} data-testid={contentTestId}>
     {#each _.compact(tabs) as tab, index}
-      <div class="container" class:isInline class:tabVisible={index == value} style:max-width={containerMaxWidth}>
+      <div
+        class="container"
+        class:flexColContainer
+        class:maxHeight100
+        class:isInline
+        class:tabVisible={index == value}
+        style:max-width={containerMaxWidth}
+      >
         <svelte:component
           this={tab.component}
           {...tab.props}
@@ -88,6 +98,10 @@
     max-width: 100%;
   }
 
+  .main.maxHeight100 {
+    max-height: 100%;
+  }
+
   .tabs {
     display: flex;
     height: var(--dim-tabs-height);
@@ -137,6 +151,15 @@
     position: relative;
   }
 
+  .container.maxHeight100 {
+    max-height: 100%;
+  }
+
+  .container.flexColContainer {
+    display: flex;
+    flex-direction: column;
+  }
+
   .container:not(.isInline) {
     position: absolute;
     display: flex;

packages/web/src/tabs/ServerSummaryTab.svelte

@@ -96,9 +96,12 @@
       <div class="wrapper">
         <TabControl
           isInline
-          inlineTabs={true}
+          inlineTabs
           containerMaxWidth="100%"
-          flex1={true}
+          containerMaxHeight="calc(100% - 34px)"
+          maxHeight100
+          flex1
+          flexColContainer
           value={$serverSummarySelectedTab}
           onUserChange={index => serverSummarySelectedTab.set(index)}
           tabs={[
@@ -140,7 +143,9 @@
     right: 0;
     bottom: 0;
     background-color: var(--theme-bg-0);
-    overflow: auto;
+    height: 100%;
+    display: flex;
+    flex-direction: column;
   }
 
   .action-separator {
@@ -151,6 +156,7 @@
     display: flex;
     align-items: center;
     justify-content: center;
+    flex: 1;
   }
 
   .error-message {

packages/web/src/widgets/SummaryDatabases.svelte

@@ -23,12 +23,14 @@
   }));
 </script>
 
-<div>
+<div class="wrapper">
   <TableControl {filters} stickyHeader {rows} columns={tableColumns} />
 </div>
 
 <style>
-  div {
+  .wrapper {
-    padding: 10px;
+    flex-grow: 1;
+    overflow-y: auto;
+    max-height: 100%;
   }
 </style>

packages/web/src/widgets/SummaryProcesses.svelte

@@ -80,7 +80,7 @@
   });
 </script>
 
-<div>
+<div class="wrapper">
   <TableControl
     {filters}
     stickyHeader
@@ -162,8 +162,10 @@
 </div>
 
 <style>
-  div {
+  .wrapper {
-    padding: 10px;
+    flex-grow: 1;
+    overflow-y: auto;
+    max-height: 100%;
   }
 
   code {

packages/web/src/widgets/SummaryVariables.svelte

@@ -8,7 +8,7 @@
   const filters = writable({});
 </script>
 
-<div>
+<div class="wrapper">
   <TableControl
     stickyHeader
     rows={variables}
@@ -36,7 +36,9 @@
 </div>
 
 <style>
-  div {
+  .wrapper {
-    padding: 10px;
+    flex-grow: 1;
+    overflow-y: auto;
+    max-height: 100%;
   }
 </style>