Improve grid scaling

web/frontend/src/Job.root.svelte

@@ -59,7 +59,8 @@
 
   let plots = {},
     jobTags,
-    statsTable
+    statsTable,
+    roofWidth
 
   let missingMetrics = [],
     missingHosts = [],
@@ -231,9 +232,9 @@
     }));
 </script>
 
-<Row cols={4} class="mb-2">
+<Row class="mb-0 mb-xxl-2">
   <!-- Column 1: Job Info, Concurrent Jobs, Admin Message if found-->
-  <Col xs={3}>
+  <Col xs={12} md={6} xl={3} class="mb-3 mb-xxl-0">
     {#if $initq.error}
       <Card body color="danger">{$initq.error.message}</Card>
     {:else if $initq.data}
@@ -272,7 +273,7 @@
 
   <!-- If enabled:  Column 2: Job Footprint, Polar Representation, Heuristic Summary -->
    {#if showFootprint}
-    <Col xs={3}>
+    <Col xs={12} md={6} xl={4} xxl={3} class="mb-3 mb-xxl-0">
       {#if $initq.error}
         <Card body color="danger">{$initq.error.message}</Card>
       {:else if $initq?.data && $jobMetrics?.data}
@@ -281,15 +282,10 @@
         <Spinner secondary />
       {/if}
     </Col>
-  {:else}
-    <Col xs={3}/>
   {/if}
 
-  <!-- Column 3: Spacer -->
+  <!-- Column 3: Job Roofline; If footprint Enabled: full width, else half width -->
-  <Col xs={2}/>
+  <Col xs={12} md={showFootprint ? 12 : 6} xl={5} xxl={6}>
-
-  <!-- Column 4: Job Roofline -->
-  <Col xs={4}>
     {#if $initq.error || $jobMetrics.error}
       <Card body color="danger">
         <p>Initq Error: {$initq.error?.message}</p>
@@ -297,20 +293,24 @@
       </Card>
     {:else if $initq?.data && $jobMetrics?.data}
       <Card style="height: 400px;">
-        <Roofline
+        <div bind:clientWidth={roofWidth}>
-          renderTime={true}
+          <Roofline
-          subCluster={$initq.data.clusters
+            allowSizeChange={true}
-            .find((c) => c.name == $initq.data.job.cluster)
+            width={roofWidth}
-            .subClusters.find((sc) => sc.name == $initq.data.job.subCluster)}
+            renderTime={true}
-          data={transformDataForRoofline(
+            subCluster={$initq.data.clusters
-            $jobMetrics.data.jobMetrics.find(
+              .find((c) => c.name == $initq.data.job.cluster)
-              (m) => m.name == "flops_any" && m.scope == "node",
+              .subClusters.find((sc) => sc.name == $initq.data.job.subCluster)}
-            )?.metric,
+            data={transformDataForRoofline(
-            $jobMetrics.data.jobMetrics.find(
+              $jobMetrics.data.jobMetrics.find(
-              (m) => m.name == "mem_bw" && m.scope == "node",
+                (m) => m.name == "flops_any" && m.scope == "node",
-            )?.metric,
+              )?.metric,
-          )}
+              $jobMetrics.data.jobMetrics.find(
-        />
+                (m) => m.name == "mem_bw" && m.scope == "node",
+              )?.metric,
+            )}
+          />
+        </div>
       </Card>
     {:else}
         <Spinner secondary />

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

@@ -4,7 +4,7 @@
     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]
+    - `renderCard Bool?`: If to render component as content only or with card wrapping [Default: true]
     - `width String?`: Width of the card [Default: 'auto']
     - `height String?`: Height of the card [Default: '310px']
  -->
@@ -64,17 +64,15 @@
   </Card>
 {:else}
   <p>
-    Jobs running on the same node with overlapping runtimes using shared resources.
+    {cJobs.items.length} Jobs running on the same node with overlapping runtimes using shared resources. 
+    ( <a
+      href="/monitoring/jobs/?{cJobs.listQuery}"
+      target="_blank">See All</a
+    > )
   </p>
   <hr/>
   {#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"
@@ -96,8 +94,8 @@
 
 <style>
   ul {
-    columns: 2;
+    columns: 3;
-    -webkit-columns: 2;
+    -webkit-columns: 3;
-    -moz-columns: 2;
+    -moz-columns: 3;
   }
 </style>

web/frontend/src/generic/plots/Roofline.svelte

@@ -41,8 +41,6 @@
 
   const lineWidth = clusterCockpitConfig.plot_general_lineWidth;
 
-  
-
   // Helpers
   function getGradientR(x) {
     if (x < 0.5) return 0;