Fix Drag-n-drop not working if the service name is shown (fixes #347) (#349)

3 files changed, 7 insertions, 16 deletions

diff --git a/src/components/services/tabs/TabItem.js b/src/components/services/tabs/TabItem.js
index c2e7baddb..9df07456c 100644
--- a/src/components/services/tabs/TabItem.js
+++ b/src/components/services/tabs/TabItem.js
@@ -366,15 +366,10 @@ class TabItem extends Component {
             : ''
         }`}
       >
-        {showServiceNameSetting ? (
-          <div>
-            <img src={service.icon} className="tab-item__icon" alt="" />
-            <span className="tab-item__label">{service.name}</span>
-          </div>
-        ) : (
-          <img src={service.icon} className="tab-item__icon" alt="" />
+        <img src={service.icon} className="tab-item__icon" alt="" />
+        {showServiceNameSetting && (
+          <span className="tab-item__label">{service.name}</span>
         )}
-
         {notificationBadge}
         {errorBadge}
         {IS_SERVICE_DEBUGGING_ENABLED && (
diff --git a/src/features/appearance/index.ts b/src/features/appearance/index.ts
index 42de5e4cc..17ae5937e 100644
--- a/src/features/appearance/index.ts
+++ b/src/features/appearance/index.ts
@@ -231,7 +231,8 @@ function generateServiceRibbonWidthStyle(
       ${useGrayscaleServices ? graysacleServices : null},
     }
     .tab-item .tab-item__label {
-      margin-left: 0px !important;
+      margin-left: 4px !important;
+      font-size: ${fontSize}px !important;
     }
     .tab-item.is-label-enabled {
       padding-bottom: 0px !important;
@@ -251,10 +252,7 @@ function generateServiceRibbonWidthStyle(
     .darwin .sidebar .sidebar__button--workspaces.is-active {
       height: ${width - sidebarSizeBias}px !important;
     }
-    .tab-item .tab-item__label{
-      font-size: ${fontSize}px !important;
-    }
-    .tab-item div{
+    .tab-item div {
       overflow: hidden !important;
     }
   `
diff --git a/src/styles/tabs.scss b/src/styles/tabs.scss
index b910b0760..ce843520a 100644
--- a/src/styles/tabs.scss
+++ b/src/styles/tabs.scss
@@ -34,6 +34,7 @@
   justify-content: center;
   min-height: 50px;
   position: relative;
+  flex-wrap: wrap;
   @media (prefers-reduced-motion: no-preference) {
     transition: background $theme-transition-time;
   }
@@ -51,9 +52,6 @@
     .tab-item__icon {
       margin-left: -4px;
     }
-    .tab-item__label {
-      margin-left: -4px;
-    }
   }
 
   &.is-label-enabled{