chage to adaptive row sizes for publicDash

web/frontend/src/DashPublic.root.svelte

@@ -348,8 +348,6 @@
 
 </script>
 
-<Card style="height: 98vh;">
-  <CardBody class="align-content-center p-2">
 <Row>
   <Col>
     <Refresher
@@ -366,6 +364,7 @@
     />
   </Col>
 </Row>
+
 {#if $statusQuery.fetching || $statesTimed.fetching}
   <Row class="justify-content-center">
     <Col xs="auto">
@@ -395,7 +394,9 @@
   </Row>
 
 {:else}
-      <Row cols={{xs:1, md:2}}>
+  <!-- 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>
+  </div>
 {/if}
-  </CardBody>
-</Card>