From 6b6fdbd16e75ba04c609edca8bbd2663f49c5363 Mon Sep 17 00:00:00 2001
From: Alex Andreev <alex.andreev.email@gmail.com>
Date: Thu, 21 Oct 2021 14:22:58 +0300
Subject: [PATCH] Fine-tuning Cluster Overview css

Signed-off-by: Alex Andreev <alex.andreev.email@gmail.com>
---
 .../components/+cluster/cluster-issues.scss   | 20 ++++++++++---------
 .../components/+cluster/cluster-overview.scss | 11 +++++++---
 2 files changed, 19 insertions(+), 12 deletions(-)

diff --git a/src/renderer/components/+cluster/cluster-issues.scss b/src/renderer/components/+cluster/cluster-issues.scss
index aadb46ee39..99ba313472 100644
--- a/src/renderer/components/+cluster/cluster-issues.scss
+++ b/src/renderer/components/+cluster/cluster-issues.scss
@@ -22,12 +22,18 @@
 .ClusterIssues {
   min-height: 350px;
   position: relative;
-  grid-column-start: 1;
-  grid-column-end: 3;
+  grid-area: issues;
 
-  @include media("<1024px") {
-    grid-column-start: 1!important;
-    grid-column-end: 1!important;
+  &.OnlyClusterIssues {
+    grid-row: row1-start / row2-end;
+  }
+
+  @media (max-width: 1150px) {
+    grid-area: unset;
+
+    &.OnlyClusterIssues {
+      grid-row: auto;
+    }
   }
 
   .SubHeader {
@@ -73,7 +79,3 @@
     }
   }
 }
-
-.OnlyClusterIssues {
-  grid-row: row1-start / row2-end;
-}
diff --git a/src/renderer/components/+cluster/cluster-overview.scss b/src/renderer/components/+cluster/cluster-overview.scss
index 8dba6d65e8..bba4d0fa41 100644
--- a/src/renderer/components/+cluster/cluster-overview.scss
+++ b/src/renderer/components/+cluster/cluster-overview.scss
@@ -27,13 +27,18 @@
   min-height: 650px;
   display: grid;
   grid-gap: $gridGap;
-  grid-template-columns: repeat(auto-fit, minmax(500px, 1fr));
+  grid-template-areas:
+    "barcharts piechars"
+    "issues issues";
+  grid-template-columns: repeat(auto-fit, minmax(0, 1fr));
   grid-template-rows:
           [row1-start] 1fr
           [row2-start] 1fr;
 
-  @include media(">1600px") {
-    grid-template-columns: 1fr 1fr;
+  @media (max-width: 1150px) {
+    grid-template-columns: minmax(500px, 1fr);
+    grid-template-rows: 1fr;
+    grid-template-areas: none;
   }
 
   > *:not(.Spinner) {