From 0a478ee1dad59faac99894a583b71ffafd2edd6f Mon Sep 17 00:00:00 2001
From: Bram Kragten <mail@bramkragten.nl>
Date: Tue, 25 May 2021 12:05:20 +0200
Subject: [PATCH] Fix tabs styling (#9241)

---
 src/components/ha-tab.ts         |  8 ++++----
 src/layouts/hass-tabs-subpage.ts | 10 +++++-----
 2 files changed, 9 insertions(+), 9 deletions(-)

diff --git a/src/components/ha-tab.ts b/src/components/ha-tab.ts
index 7575e112e5..fe391171ba 100644
--- a/src/components/ha-tab.ts
+++ b/src/components/ha-tab.ts
@@ -117,10 +117,10 @@ export class HaTab extends LitElement {
       }
 
       :host([narrow]) {
-        padding: 0 16px;
-      }
-      :host([narrow]) div {
-        padding: 0;
+        min-width: 0;
+        display: flex;
+        justify-content: center;
+        overflow: hidden;
       }
     `;
   }
diff --git a/src/layouts/hass-tabs-subpage.ts b/src/layouts/hass-tabs-subpage.ts
index 7ee2f6f0c7..ea691e1766 100644
--- a/src/layouts/hass-tabs-subpage.ts
+++ b/src/layouts/hass-tabs-subpage.ts
@@ -229,6 +229,10 @@ class HassTabsSubpage extends LitElement {
         color: var(--sidebar-text-color);
         text-decoration: none;
       }
+      :host([narrow]) .toolbar a {
+        width: 25%;
+      }
+
       #tabbar {
         display: flex;
         font-size: 14px;
@@ -242,7 +246,7 @@ class HassTabsSubpage extends LitElement {
         box-sizing: border-box;
         background-color: var(--sidebar-background-color);
         border-top: 1px solid var(--divider-color);
-        justify-content: space-between;
+        justify-content: space-around;
         z-index: 2;
         font-size: 12px;
         width: 100%;
@@ -258,10 +262,6 @@ class HassTabsSubpage extends LitElement {
         min-width: 40px;
       }
 
-      ha-tab {
-        display: block;
-      }
-
       ha-menu-button,
       ha-icon-button-arrow-prev,
       ::slotted([slot="toolbar-icon"]) {