Use resize-controller instead of container queries (#18885)

src/components/ha-control-number-buttons.ts

@@ -1,3 +1,4 @@
+import { ResizeController } from "@lit-labs/observers/resize-controller";
 import { mdiMinus, mdiPlus } from "@mdi/js";
 import {
   CSSResultGroup,
@@ -49,6 +50,13 @@ export class HaControlNumberButton extends LitElement {
 
   @query("#input") _input!: HTMLDivElement;
 
+  private _hideUnit = new ResizeController(this, {
+    callback: (entries) => {
+      const width = entries[0]?.contentRect.width;
+      return width < 100;
+    },
+  });
+
   private boundedValue(value: number) {
     const clamped = conditionalClamp(value, this.min, this.max);
     return Math.round(clamped / this._step) * this._step;
@@ -145,7 +153,10 @@ export class HaControlNumberButton extends LitElement {
           ?disabled=${this.disabled}
           @keydown=${this._handleKeyDown}
         >
-          ${value} ${unit ? html`<span class="unit">${unit}</span>` : nothing}
+          ${value}
+          ${unit && !this._hideUnit.value
+            ? html`<span class="unit">${unit}</span>`
+            : nothing}
         </div>
         <button
           class="button minus"