diff --git a/src/components/ha-sidebar.ts b/src/components/ha-sidebar.ts
index 1a2e7f5ada..a8a6a1b5a3 100644
--- a/src/components/ha-sidebar.ts
+++ b/src/components/ha-sidebar.ts
@@ -589,10 +589,7 @@ class HaSidebar extends SubscribeMixin(LitElement) {
// On keypresses on the listbox, we're going to ignore mouse enter events
// for 100ms so that we ignore it when pressing down arrow scrolls the
// sidebar causing the mouse to hover a new icon
- if (
- this.alwaysExpand ||
- new Date().getTime() < this._recentKeydownActiveUntil
- ) {
+ if (new Date().getTime() < this._recentKeydownActiveUntil) {
return;
}
if (this._mouseLeaveTimeout) {
@@ -612,7 +609,7 @@ class HaSidebar extends SubscribeMixin(LitElement) {
}
private _listboxFocusIn(ev) {
- if (this.alwaysExpand || ev.target.localName !== "ha-md-list-item") {
+ if (ev.target.localName !== "ha-md-list-item") {
return;
}
this._showTooltip(ev.target);
@@ -652,6 +649,14 @@ class HaSidebar extends SubscribeMixin(LitElement) {
clearTimeout(this._tooltipHideTimeout);
this._tooltipHideTimeout = undefined;
}
+ const itemText = item.querySelector(".item-text") as HTMLElement | null;
+ if (this.hasAttribute("expanded") && itemText) {
+ const isTruncated = itemText.scrollWidth > itemText.clientWidth;
+ if (!isTruncated) {
+ this._hideTooltip();
+ return;
+ }
+ }
const tooltip = this._tooltip;
const allListbox = this.shadowRoot!.querySelectorAll("ha-md-list")!;
const listbox = [...allListbox].find((lb) => lb.contains(item));
@@ -662,9 +667,7 @@ class HaSidebar extends SubscribeMixin(LitElement) {
(listbox?.offsetTop ?? 0) -
(listbox?.scrollTop ?? 0);
- tooltip.innerText = (
- item.querySelector(".item-text") as HTMLElement
- ).innerText;
+ tooltip.innerText = itemText?.innerText ?? "";
tooltip.style.display = "block";
tooltip.style.position = "fixed";
tooltip.style.top = `${top}px`;
@@ -846,6 +849,9 @@ class HaSidebar extends SubscribeMixin(LitElement) {
}
:host([expanded]) ha-md-list-item .item-text {
display: block;
+ overflow: hidden;
+ text-overflow: ellipsis;
+ white-space: nowrap;
}
.divider {
@@ -913,7 +919,9 @@ class HaSidebar extends SubscribeMixin(LitElement) {
position: absolute;
opacity: 0.9;
border-radius: var(--ha-border-radius-sm);
- white-space: nowrap;
+ max-width: calc(var(--ha-space-20) * 3);
+ white-space: normal;
+ overflow-wrap: break-word;
color: var(--sidebar-background-color);
background-color: var(--sidebar-text-color);
padding: var(--ha-space-1);
diff --git a/src/panels/config/lovelace/dashboards/ha-config-lovelace-dashboards.ts b/src/panels/config/lovelace/dashboards/ha-config-lovelace-dashboards.ts
index 5bef4823f3..af27793629 100644
--- a/src/panels/config/lovelace/dashboards/ha-config-lovelace-dashboards.ts
+++ b/src/panels/config/lovelace/dashboards/ha-config-lovelace-dashboards.ts
@@ -175,24 +175,31 @@ export class HaConfigLovelaceDashboards extends LitElement {
template: narrow
? undefined
: (dashboard) => html`
- ${dashboard.title}
- ${dashboard.default
- ? html`
-
-
- ${this.hass.localize(
- `ui.panel.config.lovelace.dashboards.default_dashboard`
- )}
-
- `
- : nothing}
+
+ ${dashboard.title}
+ ${dashboard.default
+ ? html`
+
+
+ ${this.hass.localize(
+ `ui.panel.config.lovelace.dashboards.default_dashboard`
+ )}
+
+ `
+ : nothing}
+
`,
},
};