From ed0f3d4114417ca2a846be60aef9f1b2369d59ea Mon Sep 17 00:00:00 2001
From: Kristóf Marussy <kristof@marussy.com>
Date: Sun, 26 Jun 2022 23:56:00 +0200
Subject: Reduce tab item layout shift (#376)
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

* fix: tab item alignment

Remove unnecessary span element to make sure tab items are vertically
centered even if service names are hidden.

* fix: prevent active tab item label shift

Signed-off-by: Kristóf Marussy <kristof@marussy.com>
---
 src/components/services/tabs/TabItem.js | 4 ++--
 src/styles/tabs.scss                    | 2 +-
 2 files changed, 3 insertions(+), 3 deletions(-)

diff --git a/src/components/services/tabs/TabItem.js b/src/components/services/tabs/TabItem.js
index 9df07456c..dd5a80e67 100644
--- a/src/components/services/tabs/TabItem.js
+++ b/src/components/services/tabs/TabItem.js
@@ -322,7 +322,7 @@ class TabItem extends Component {
       service.isBadgeEnabled
     ) {
       notificationBadge = (
-        <span>
+        <>
           {service.unreadDirectMessageCount > 0 && (
             <span className="tab-item__message-count">
               {service.unreadDirectMessageCount}
@@ -336,7 +336,7 @@ class TabItem extends Component {
           {service.isHibernating && (
             <span className="tab-item__message-count hibernating">•</span>
           )}
-        </span>
+        </>
       );
     }
 
diff --git a/src/styles/tabs.scss b/src/styles/tabs.scss
index f2b7235d7..21a5e76ce 100644
--- a/src/styles/tabs.scss
+++ b/src/styles/tabs.scss
@@ -49,7 +49,7 @@
     border-left-width: 4px;
     border-left-style: solid;
 
-    .tab-item__icon {
+    .tab-item__icon, .tab-item__label {
       margin-left: -4px;
     }
   }
-- 
cgit v1.2.3-54-g00ecf