From 23deab253b367f80e79be40ef39a641f51062604 Mon Sep 17 00:00:00 2001
From: Wendelin <12148533+wendevlin@users.noreply.github.com>
Date: Tue, 7 Oct 2025 15:03:54 +0200
Subject: [PATCH] Add ellipsis to ha-button label (#27391)

---
 src/components/ha-button.ts                   |  6 ++
 .../config/devices/ha-config-device-page.ts   | 70 +++++++++----------
 2 files changed, 39 insertions(+), 37 deletions(-)

diff --git a/src/components/ha-button.ts b/src/components/ha-button.ts
index ae7a8f9b6e..7d286f8ffb 100644
--- a/src/components/ha-button.ts
+++ b/src/components/ha-button.ts
@@ -223,6 +223,12 @@ export class HaButton extends Button {
         .button.has-end {
           padding-inline-end: 8px;
         }
+
+        .label {
+          overflow: hidden;
+          text-overflow: ellipsis;
+          padding: var(--ha-space-1) 0;
+        }
       `,
     ];
   }
diff --git a/src/panels/config/devices/ha-config-device-page.ts b/src/panels/config/devices/ha-config-device-page.ts
index 6a37e5eed2..74cd581b5c 100644
--- a/src/panels/config/devices/ha-config-device-page.ts
+++ b/src/panels/config/devices/ha-config-device-page.ts
@@ -770,43 +770,39 @@ export class HaConfigDevicePage extends LitElement {
             ${firstDeviceAction || actions.length
               ? html`
                   <div class="card-actions" slot="actions">
-                    <div>
-                      <ha-button
-                        href=${ifDefined(firstDeviceAction!.href)}
-                        rel=${ifDefined(
-                          firstDeviceAction!.target ? "noreferrer" : undefined
-                        )}
-                        appearance="plain"
-                        target=${ifDefined(firstDeviceAction!.target)}
-                        class=${ifDefined(firstDeviceAction!.classes)}
-                        .variant=${firstDeviceAction!.classes?.includes(
-                          "warning"
-                        )
-                          ? "danger"
-                          : "brand"}
-                        .action=${firstDeviceAction!.action}
-                        @click=${this._deviceActionClicked}
-                      >
-                        ${firstDeviceAction!.label}
-                        ${firstDeviceAction!.icon
-                          ? html`
-                              <ha-svg-icon
-                                class=${ifDefined(firstDeviceAction!.classes)}
-                                .path=${firstDeviceAction!.icon}
-                                slot="start"
-                              ></ha-svg-icon>
-                            `
-                          : nothing}
-                        ${firstDeviceAction!.trailingIcon
-                          ? html`
-                              <ha-svg-icon
-                                .path=${firstDeviceAction!.trailingIcon}
-                                slot="end"
-                              ></ha-svg-icon>
-                            `
-                          : nothing}
-                      </ha-button>
-                    </div>
+                    <ha-button
+                      href=${ifDefined(firstDeviceAction!.href)}
+                      rel=${ifDefined(
+                        firstDeviceAction!.target ? "noreferrer" : undefined
+                      )}
+                      appearance="plain"
+                      target=${ifDefined(firstDeviceAction!.target)}
+                      class=${ifDefined(firstDeviceAction!.classes)}
+                      .variant=${firstDeviceAction!.classes?.includes("warning")
+                        ? "danger"
+                        : "brand"}
+                      .action=${firstDeviceAction!.action}
+                      @click=${this._deviceActionClicked}
+                    >
+                      ${firstDeviceAction!.label}
+                      ${firstDeviceAction!.icon
+                        ? html`
+                            <ha-svg-icon
+                              class=${ifDefined(firstDeviceAction!.classes)}
+                              .path=${firstDeviceAction!.icon}
+                              slot="start"
+                            ></ha-svg-icon>
+                          `
+                        : nothing}
+                      ${firstDeviceAction!.trailingIcon
+                        ? html`
+                            <ha-svg-icon
+                              .path=${firstDeviceAction!.trailingIcon}
+                              slot="end"
+                            ></ha-svg-icon>
+                          `
+                        : nothing}
+                    </ha-button>
 
                     ${actions.length
                       ? html`