diff --git a/src/components/SideBar.tsx b/src/components/SideBar.tsx
index f039bca..b49916e 100644
--- a/src/components/SideBar.tsx
+++ b/src/components/SideBar.tsx
@@ -107,15 +107,13 @@ const RawGitako: React.FC<Props & ConnectorState> = function RawGitako(props) {
         </Portal>
         <Resizable className={cx({ hidden: error || !shouldShow })} baseSize={baseSize}>
           <div className={'gitako-side-bar-body'}>
+            <div className={'close-side-bar-button-position'}>
+              <button className={'close-side-bar-button'} onClick={toggleShowSideBar}>
+                <Icon className={'action-icon'} type={'x'} />
+              </button>
+            </div>
             <div className={'gitako-side-bar-content'}>
-              <div className={'header'}>
-                {metaData ? <MetaBar metaData={metaData} /> : <div />}
-                <div className={'close-side-bar-button-position'}>
-                  <button className={'close-side-bar-button'} onClick={toggleShowSideBar}>
-                    <Icon className={'action-icon'} type={'x'} />
-                  </button>
-                </div>
-              </div>
+              <div className={'header'}>{metaData ? <MetaBar metaData={metaData} /> : <div />}</div>
               {errorDueToAuth ? (
                 <AccessDeniedError hasToken={Boolean(accessToken)} />
               ) : (
diff --git a/src/styles/index.scss b/src/styles/index.scss
index b7703ac..b722d97 100644
--- a/src/styles/index.scss
+++ b/src/styles/index.scss
@@ -303,7 +303,9 @@ $minimal-z-index: max($github-header-z-index, $github-pull-request-float-header-
       font-size: 0;
     }
   }
+
   .#{$name}-side-bar-body {
+    $button-size: 32px;
     width: 100%;
     height: 100%;
     display: flex;
@@ -334,6 +336,37 @@ $minimal-z-index: max($github-header-z-index, $github-pull-request-float-header-
       text-align: center;
     }
 
+    .close-side-bar-button-position {
+      position: absolute;
+      right: 6px;
+      top: 6px;
+      z-index: 1; // prevent being covered by following elements
+
+      .close-side-bar-button {
+        @include icon-button;
+        @include button-color;
+        width: $button-size;
+        height: $button-size;
+        border-radius: $button-size;
+
+        // feedback to click should be instant
+        &:not(:active) {
+          transition: background linear 0.3s;
+        }
+
+        .action-icon {
+          color: var(--gitako-icon-tertiary);
+          width: 20px;
+          height: 20px;
+          text-align: center;
+          .octicon {
+            width: 100%;
+            height: 100%;
+          }
+        }
+      }
+    }
+
     .#{$name}-side-bar-content {
       display: flex;
       flex: 1;
@@ -342,7 +375,6 @@ $minimal-z-index: max($github-header-z-index, $github-pull-request-float-header-
       min-height: 0; // make content shrinkable
 
       .header {
-        $button-size: 32px;
         position: relative;
 
         .meta-bar {
@@ -364,38 +396,6 @@ $minimal-z-index: max($github-header-z-index, $github-pull-request-float-header-
             background-color: var(--gitako-branch-name-bg);
           }
         }
-
-        .close-side-bar-button-position {
-          position: absolute;
-          right: 6px;
-          top: 0;
-          height: 100%;
-          display: inline-flex;
-          align-items: center;
-          .close-side-bar-button {
-            @include icon-button;
-            @include button-color;
-            width: $button-size;
-            height: $button-size;
-            border-radius: $button-size;
-
-            // feedback to click should be instant
-            &:not(:active) {
-              transition: background linear 0.3s;
-            }
-
-            .action-icon {
-              color: var(--gitako-icon-tertiary);
-              width: 20px;
-              height: 20px;
-              text-align: center;
-              .octicon {
-                width: 100%;
-                height: 100%;
-              }
-            }
-          }
-        }
       }
 
       .description {
@@ -478,9 +478,9 @@ $minimal-z-index: max($github-header-z-index, $github-pull-request-float-header-
           }
 
           &.disabled {
-              pointer-events: none;
-              color: var(--gitako-text-disabled);
-            }
+            pointer-events: none;
+            color: var(--gitako-text-disabled);
+          }
           display: flex;
           justify-content: space-between;
           align-items: center;