fix: move dashboard charts to lower left

Author: starpit

plugins/plugin-codeflare/src/components/Chart.tsx

@@ -64,7 +64,7 @@ interface Props {
 }
 
 export default class BaseChart extends React.PureComponent<Props> {
-  private static fontSize = 7
+  private static fontSize = 8
   private static tickLabelFontSize = BaseChart.fontSize - 1
 
   private static readonly dimensions = {

plugins/plugin-codeflare/src/components/Description.tsx

@@ -35,7 +35,7 @@ const Description = (props: Props) => {
   const { summaryData } = props
 
   return (
-    <DescriptionList>
+    <DescriptionList isHorizontal isAutoColumnWidths isFluid>
       {summaryData.map(({ label, value }, index) => (
         <DescriptionListGroup key={index}>
           <DescriptionListTerm>{label}</DescriptionListTerm>

plugins/plugin-codeflare/web/scss/components/Dashboard/Charts.scss

@@ -17,11 +17,13 @@
 @import "mixins";
 
 @include ChartGrid {
+  $gap: 0.6875em;
+
   display: grid;
-  grid-gap: 0.6875em;
-  padding: 2em;
-  grid-template-columns: repeat(4, 1fr);
-  grid-auto-rows: minmax(300px, max-content);
+  grid-gap: $gap;
+  padding: $gap;
+  grid-template-columns: repeat(2, 1fr);
+  grid-auto-rows: minmax(250px, max-content);
 
   font-family: var(--font-sans-serif);
 }

plugins/plugin-codeflare/web/scss/components/Dashboard/Description.scss

@@ -20,20 +20,25 @@
   dd {
     margin: 0;
   }
+  .pf-c-description-list__description {
+    font-weight: 300;
+    color: var(--color-text-02);
+  }
   .pf-c-description-list {
     font-family: var(--font-sans-serif);
-    grid-template-columns: 1fr;
     padding: 0 1em;
   }
+
+  /* for vertical layout
+    .pf-c-description-list {
+    grid-template-columns: 1fr;
+  }
   .pf-c-description-list__group {
     grid-template-columns: 1fr;
   }
   .pf-c-description-list__term,
   .pf-c-description-list__description {
     grid-column-start: unset;
   }
-  .pf-c-description-list__description {
-    font-weight: 300;
-    color: var(--color-text-02);
-  }
+  */
 }

plugins/plugin-codeflare/web/scss/components/Dashboard/_index.scss

@@ -29,17 +29,12 @@
 
 @include TopLevelTab {
   @include Split(3) {
-    /* @include Rows(7); */
-    @include Columns(13);
-    grid-template-rows: repeat(3, 10vmax) repeat(4, auto);
+    grid-template-rows: 200px 1fr;
+    grid-template-columns: repeat(4, minmax(100px, 200px)) repeat(9, minmax(150px, auto));
+
     grid-template-areas:
-      "T1 T1 T1 T3 T3 T3 T3 T3 T3 T3 T3 T3 T3"
-      "T1 T1 T1 T3 T3 T3 T3 T3 T3 T3 T3 T3 T3"
-      "T1 T1 T1 T3 T3 T3 T3 T3 T3 T3 T3 T3 T3"
-      "T1 T1 T1 T2 T2 T2 T2 T2 T2 T2 T2 T2 T2"
-      "T1 T1 T1 T2 T2 T2 T2 T2 T2 T2 T2 T2 T2"
-      "T1 T1 T1 T2 T2 T2 T2 T2 T2 T2 T2 T2 T2"
-      "T1 T1 T1 T2 T2 T2 T2 T2 T2 T2 T2 T2 T2";
+      "T1 T1 T1 T1 T1 T1 T1 T1 T1 T1 T1 T1 T1"
+      "T3 T3 T3 T3 T2 T2 T2 T2 T2 T2 T2 T2 T2";
   }
 }