Fix horizontal sidebar rendering overlapping the active service (#70)

* Revert "Fixes existing gap on horizontal sidebar"

This reverts commit 1a3b2f989d8e209ccfd2aab3cdce91a49b317c87.

* Fixup sidebar only for windows

* Tries to generalize the style without vertical.scss

* Fix review comments

* Fixes it on Linux

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

2 files changed, 15 insertions, 13 deletions

diff --git a/src/features/appearance/index.ts b/src/features/appearance/index.ts
index e84f0f0f4..faf7ffd37 100644
--- a/src/features/appearance/index.ts
+++ b/src/features/appearance/index.ts
@@ -1,5 +1,6 @@
 import color from 'color';
 import { reaction } from 'mobx';
+import { isWindows, isLinux } from '../../environment';
 import { DEFAULT_APP_SETTINGS, iconSizeBias } from '../../config';
 
 const STYLE_ELEMENT_ID = 'custom-appearance-style';
@@ -172,6 +173,10 @@ function generateServiceRibbonWidthStyle(
     tabItemHeightBias = -5;
   }
 
+  if (isWindows || isLinux) {
+    sidebarSizeBias = 0;
+  }
+
   // Due to the lowest values for SIDEBAR_WIDTH and ICON_SIZES, this can be computed to a negative value
   const minimumAdjustedIconSize = Math.max(width / 2 + iconSize, 2);
 
@@ -194,7 +199,7 @@ function generateServiceRibbonWidthStyle(
       font-size: ${width / 3}px !important;
     }
     .app .app__content {
-      padding-top: ${width}px !important;
+      padding-top: ${width + sidebarSizeBias}px !important;
     }
     .workspaces-drawer {
       margin-top: -${width}px !important;
@@ -317,17 +322,14 @@ function generateStyle(settings) {
   ) {
     style += generateAccentStyle(accentColor);
   }
-  if (
-    serviceRibbonWidth !== DEFAULT_APP_SETTINGS.serviceRibbonWidth ||
-    iconSize !== DEFAULT_APP_SETTINGS.iconSize
-  ) {
-    style += generateServiceRibbonWidthStyle(
-      serviceRibbonWidth,
-      iconSize,
-      useVerticalStyle,
-      showServiceName,
-    );
-  }
+
+  style += generateServiceRibbonWidthStyle(
+    serviceRibbonWidth,
+    iconSize,
+    useVerticalStyle,
+    showServiceName,
+  );
+
   if (showDragArea) {
     style += generateShowDragAreaStyle(accentColor);
   }
diff --git a/src/styles/vertical.scss b/src/styles/vertical.scss
index 40c88cd9f..166092a83 100644
--- a/src/styles/vertical.scss
+++ b/src/styles/vertical.scss
@@ -69,7 +69,7 @@ $tabitem-bias: 30px;
 }
 
 .app .app__content {
-  padding-top: $sidebar-width;
+  padding-top: $sidebar-width + $sidebar-bias;
 }
 
 .workspaces-drawer {