Merge pull request #1266 from RedisInsight/fe/bugfix/RI-3624

#RI-3624 - fix heights for browser left panel

Author: AlenaSY

redisinsight/ui/src/components/virtual-table/styles.module.scss

@@ -152,7 +152,7 @@ $footerHeight: 38px;
 }
 
 :global(.key-list-table) {
-  height: calc(100% - 58px);
+  height: 100%;
 }
 
 :global(.key-details-table) {

redisinsight/ui/src/pages/browser/BrowserPage.tsx

@@ -256,7 +256,7 @@ const BrowserPage = () => {
                     }),
                   }}
                 >
-                  <>
+                  <div className={styles.leftPanelContent}>
                     <KeysHeader
                       keysState={keysState}
                       loading={loading}
@@ -285,7 +285,7 @@ const BrowserPage = () => {
                         loadMoreItems={loadMoreItems}
                       />
                     )}
-                  </>
+                  </div>
                 </EuiResizablePanel>
 
                 <EuiResizableButton

redisinsight/ui/src/pages/browser/components/key-list/styles.module.scss

@@ -14,11 +14,7 @@
 }
 
 .table {
-  height: calc(100% - 48px);
-
-  &__withoutFooter {
-    height: calc(100% - 50px) !important;
-  }
+  height: 100%;
 }
 
 :global(.show-cli) .table {

redisinsight/ui/src/pages/browser/components/key-tree/styles.module.scss

@@ -20,7 +20,7 @@
 
 .body {
   display: flex;
-  height: calc(100% - 20px);
+  height: 100%;
 
   :global(.ReactVirtualized__Table__headerRow) {
     border: none !important;
@@ -53,19 +53,21 @@
   position: relative;
   padding-top: 6px;
 
-  height: calc(100% - 90px);
+  height: 100%;
 
   flex: 1;
+  display: flex;
+  flex-direction: column;
 }
 
 .treeContent {
-  height: calc(100% - 25px);
+  height: 100%;
   position: relative;
   width: 100%;
 }
 
 .list {
-  height: calc(100% + 20px);
+  height: 100%;
   flex: 3;
   min-width: 400px;
 }

redisinsight/ui/src/pages/browser/styles.module.scss

@@ -96,3 +96,9 @@ $breakpoint-to-hide-resize-panel: 1124px;
     width: 100% !important;
   }
 }
+
+.leftPanelContent {
+  display: flex;
+  flex-direction: column;
+  height: 100%;
+}