add overflow-x to statsTable, use sveltestrap input

ClusterCockpit · Sep 10, 2024 · b1cb45d · b1cb45d
1 parent 065b327
commit b1cb45d
Show file tree

Hide file tree

Showing 2 changed files with 7 additions and 2 deletions.
diff --git a/web/frontend/src/Job.root.svelte b/web/frontend/src/Job.root.svelte
@@ -418,6 +418,7 @@
           <TabPane
             tabId="stats"
             tab="Statistics Table"
+            class="overflow-x-auto"
             active={!somethingMissing}
           >
             {#if $jobMetrics?.data?.jobMetrics}

diff --git a/web/frontend/src/job/StatsTable.svelte b/web/frontend/src/job/StatsTable.svelte
@@ -11,6 +11,7 @@
   import {
     Button,
     Table,
+    Input,
     InputGroup,
     InputGroupText,
     Icon,
@@ -86,27 +87,30 @@
 
 <Table class="mb-0">
   <thead>
+    <!-- Header Row 1: Selectors -->
     <tr>
       <th>
         <Button outline on:click={() => (isMetricSelectionOpen = true)}>
           Metrics
         </Button>
       </th>
       {#each selectedMetrics as metric}
+        <!-- To Match Row-2 Header Field Count-->
         <th colspan={selectedScopes[metric] == "node" ? 3 : 4}>
           <InputGroup>
             <InputGroupText>
               {metric}
             </InputGroupText>
-            <select class="form-select" bind:value={selectedScopes[metric]}>
+            <Input type="select" bind:value={selectedScopes[metric]}>
               {#each scopesForMetric(metric, jobMetrics) as scope}
                 <option value={scope}>{scope}</option>
               {/each}
-            </select>
+            </Input>
           </InputGroup>
         </th>
       {/each}
     </tr>
+    <!-- Header Row 2: Fields -->
     <tr>
       <th>Node</th>
       {#each selectedMetrics as metric}