Fix height of horizontal sidebar (getferdi/ferdi#1894) (#1896)

Co-authored-by: Vijay Raghavan Aravamudhan <vraravam@users.noreply.github.com>

1 files changed, 6 insertions, 5 deletions

diff --git a/src/features/appearance/index.js b/src/features/appearance/index.js
index c3425ba9c..3aab2fcad 100644
--- a/src/features/appearance/index.js
+++ b/src/features/appearance/index.js
@@ -122,7 +122,7 @@ function generateShowDragAreaStyle(accentColor) {
       background-color: ${accentColor};
     }
     #root {
-      /** Remove 22px from app height, otherwise the page will be to high */
+      /** Remove 22px from app height, otherwise the page will be too high */
       height: calc(100% - 22px);
     }
   `;
@@ -139,11 +139,12 @@ function generateVerticalStyle(widthStr, alwaysShowWorkspaces) {
     document.head.appendChild(link);
   }
   const width = Number(widthStr);
-  const sidebarWidthStr = `${width - 4}px`;
+  const sidebarWidth = width - 4;
+  const verticalStyleOffset = 23;
 
   return `
   .sidebar {
-    height: ${sidebarWidthStr} !important;
+    height: ${sidebarWidth + verticalStyleOffset + 1}px !important;
   ${alwaysShowWorkspaces ? `
     width: calc(100% - 300px) !important;
   ` : ''}
@@ -154,11 +155,11 @@ function generateVerticalStyle(widthStr, alwaysShowWorkspaces) {
   }
 
   .app .app__content {
-    padding-top: ${sidebarWidthStr} !important;
+    padding-top: ${sidebarWidth + verticalStyleOffset + 1}px !important;
   }
 
   .workspaces-drawer {
-    maring-top: -${sidebarWidthStr} !important;
+    margin-top: -${sidebarWidth - verticalStyleOffset - 1}px !important;
   }
 
   .todos__todos-panel--expanded {