Handle text overflow for tabs (#10239)

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

View File

@ -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;
}
`;
}
}

View File

@ -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 {