Merge pull request #145 from RedisInsight/bugfix/RI-2192

#RI-2192 - fix cli resizable calculation of height

Author: rsergeenko

redisinsight/ui/src/pages/instance/InstancePage.tsx

@@ -64,7 +64,11 @@ const InstancePage = ({ routes = [] }: Props) => {
 
   useEffect(() => () => {
     setSizes((prevSizes: any) => {
-      localStorageService.set(BrowserStorageItem.cliResizableContainer, prevSizes)
+      localStorageService.set(BrowserStorageItem.cliResizableContainer, {
+        [firstPanelId]: prevSizes[firstPanelId],
+        // partially fix elastic resizable issue with zooming
+        [secondPanelId]: 100 - prevSizes[firstPanelId],
+      })
     })
   }, [])
 
@@ -98,7 +102,7 @@ const InstancePage = ({ routes = [] }: Props) => {
             minSize="55px"
             paddingSize="none"
             size={isShowBottomGroup ? sizes[firstPanelId] : 100}
-            wrapperProps={{ className: cx({ [styles.mainComponent]: !isShowBottomGroup }) }}
+            wrapperProps={{ className: cx(styles.panelTop, { [styles.mainComponent]: !isShowBottomGroup }) }}
             data-testid={firstPanelId}
           >
             <InstancePageRouter routes={routes} />
@@ -110,8 +114,9 @@ const InstancePage = ({ routes = [] }: Props) => {
             id={secondPanelId}
             scrollable={false}
             size={isShowBottomGroup ? sizes[secondPanelId] : 0}
-            style={{ zIndex: 10 }}
+            style={{ zIndex: 9 }}
             minSize="140px"
+            wrapperProps={{ className: cx(styles.panelBottom) }}
             data-testid={secondPanelId}
             paddingSize="none"
           >

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

@@ -4,12 +4,22 @@
 
 .resizableButton {
   display: none;
-  margin: 1px 16px 0 !important;
+  margin: -8px 16px -8px !important;
   z-index: 10;
   background-color: var(--euiPageBackgroundColor);
 }
 
-:global(.show-cli) .resizableButton {
-  display: block;
-  z-index: 10;
+:global(.show-cli) {
+  .resizableButton {
+    display: block;
+    z-index: 10;
+  }
+
+  .panelTop {
+    padding-bottom: 8px;
+  }
+
+  .panelBottom {
+    padding-top: 8px;
+  }
 }