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 -->
-  <Col xs={2}/>
-
-  <!-- Column 4: Job Roofline -->
-  <Col xs={4}>
+  <!-- Column 3: Job Roofline; If footprint Enabled: full width, else half width -->
+  <Col xs={12} md={showFootprint ? 12 : 6} xl={5} xxl={6}>
     {#if $initq.error || $jobMetrics.error}
       <Card body color="danger">
         <p>Initq Error: {$initq.error?.message}</p>
@@ -297,7 +293,10 @@
       </Card>
     {:else if $initq?.data && $jobMetrics?.data}
       <Card style="height: 400px;">
+        <div bind:clientWidth={roofWidth}>
           <Roofline
+            allowSizeChange={true}
+            width={roofWidth}
             renderTime={true}
             subCluster={$initq.data.clusters
               .find((c) => c.name == $initq.data.job.cluster)
@@ -311,6 +310,7 @@
               )?.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;
-    -webkit-columns: 2;
-    -moz-columns: 2;
+    columns: 3;
+    -webkit-columns: 3;
+    -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;