Increase the vertical height of the draggable area to center the 3 OS titlebar-buttons

4 files changed, 7 insertions, 7 deletions

diff --git a/src/components/layout/AppLayout.js b/src/components/layout/AppLayout.js
index 5aaac133a..5cfd66714 100644
--- a/src/components/layout/AppLayout.js
+++ b/src/components/layout/AppLayout.js
@@ -65,7 +65,7 @@ const styles = theme => ({
     display: 'block',
     zIndex: 1,
     width: '100%',
-    height: '23px',
+    height: '29px',
     position: 'absolute',
     top: 0,
   },
diff --git a/src/features/appearance/index.ts b/src/features/appearance/index.ts
index aa569af73..5b005586e 100644
--- a/src/features/appearance/index.ts
+++ b/src/features/appearance/index.ts
@@ -286,8 +286,8 @@ function generateShowDragAreaStyle(accentColor) {
       background-color: ${accentColor};
     }
     #root {
-      /** Remove 22px from app height, otherwise the page will be too high */
-      height: calc(100% - 22px);
+      /** Remove 28px from app height, otherwise the page will be too high */
+      height: calc(100% - 28px);
     }
   `;
 }
@@ -304,7 +304,7 @@ function generateVerticalStyle(widthStr, alwaysShowWorkspaces) {
   }
   const width = Number(widthStr);
   const sidebarWidth = width - 4;
-  const verticalStyleOffset = 23;
+  const verticalStyleOffset = 29;
 
   return `
   .sidebar {
diff --git a/src/styles/layout.scss b/src/styles/layout.scss
index 359df3f35..1867285ca 100644
--- a/src/styles/layout.scss
+++ b/src/styles/layout.scss
@@ -122,7 +122,7 @@ body.win32:not(.isFullScreen) .app .app__content {
 }
 
 .window-draggable {
-  height: 22px;
+  height: 28px;
   left: 0;
   pointer-events: none;
   position: absolute;
@@ -133,7 +133,7 @@ body.win32:not(.isFullScreen) .app .app__content {
 }
 
 .darwin .sidebar {
-  padding-top: 23px;
+  padding-top: 29px;
 }
 
 .sidebar {
diff --git a/src/styles/vertical.scss b/src/styles/vertical.scss
index 166092a83..48cc1485c 100644
--- a/src/styles/vertical.scss
+++ b/src/styles/vertical.scss
@@ -1,7 +1,7 @@
 @import './config.scss';
 
 $sidebar-width: 75px;
-$sidebar-bias: 22px;
+$sidebar-bias: 28px;
 $tabitem-bias: 30px;
 
 .sidebar {