From 3abc5c42d0b62893ca70d9e5530b3cac82ecfafd Mon Sep 17 00:00:00 2001
From: karwosts <32912880+karwosts@users.noreply.github.com>
Date: Mon, 13 Mar 2023 03:06:30 -0700
Subject: [PATCH] Fix long entity names overflowing energy panel settings
 (#15786)

---
 .../energy/components/ha-energy-battery-settings.ts       | 8 ++++++--
 src/panels/config/energy/components/styles.ts             | 2 ++
 2 files changed, 8 insertions(+), 2 deletions(-)

diff --git a/src/panels/config/energy/components/ha-energy-battery-settings.ts b/src/panels/config/energy/components/ha-energy-battery-settings.ts
index 4d7ce0101a..dc4923f27a 100644
--- a/src/panels/config/energy/components/ha-energy-battery-settings.ts
+++ b/src/panels/config/energy/components/ha-energy-battery-settings.ts
@@ -100,14 +100,14 @@ export class EnergyBatterySettings extends LitElement {
                     ></ha-icon>`
                   : html`<ha-svg-icon .path=${mdiBatteryHigh}></ha-svg-icon>`}
                 <div class="content">
-                  <span
+                  <span class="label"
                     >${getStatisticLabel(
                       this.hass,
                       source.stat_energy_from,
                       this.statsMetadata?.[source.stat_energy_from]
                     )}</span
                   >
-                  <span
+                  <span class="label"
                     >${getStatisticLabel(
                       this.hass,
                       source.stat_energy_to,
@@ -213,6 +213,10 @@ export class EnergyBatterySettings extends LitElement {
           display: flex;
           flex-direction: column;
         }
+        .label {
+          overflow: hidden;
+          text-overflow: ellipsis;
+        }
       `,
     ];
   }
diff --git a/src/panels/config/energy/components/styles.ts b/src/panels/config/energy/components/styles.ts
index d980606a44..af553c6732 100644
--- a/src/panels/config/energy/components/styles.ts
+++ b/src/panels/config/energy/components/styles.ts
@@ -36,6 +36,8 @@ export const energyCardStyles = css`
   }
   .row .content {
     flex-grow: 1;
+    overflow: hidden;
+    text-overflow: ellipsis;
   }
   ha-icon-button {
     color: var(--secondary-text-color);