feat: split concurrent jobs list to own scrollable component

web/frontend/src/Job.root.svelte

@@ -38,6 +38,7 @@
   import TagManagement from "./job/TagManagement.svelte";
   import StatsTable from "./job/StatsTable.svelte";
   import JobFootprint from "./generic/helper/JobFootprint.svelte";
+  import ConcurrentJobs from "./generic/helper/ConcurrentJobs.svelte";
   import PlotTable from "./generic/PlotTable.svelte";
   import Polar from "./generic/plots/Polar.svelte";
   import Roofline from "./generic/plots/Roofline.svelte";
@@ -250,42 +251,9 @@
   {/if}
   {#if $initq?.data && $jobMetrics?.data?.jobMetrics}
     {#if $initq.data.job.concurrentJobs != null && $initq.data.job.concurrentJobs.items.length != 0}
-      {#if authlevel > roles.manager}
-        <Col>
-          <h5>
-            Concurrent Jobs <Icon
-              name="info-circle"
-              style="cursor:help;"
-              title="Shared jobs running on the same node with overlapping runtimes"
-            />
-          </h5>
-          <ul>
-            <li>
-              <a
-                href="/monitoring/jobs/?{$initq.data.job.concurrentJobs
-                  .listQuery}"
-                target="_blank">See All</a
-              >
-            </li>
-            {#each $initq.data.job.concurrentJobs.items as pjob, index}
-              <li>
-                <a href="/monitoring/job/{pjob.id}" target="_blank"
-                  >{pjob.jobId}</a
-                >
-              </li>
-            {/each}
-          </ul>
-        </Col>
-      {:else}
-        <Col>
-          <h5>
-            {$initq.data.job.concurrentJobs.items.length} Concurrent Jobs
-          </h5>
-          <p>
-            Number of shared jobs on the same node with overlapping runtimes.
-          </p>
-        </Col>
-      {/if}
+      <Col>
+        <ConcurrentJobs cJobs={$initq.data.job.concurrentJobs} showLinks={(authlevel > roles.manager)}/>
+      </Col>
     {/if}
     <Col>
       <Polar

web/frontend/src/generic/helper/ConcurrentJobs.svelte

@@ -0,0 +1,79 @@
+<!--
+    @component Concurrent Jobs Component; Lists all concurrent jobs in one scrollable card.
+
+    Properties:
+    - `cJobs JobLinkResultList`: List of concurrent Jobs
+    - `showLinks Bool?`: Show list as clickable links [Default: false]
+    - `displayTitle Bool?`: If to display cardHeader with title [Default: true]
+    - `width String?`: Width of the card [Default: 'auto']
+    - `height String?`: Height of the card [Default: '310px']
+ -->
+
+<script>
+  import {
+    Card,
+    CardHeader,
+    CardTitle,
+    CardBody,
+    Icon
+  } from "@sveltestrap/sveltestrap";
+
+  export let cJobs;
+  export let showLinks = false;
+  export let displayTitle = true;
+  export let width = "auto";
+  export let height = "310px";
+</script>
+
+<Card class="mt-1 overflow-auto" style="width: {width}; height: {height}">
+  {#if displayTitle}
+    <CardHeader>
+      <CardTitle class="mb-0 d-flex justify-content-center">
+        {cJobs.items.length} Concurrent Jobs
+        <Icon
+          style="cursor:help; margin-left:0.5rem;"
+          name="info-circle"
+          title="Jobs running on the same node with overlapping runtimes using shared resources"
+        />
+      </CardTitle>
+    </CardHeader>
+  {/if}
+  <CardBody>
+    {#if showLinks}
+      <ul>
+        <li>
+          <a
+            href="/monitoring/jobs/?{cJobs.listQuery}"
+            target="_blank">See All</a
+          >
+        </li>
+        {#each cJobs.items as cJob}
+          <li>
+            <a href="/monitoring/job/{cJob.id}" target="_blank"
+              >{cJob.jobId}</a
+            >
+          </li>
+        {/each}
+      </ul>
+    {:else}
+      {#if displayTitle}
+        <p>
+          Jobs running on the same node with overlapping runtimes using shared resources.
+        </p>
+      {:else}
+      <p>
+        <b>{cJobs.items.length} </b>
+        Jobs running on the same node with overlapping runtimes using shared resources.
+      </p>
+      {/if}
+    {/if}
+  </CardBody>
+</Card>
+
+<style>
+  ul {
+    columns: 2;
+    -webkit-columns: 2;
+    -moz-columns: 2;
+  }
+</style>