diff --git a/src/components/ha-button.ts b/src/components/ha-button.ts index 473d08dd1589..b58f32c8b5c3 100644 --- a/src/components/ha-button.ts +++ b/src/components/ha-button.ts @@ -20,6 +20,10 @@ export class HaButton extends Button { .trailing-icon { display: flex; } + .slot-container { + width: 100%; + overflow: hidden; + } `, ]; } diff --git a/src/components/ha-dialog.ts b/src/components/ha-dialog.ts index f061931322a4..feaceec93daf 100644 --- a/src/components/ha-dialog.ts +++ b/src/components/ha-dialog.ts @@ -94,6 +94,8 @@ export class HaDialog extends DialogBase { } .mdc-dialog__title { padding: 24px 24px 0 24px; + text-overflow: ellipsis; + overflow: hidden; } .mdc-dialog__actions { padding: 12px 24px 12px 24px; diff --git a/src/panels/todo/ha-panel-todo.ts b/src/panels/todo/ha-panel-todo.ts index 8dbdd77e8c7c..abafcbf6035c 100644 --- a/src/panels/todo/ha-panel-todo.ts +++ b/src/panels/todo/ha-panel-todo.ts @@ -2,10 +2,10 @@ import { ResizeController } from "@lit-labs/observers/resize-controller"; import "@material/mwc-list"; import { mdiChevronDown, + mdiCommentProcessingOutline, mdiDelete, mdiDotsVertical, mdiInformationOutline, - mdiMicrophone, mdiPlus, } from "@mdi/js"; import { @@ -173,11 +173,13 @@ class PanelTodo extends LitElement { .x=${this.mobile ? 0 : undefined} > - ${this._entityId - ? this._entityId in this.hass.states - ? computeStateName(this.hass.states[this._entityId]) - : this._entityId - : ""} +
+ ${this._entityId + ? this._entityId in this.hass.states + ? computeStateName(this.hass.states[this._entityId]) + : this._entityId + : ""} +
` - : "Lists"} + : this.hass.localize("panel.todo")} ${listItems} @@ -216,8 +218,9 @@ class PanelTodo extends LitElement { : nothing}
  • - - ${this.hass.localize("ui.panel.todo.start_conversation")} + + + ${this.hass.localize("ui.panel.todo.assist")} ${entityRegistryEntry?.platform === "local_todo" ? html`
  • @@ -335,11 +338,18 @@ class PanelTodo extends LitElement { :host([mobile]) .lists { --mdc-menu-min-width: 100vw; } + :host(:not([mobile])) .lists ha-list-item { + max-width: calc(100vw - 120px); + } :host([mobile]) ha-button-menu { --mdc-shape-medium: 0 0 var(--mdc-shape-medium) var(--mdc-shape-medium); } + ha-button-menu { + max-width: 100%; + } ha-button-menu ha-button { + max-width: 100%; --mdc-theme-primary: currentColor; --mdc-typography-button-text-transform: none; --mdc-typography-button-font-size: var( @@ -360,6 +370,13 @@ class PanelTodo extends LitElement { ); --button-height: 40px; } + ha-button-menu ha-button div { + text-overflow: ellipsis; + width: 100%; + overflow: hidden; + white-space: nowrap; + display: block; + } `, ]; } diff --git a/src/translations/en.json b/src/translations/en.json index c99285a8c0b9..6e2fcc121a2c 100644 --- a/src/translations/en.json +++ b/src/translations/en.json @@ -4520,7 +4520,6 @@ "never_triggered": "Never triggered" }, "todo-list": { - "lists": "To-do Lists", "checked_items": "Checked items", "clear_items": "Clear checked items", "add_item": "Add item", @@ -5094,7 +5093,7 @@ "description": "The Sensor card gives you a quick overview of your sensors state with an optional graph to visualize change over time." }, "todo-list": { - "name": "Todo list", + "name": "To-do list", "description": "The to-do list card allows you to add, edit, check-off, and clear items from your to-do list.", "integration_not_loaded": "This card requires the `todo` integration to be set up." }, @@ -5515,7 +5514,7 @@ } }, "todo": { - "start_conversation": "Start conversation", + "assist": "[%key:ui::panel::lovelace::menu::assist%]", "create_list": "Create list", "delete_list": "Delete list", "information": "Information",