From e7fd75703f86473db30e479df6189ad0089c25e4 Mon Sep 17 00:00:00 2001
From: Luca Cavalli <lcavalli@users.noreply.github.com>
Date: Mon, 29 Nov 2021 10:30:27 +0100
Subject: [PATCH] Fixed ellipsis usage on graph legend entries. (#10707)

---
 src/components/chart/ha-chart-base.ts | 13 ++++++++-----
 1 file changed, 8 insertions(+), 5 deletions(-)

diff --git a/src/components/chart/ha-chart-base.ts b/src/components/chart/ha-chart-base.ts
index ca49c02522..afc048e5aa 100644
--- a/src/components/chart/ha-chart-base.ts
+++ b/src/components/chart/ha-chart-base.ts
@@ -95,7 +95,7 @@ export default class HaChartBase extends LitElement {
                       borderColor: dataset.borderColor as string,
                     })}
                   ></div>
-                  ${dataset.label}
+                  <div class="label">${dataset.label}</div>
                 </li>`
               )}
             </ul>
@@ -278,11 +278,9 @@ export default class HaChartBase extends LitElement {
       }
       .chartLegend li {
         cursor: pointer;
-        display: inline-flex;
+        display: inline-grid;
+        grid-auto-flow: column;
         padding: 0 8px;
-        text-overflow: ellipsis;
-        white-space: nowrap;
-        overflow: hidden;
         box-sizing: border-box;
         align-items: center;
         color: var(--secondary-text-color);
@@ -290,6 +288,11 @@ export default class HaChartBase extends LitElement {
       .chartLegend .hidden {
         text-decoration: line-through;
       }
+      .chartLegend .label {
+        text-overflow: ellipsis;
+        white-space: nowrap;
+        overflow: hidden;
+      }
       .chartLegend .bullet,
       .chartTooltip .bullet {
         border-width: 1px;