From 29b647d6c52c5753e928795b265885cb82063cd5 Mon Sep 17 00:00:00 2001
From: EnixCoda <enixcoda@gmail.com>
Date: Mon, 1 Nov 2021 18:36:51 +0800
Subject: [PATCH] fix: sidebar content shifts after reducing window height

---
 src/components/FileExplorer.tsx | 16 +++++++++-------
 src/styles/index.scss           | 18 ++++++++++++------
 2 files changed, 21 insertions(+), 13 deletions(-)

diff --git a/src/components/FileExplorer.tsx b/src/components/FileExplorer.tsx
index 2e1b8b8..4b57938 100644
--- a/src/components/FileExplorer.tsx
+++ b/src/components/FileExplorer.tsx
@@ -167,13 +167,15 @@ const RawFileExplorer: React.FC<Props & ConnectorState> = function RawFileExplor
                   )}
                   <SizeObserver className={'files'}>
                     {({ width = 0, height = 0 }) => (
-                      <ListView
-                        height={height}
-                        width={width}
-                        renderNodeContext={renderNodeContext}
-                        expandTo={expandTo}
-                        metaData={metaData}
-                      />
+                      <div className={'magic-size-container'}>
+                        <ListView
+                          height={height}
+                          width={width}
+                          renderNodeContext={renderNodeContext}
+                          expandTo={expandTo}
+                          metaData={metaData}
+                        />
+                      </div>
                     )}
                   </SizeObserver>
 
diff --git a/src/styles/index.scss b/src/styles/index.scss
index fbe1eee..4141416 100644
--- a/src/styles/index.scss
+++ b/src/styles/index.scss
@@ -395,7 +395,6 @@ $minimal-z-index: max($github-header-z-index, $github-pull-request-float-header-
     }
 
     .gitako-side-bar-body-wrapper-content {
-      width: var(--gitako-width);
     }
   }
   .#{$name}-resize-handler {
@@ -425,7 +424,7 @@ $minimal-z-index: max($github-header-z-index, $github-pull-request-float-header-
   .#{$name}-side-bar-body {
     $button-size: 32px;
     position: relative;
-    width: 100%;
+    width: var(--gitako-width);
     height: 100%;
     display: flex;
     flex-direction: column;
@@ -616,9 +615,16 @@ $minimal-z-index: max($github-header-z-index, $github-pull-request-float-header-
         }
 
         .files {
+          position: relative;
           flex: 1;
-          overflow: auto;
-          overflow-x: hidden; // prevent x-scroll bar show up while sizing
+          overflow: hidden;
+
+          // Put this inside files will help files to get proper size derived from parents, regardless of its content size
+          .magic-size-container {
+            position: absolute;
+            width: 100%;
+            height: 100%;
+          }
         }
 
         .node-item {
@@ -633,14 +639,14 @@ $minimal-z-index: max($github-header-z-index, $github-pull-request-float-header-
             @include interactive-background(
               var(--gitako-canvas-subtle),
               var(--gitako-canvas-subtle),
-              var(--gitako-canvas-inset),
+              var(--gitako-canvas-inset)
             );
           }
 
           @include interactive-background(
             var(--gitako-canvas-default),
             var(--gitako-canvas-subtle),
-            var(--gitako-canvas-inset),
+            var(--gitako-canvas-inset)
           );
 
           &.disabled {