Fix resize observers and update gauge styling (#5949)

src/panels/lovelace/cards/hui-gauge-card.ts

@@ -238,9 +238,7 @@ class HuiGaugeCard extends LitElement implements LovelaceCard {
   private async _attachObserver(): Promise<void> {
     await installResizeObserver();
 
-    this._resizeObserver = new ResizeObserver(
+    this._resizeObserver = new ResizeObserver(this._debouncedMeasure);
-      debounce(() => this._measureCard(), 250, false)
-    );
 
     const card = this.shadowRoot!.querySelector("ha-card");
     // If we show an error or warning there is no ha-card
@@ -250,6 +248,8 @@ class HuiGaugeCard extends LitElement implements LovelaceCard {
     this._resizeObserver.observe(card);
   }
 
+  private _debouncedMeasure = debounce(() => this._measureCard(), 250, true);
+
   private _measureCard() {
     if (!this.isConnected) {
       return;
@@ -277,7 +277,7 @@ class HuiGaugeCard extends LitElement implements LovelaceCard {
         cursor: pointer;
         height: 100%;
         overflow: hidden;
-        padding: 16px 16px 0 16px;
+        padding: 16px;
         display: flex;
         align-items: center;
         justify-content: center;
@@ -293,37 +293,39 @@ class HuiGaugeCard extends LitElement implements LovelaceCard {
       round-slider {
         max-width: 200px;
         --round-slider-path-width: 35px;
-        --round-slider-path-color: var(--disabled-text-color);
+        --round-slider-path-color: var(--primary-background-color);
         --round-slider-linecap: "butt";
       }
 
       .gauge-data {
-        line-height: 1;
         text-align: center;
-        position: relative;
+        line-height: initial;
         color: var(--primary-text-color);
-        margin-top: -28px;
+        margin-top: -26px;
-        margin-bottom: 14px;
+        width: 100%;
       }
 
       .gauge-data .percent {
+        white-space: nowrap;
         font-size: 28px;
       }
 
       .gauge-data .name {
-        padding-top: 6px;
+        font-size: 15px;
-        font-size: 14px;
       }
 
       /* ============= NARROW ============= */
 
+      :host([narrow]) ha-card {
+        padding: 8px;
+      }
+
       :host([narrow]) round-slider {
         --round-slider-path-width: 22px;
       }
 
       :host([narrow]) .gauge-data {
-        margin-top: -24px;
+        margin-top: -22px;
-        margin-bottom: 12px;
       }
 
       :host([narrow]) .gauge-data .percent {
@@ -331,30 +333,29 @@ class HuiGaugeCard extends LitElement implements LovelaceCard {
       }
 
       :host([narrow]) .gauge-data .name {
-        font-size: 12px;
+        font-size: 14px;
       }
 
       /* ============= VERY NARROW ============= */
 
+      :host([narrow]) ha-card {
+        padding: 4px;
+      }
+
       :host([veryNarrow]) round-slider {
         --round-slider-path-width: 15px;
       }
 
-      :host([veryNarrow]) ha-card {
-        padding-bottom: 16px;
-      }
-
       :host([veryNarrow]) .gauge-data {
-        margin-top: 0;
+        margin-top: -16px;
-        margin-bottom: 0;
       }
 
       :host([veryNarrow]) .gauge-data .percent {
-        font-size: 20px;
+        font-size: 16px;
       }
 
       :host([veryNarrow]) .gauge-data .name {
-        font-size: 10px;
+        font-size: 12px;
       }
     `;
   }

src/panels/lovelace/cards/hui-media-control-card.ts

@@ -618,6 +618,8 @@ export class HuiMediaControlCard extends LitElement implements LovelaceCard {
     );
   }
 
+  private _debouncedMeasure = debounce(() => this._measureCard(), 250, true);
+
   private _measureCard() {
     const card = this.shadowRoot!.querySelector("ha-card");
     if (!card) {
@@ -630,9 +632,7 @@ export class HuiMediaControlCard extends LitElement implements LovelaceCard {
 
   private async _attachObserver(): Promise<void> {
     await installResizeObserver();
-    this._resizeObserver = new ResizeObserver(
+    this._resizeObserver = new ResizeObserver(this._debouncedMeasure);
-      debounce(() => this._measureCard(), 250, false)
-    );
 
     const card = this.shadowRoot!.querySelector("ha-card");
     // If we show an error or warning there is no ha-card

src/panels/lovelace/cards/hui-weather-forecast-card.ts

@@ -290,9 +290,7 @@ class HuiWeatherForecastCard extends LitElement implements LovelaceCard {
 
   private async _attachObserver(): Promise<void> {
     await installResizeObserver();
-    this._resizeObserver = new ResizeObserver(
+    this._resizeObserver = new ResizeObserver(this._debouncedMeasure);
-      debounce(() => this._measureCard(), 250, false)
-    );
 
     const card = this.shadowRoot!.querySelector("ha-card");
     // If we show an error or warning there is no ha-card
@@ -302,6 +300,8 @@ class HuiWeatherForecastCard extends LitElement implements LovelaceCard {
     this._resizeObserver.observe(card);
   }
 
+  private _debouncedMeasure = debounce(() => this._measureCard(), 250, true);
+
   private _measureCard() {
     if (!this.isConnected) {
       return;

src/panels/lovelace/entity-rows/hui-media-player-entity-row.ts

@@ -53,7 +53,7 @@ class HuiMediaPlayerEntityRow extends LitElement implements LovelaceRow {
       this._veryNarrow = (this.clientWidth || 0) < 225;
     },
     250,
-    false
+    true
   );
 
   public setConfig(config: EntityConfig): void {
@@ -216,9 +216,7 @@ class HuiMediaPlayerEntityRow extends LitElement implements LovelaceRow {
 
   private _attachObserver(): void {
     installResizeObserver().then(() => {
-      this._resizeObserver = new ResizeObserver(() =>
+      this._resizeObserver = new ResizeObserver(this._debouncedResizeListener);
-        this._debouncedResizeListener()
-      );
 
       this._resizeObserver.observe(this);
     });