From 0e3603f59614d8a9bc83bb668ab029018d52a2fc Mon Sep 17 00:00:00 2001
From: Christoph Kluge <christoph.kluge@fau.de>
Date: Thu, 5 Jun 2025 17:47:03 +0200
Subject: [PATCH] fix: layout issues in jobList toolbar

---
 web/frontend/src/Jobs.root.svelte             | 20 ++++++++++---------
 web/frontend/src/generic/Filters.svelte       |  2 +-
 .../src/generic/helper/Refresher.svelte       |  3 ++-
 .../src/generic/helper/TextFilter.svelte      |  4 ++--
 4 files changed, 16 insertions(+), 13 deletions(-)

diff --git a/web/frontend/src/Jobs.root.svelte b/web/frontend/src/Jobs.root.svelte
index 51a89d2..312c726 100644
--- a/web/frontend/src/Jobs.root.svelte
+++ b/web/frontend/src/Jobs.root.svelte
@@ -113,7 +113,7 @@
       </Button>
     </ButtonGroup>
   </Col>
-  <Col lg="4" class="mb-1 mb-lg-0">
+  <Col lg="5" class="mb-1 mb-lg-0">
     <Filters
       bind:this={filterComponent}
       {filterPresets}
@@ -142,25 +142,27 @@
       />
     {/if}
   </Col>
-  <Col lg="2" class="mb-1 mb-lg-0">
+  <Col lg="3" class="mb-1 mb-lg-0 d-inline-flex align-items-start justify-content-end ">
     {#if !showCompare}
-      <Refresher onRefresh={() => {
+      <Refresher presetClass="w-auto" onRefresh={() => {
           jobList.refreshJobs()
           jobList.refreshAllMetrics()
       }} />
     {/if}
-  </Col>
-  <Col lg="2" class="mb-2 mb-lg-0">
-    <ButtonGroup class="w-100">
-      <Button color="primary" disabled={matchedListJobs >= 500 && !(selectedJobs.length != 0)} onclick={() => {
+    <div class="mx-1"></div>
+    <ButtonGroup class="w-50">
+      <Button color="primary" disabled={(matchedListJobs >= 500 && !(selectedJobs.length != 0)) || $initq.fetching} onclick={() => {
         if (selectedJobs.length != 0) filterComponent.updateFilters({dbId: selectedJobs}, true)
         showCompare = !showCompare
       }} >
         {showCompare ? 'Return to List' : 
-        'Compare Jobs' + (selectedJobs.length != 0 ? ` (${selectedJobs.length} selected)` : matchedListJobs >= 500 ? ` (Too Many)` : ``)}
+           matchedListJobs >= 500 && selectedJobs.length == 0
+            ? 'Compare Disabled'
+            : 'Compare' + (selectedJobs.length != 0 ? ` ${selectedJobs.length} ` : ' ') + 'Jobs'
+        }
       </Button>
       {#if !showCompare && selectedJobs.length != 0}
-        <Button color="warning" onclick={() => {
+        <Button class="w-auto" color="warning" onclick={() => {
           selectedJobs = [] // Only empty array, filters handled by reactive reset
         }}>
         Clear
diff --git a/web/frontend/src/generic/Filters.svelte b/web/frontend/src/generic/Filters.svelte
index ca25904..c7b49fd 100644
--- a/web/frontend/src/generic/Filters.svelte
+++ b/web/frontend/src/generic/Filters.svelte
@@ -344,7 +344,7 @@
   {/if}
 
   {#if matchedJobs >= -1}
-    <Button class="mb-1" style="margin-right: 0.5rem;" disabled outline>
+    <Button class="mb-1" style="margin-right: 0.25rem;" disabled outline>
       {matchedJobs == -1 ? 'Loading ...' : `${matchedJobs} jobs`}
     </Button>
   {/if}
diff --git a/web/frontend/src/generic/helper/Refresher.svelte b/web/frontend/src/generic/helper/Refresher.svelte
index 384e4c2..5378d26 100644
--- a/web/frontend/src/generic/helper/Refresher.svelte
+++ b/web/frontend/src/generic/helper/Refresher.svelte
@@ -13,6 +13,7 @@
   /* Svelte 5 Props */
   let {
     initially = null,
+    presetClass = "",
     onRefresh
   } = $props();
 
@@ -35,7 +36,7 @@
   });
 </script>
 
-<InputGroup>
+<InputGroup class={presetClass}>
   <Input
     type="select"
     title="Periodic refresh interval"
diff --git a/web/frontend/src/generic/helper/TextFilter.svelte b/web/frontend/src/generic/helper/TextFilter.svelte
index 0fb2f00..7cb9f2d 100644
--- a/web/frontend/src/generic/helper/TextFilter.svelte
+++ b/web/frontend/src/generic/helper/TextFilter.svelte
@@ -97,7 +97,7 @@
   <Input
     type="select"
     style="max-width: 120px;"
-    class="form-select"
+    class="form-select w-auto"
     title="Search Mode"
     bind:value={mode}
     onchange={modeChanged}
@@ -115,7 +115,7 @@
     bind:value={term}
     onchange={() => termChanged()}
     onkeyup={(event) => termChanged(event.key == "Enter" ? 0 : throttle)}
-    placeholder={presetProject ? `Find ${mode} in ${scrambleNames ? scramble(presetProject) : presetProject} ...` : `Find ${mode} ...`}
+    placeholder={presetProject ? `Find in ${scrambleNames ? scramble(presetProject) : presetProject} ...` : `Find ${mode} ...`}
   />
   {#if presetProject}
   <Button title="Reset Project" onclick={() => resetProject()}