jeans/frontend
jeans/frontend
1
0
Fork 0
mirror of https://github.com/home-assistant/frontend.git synced 2025-04-25 05:47:20 +00:00
Code Issues Packages Projects Releases Wiki Activity

Handle text overflow for tabs (#10239)

Browse Source
This commit is contained in:
Josh McCarty 2021-10-12 02:51:52 -07:00 committed by GitHub
parent b6c470edf1
commit 56bd731361
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
2 changed files with 14 additions and 0 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

8
src/components/ha-tab.ts
View File

@ -96,6 +96,7 @@ export class HaTab extends LitElement {
box-sizing: border-box; box-sizing: border-box;
align-items: center; align-items: center;
justify-content: center; justify-content: center;
width: 100%;
height: var(--header-height); height: var(--header-height);
cursor: pointer; cursor: pointer;
position: relative; position: relative;
@ -104,6 +105,9 @@ export class HaTab extends LitElement {
.name { .name {
white-space: nowrap; white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
max-width: 100%;
} }
:host([active]) { :host([active]) {
@ -120,6 +124,10 @@ export class HaTab extends LitElement {
justify-content: center; justify-content: center;
overflow: hidden; overflow: hidden;
} }
:host([narrow]) div {
padding: 0 4px;
}
`; `;
} }
} }

6
src/layouts/hass-tabs-subpage.ts
View File

@ -234,6 +234,12 @@ class HassTabsSubpage extends LitElement {
#tabbar { #tabbar {
display: flex; display: flex;
font-size: 14px; font-size: 14px;
overflow: hidden;
}
#tabbar > a {
overflow: hidden;
max-width: 45%;
} }
#tabbar.bottom-bar { #tabbar.bottom-bar {