chage to adaptive row sizes for publicDash

web/frontend/src/DashPublic.root.svelte

@@ -348,9 +348,7 @@
 
 </script>
 
-<Card style="height: 98vh;">
-  <CardBody class="align-content-center p-2">
-    <Row>
+<Row>
   <Col>
     <Refresher
       hideSelector
@@ -365,15 +363,16 @@
       }}
     />
   </Col>
-    </Row>
-    {#if $statusQuery.fetching || $statesTimed.fetching}
+</Row>
+
+{#if $statusQuery.fetching || $statesTimed.fetching}
   <Row class="justify-content-center">
     <Col xs="auto">
       <Spinner />
     </Col>
   </Row>
 
-    {:else if $statusQuery.error || $statesTimed.error}
+{:else if $statusQuery.error || $statesTimed.error}
   <Row class="mb-2">
     <Col class="d-flex justify-content-end">
       <Button color="secondary" href="/">
@@ -394,8 +393,10 @@
     {/if}
   </Row>
 
-    {:else}
-      <Row cols={{xs:1, md:2}}>
+{:else}
+  <!-- View Supposed to be Viewed at Max Viewport Size -->
+  <div class="align-content-center p-2">
+    <Row cols={{xs:1, md:2}} style="height: 24vh; margin-bottom: 1rem;">
       <Col> <!-- General Cluster Info Card -->
           <Card class="h-100">
           <CardHeader>
@@ -515,7 +516,9 @@
           </CardBody>
         </Card>
       </Col>
+    </Row>
 
+    <Row cols={{xs:1, md:2}} style="height: 35vh; margin-bottom: 1rem;">
       <!-- Total Cluster Metric in Time SUMS-->
       <Col class="text-center">
         <h5 class="mt-2 mb-0">
@@ -554,10 +557,14 @@
               nodesData={transformNodesStatsToInfo($statusQuery?.data?.nodeMetrics)}
               fixTitle="Node Utilization"
               yMinimum={1.0}
+              height={330}
             />
           {/key}
         </div>
       </Col>
+    </Row>
+
+    <Row cols={{xs:1, md:2}} style="height: 35vh;">
       <Col> <!-- Pie Last States -->
         <Row>
           {#if refinedStateData.length > 0}
@@ -614,7 +621,7 @@
           {#key $statesTimed?.data?.nodeStatesTimed}
             <Stacked
               data={$statesTimed?.data?.nodeStatesTimed}
-                height={260}
+              height={300}
               ylabel="Nodes"
               yunit = "#Count"
               title = "Cluster Status"
@@ -624,6 +631,5 @@
         </div>
       </Col>
     </Row>
-    {/if}
-  </CardBody>
-</Card>
+  </div>
+{/if}