From 56bd7313612f352fdbac35858c7cae3f285cf7d3 Mon Sep 17 00:00:00 2001
From: Josh McCarty <josh@joshmccarty.com>
Date: Tue, 12 Oct 2021 02:51:52 -0700
Subject: [PATCH] Handle text overflow for tabs (#10239)

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

diff --git a/src/components/ha-tab.ts b/src/components/ha-tab.ts
index 5b326f61fb..da172e1fab 100644
--- a/src/components/ha-tab.ts
+++ b/src/components/ha-tab.ts
@@ -96,6 +96,7 @@ export class HaTab extends LitElement {
         box-sizing: border-box;
         align-items: center;
         justify-content: center;
+        width: 100%;
         height: var(--header-height);
         cursor: pointer;
         position: relative;
@@ -104,6 +105,9 @@ export class HaTab extends LitElement {
 
       .name {
         white-space: nowrap;
+        overflow: hidden;
+        text-overflow: ellipsis;
+        max-width: 100%;
       }
 
       :host([active]) {
@@ -120,6 +124,10 @@ export class HaTab extends LitElement {
         justify-content: center;
         overflow: hidden;
       }
+
+      :host([narrow]) div {
+        padding: 0 4px;
+      }
     `;
   }
 }
diff --git a/src/layouts/hass-tabs-subpage.ts b/src/layouts/hass-tabs-subpage.ts
index 14767f4a0e..9b009aefc9 100644
--- a/src/layouts/hass-tabs-subpage.ts
+++ b/src/layouts/hass-tabs-subpage.ts
@@ -234,6 +234,12 @@ class HassTabsSubpage extends LitElement {
       #tabbar {
         display: flex;
         font-size: 14px;
+        overflow: hidden;
+      }
+
+      #tabbar > a {
+        overflow: hidden;
+        max-width: 45%;
       }
 
       #tabbar.bottom-bar {