From b1cb45dfe66bad28360912a5c582bb14685b69be Mon Sep 17 00:00:00 2001
From: Christoph Kluge <christoph.kluge@fau.de>
Date: Tue, 10 Sep 2024 12:14:34 +0200
Subject: [PATCH] add overflow-x to statsTable, use sveltestrap input

---
 web/frontend/src/Job.root.svelte       | 1 +
 web/frontend/src/job/StatsTable.svelte | 8 ++++++--
 2 files changed, 7 insertions(+), 2 deletions(-)

diff --git a/web/frontend/src/Job.root.svelte b/web/frontend/src/Job.root.svelte
index c68ccae..6a15bfc 100644
--- 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
index 606d05b..e5ecfc6 100644
--- 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,6 +87,7 @@
 
 <Table class="mb-0">
   <thead>
+    <!-- Header Row 1: Selectors -->
     <tr>
       <th>
         <Button outline on:click={() => (isMetricSelectionOpen = true)}>
@@ -93,20 +95,22 @@
         </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}