feat: add new style to horizontal sidebar

Author: DenysMb

src/features/appearance/index.ts

@@ -231,7 +231,7 @@ const generateServiceRibbonWidthStyle = (
   return horizontal
     ? `
     .sidebar {
-      height: ${width}px !important;
+      height: ${width + 8}px !important;
       overflow: hidden !important;
     }
     .sidebar div {
@@ -250,15 +250,12 @@ const generateServiceRibbonWidthStyle = (
     .tab-item .tab-item__label {
       font-size: ${fontSize}px !important;
     }
-    .tab-item.is-label-enabled {
-      padding-top: 6px !important;
-      padding-bottom: 2px !important;
-    }
     .sidebar__button {
       font-size: ${width / 3}px !important;
+      line-height: 0;
     }
     .app .app__content {
-      padding-top: ${width + sidebarSizeBias}px !important;
+      padding-top: ${width + sidebarSizeBias + 8}px !important;
     }
     .workspaces-drawer {
       margin-top: -${width}px !important;

src/styles/tabs.scss

@@ -16,6 +16,8 @@
   display: flex;
   flex-direction: column;
   flex-shrink: 1;
+  padding: 4px;
+  gap: 4px;
 
   .placeholder {
     height: 40px;
@@ -31,19 +33,20 @@
   min-height: 50px;
   position: relative;
   flex-direction: column;
+  width: $theme-sidebar-width;
+  border-radius: 4px;
+  padding: 4px;
+
   @media (prefers-reduced-motion: no-preference) {
     transition: background $theme-transition-time;
   }
-  width: $theme-sidebar-width;
 
   &.is-active {
     background: change-color(
       $theme-brand-primary,
       $lightness: min(lightness($theme-brand-primary) * 1.35, 100)
     );
 
-    box-shadow: inset 4px 0 0 0 $theme-brand-primary;
-
     .tab-item__icon,
     .tab-item__label {
       margin-left: 0px;
@@ -53,8 +56,6 @@
   &.is-label-enabled {
     height: min-content;
     overflow: hidden;
-    padding-top: 8px;
-    padding-bottom: 8px;
   }
 
   .tab-item__label {

src/styles/vertical.scss

@@ -33,9 +33,8 @@ $tabitem-bias: 30px;
 
     .tab-item {
       &.is-active {
-        box-shadow: inset 0 4px 0 0 $theme-brand-primary;
         overflow: hidden;
-        height: $sidebar-width + 4;
+        height: $sidebar-width;
       }
 
       &.is-label-enabled {
@@ -44,9 +43,6 @@ $tabitem-bias: 30px;
         height: $sidebar-width + 10;
         width: max-content !important;
         overflow: hidden;
-        padding-left: 4px;
-        padding-right: 4px;
-        padding-top: 8px;
       }
 
       .tab-item__icon {