fix of chart resize in safari and firefox

esphome · Dec 29, 2024 · 1a057c7 · 1a057c7
1 parent 6cb0eaa
commit 1a057c7
Showing 1 changed file with 28 additions and 6 deletions.
diff --git a/packages/v3/src/esp-entity-chart.ts b/packages/v3/src/esp-entity-chart.ts
@@ -58,21 +58,43 @@ export class ChartElement extends LitElement {
         maintainAspectRatio: false,
       },
     });
+    this.updateStylesIfExpanded();
+  }
+  // since the :host-context(.expanded) selector is not supported in Safari and Firefox we need to use JS to apply styles
+  // whether the parent element is expanded or not
+  updateStylesIfExpanded() {
+    const parentElement = this.parentElement;
+    const expandedClass = "expanded";
+
+    const applyStyles = () => {
+      if (parentElement && parentElement.classList.contains(expandedClass)) {
+        this.style.height = "240px";
+        this.style.opacity = "0.5";
+      } else {
+        this.style.height = "42px";
+        this.style.opacity = "0.1";
+      }
+    };
+
+    applyStyles();
+
+    // Observe class changes
+    const observer = new MutationObserver(applyStyles);
+    if (parentElement)
+      observer.observe(parentElement, {
+        attributes: true,
+        attributeFilter: ["class"],
+      });
   }
 
   static get styles() {
     return css`
       :host {
         position: absolute;
         left: 24px;
-        height: 42px !important;
+        height: 42px;
         width: calc(100% - 42px);
         z-index: -100;
-        opacity: 0.1;
-      }
-      :host-context(.expanded) {
-        height: 240px !important;
-        opacity: 0.5;
       }
     `;
   }