Make selection bar responsive (#20378)

src/panels/config/automation/ha-automation-picker.ts

@@ -1,4 +1,5 @@
 import { consume } from "@lit-labs/context";
+import { ResizeController } from "@lit-labs/observers/resize-controller";
 import "@lrnwebcomponents/simple-tooltip/simple-tooltip";
 import "@material/web/divider/divider";
 import {
@@ -153,6 +154,10 @@ class HaAutomationPicker extends SubscribeMixin(LitElement) {
 
   @query("#overflow-menu") private _overflowMenu!: HaMenu;
 
+  private _sizeController = new ResizeController(this, {
+    callback: (entries) => entries[0]?.contentRect.width,
+  });
+
   private _automations = memoizeOne(
     (
       automations: AutomationEntity[],
@@ -414,7 +419,9 @@ class HaAutomationPicker extends SubscribeMixin(LitElement) {
           ${this.hass.localize("ui.panel.config.labels.add_label")}
         </div></ha-menu-item
       >`;
-
+    const labelsInOverflow =
+      (this._sizeController.value && this._sizeController.value < 700) ||
+      (!this._sizeController.value && this.hass.dockedSidebar === "docked");
     return html`
       <hass-tabs-subpage-data-table
         .hass=${this.hass}
@@ -538,7 +545,7 @@ class HaAutomationPicker extends SubscribeMixin(LitElement) {
                     </ha-assist-chip>
                     ${categoryItems}
                   </ha-button-menu-new>
-                  ${this.hass.dockedSidebar === "docked"
+                  ${labelsInOverflow
                     ? nothing
                     : html`<ha-button-menu-new slot="selection-bar">
                         <ha-assist-chip
@@ -600,8 +607,8 @@ class HaAutomationPicker extends SubscribeMixin(LitElement) {
                 : nothing
             }
             ${
-              this.narrow || this.hass.dockedSidebar === "docked"
+              this.narrow || labelsInOverflow
-                ? html` <ha-sub-menu>
+                ? html`<ha-sub-menu>
                     <ha-menu-item slot="item">
                       <div slot="headline">
                         ${this.hass.localize(
@@ -1146,6 +1153,9 @@ class HaAutomationPicker extends SubscribeMixin(LitElement) {
     return [
       haStyle,
       css`
+        :host {
+          display: block;
+        }
         hass-tabs-subpage-data-table {
           --data-table-row-height: 60px;
         }

src/panels/config/helpers/ha-config-helpers.ts

@@ -1,4 +1,5 @@
 import { consume } from "@lit-labs/context";
+import { ResizeController } from "@lit-labs/observers/resize-controller";
 import "@lrnwebcomponents/simple-tooltip/simple-tooltip";
 import {
   mdiAlertCircle,
@@ -83,12 +84,12 @@ import { SubscribeMixin } from "../../../mixins/subscribe-mixin";
 import { haStyle } from "../../../resources/styles";
 import { HomeAssistant, Route } from "../../../types";
 import { showAssignCategoryDialog } from "../category/show-dialog-assign-category";
+import { showCategoryRegistryDetailDialog } from "../category/show-dialog-category-registry-detail";
 import { configSections } from "../ha-panel-config";
 import "../integrations/ha-integration-overflow-menu";
+import { showLabelDetailDialog } from "../labels/show-dialog-label-detail";
 import { isHelperDomain } from "./const";
 import { showHelperDetailDialog } from "./show-dialog-helper-detail";
-import { showCategoryRegistryDetailDialog } from "../category/show-dialog-category-registry-detail";
-import { showLabelDetailDialog } from "../labels/show-dialog-label-detail";
 
 type HelperItem = {
   id: string;
@@ -163,6 +164,10 @@ export class HaConfigHelpers extends SubscribeMixin(LitElement) {
 
   @state() private _filteredStateItems?: string[] | null;
 
+  private _sizeController = new ResizeController(this, {
+    callback: (entries) => entries[0]?.contentRect.width,
+  });
+
   public hassSubscribe() {
     return [
       subscribeConfigEntries(
@@ -478,7 +483,9 @@ export class HaConfigHelpers extends SubscribeMixin(LitElement) {
           ${this.hass.localize("ui.panel.config.labels.add_label")}
         </div>
       </ha-menu-item>`;
-
+    const labelsInOverflow =
+      (this._sizeController.value && this._sizeController.value < 700) ||
+      (!this._sizeController.value && this.hass.dockedSidebar === "docked");
     return html`
       <hass-tabs-subpage-data-table
         .hass=${this.hass}
@@ -570,7 +577,7 @@ export class HaConfigHelpers extends SubscribeMixin(LitElement) {
                 </ha-assist-chip>
                 ${categoryItems}
               </ha-button-menu-new>
-              ${this.hass.dockedSidebar === "docked"
+              ${labelsInOverflow
                 ? nothing
                 : html`<ha-button-menu-new slot="selection-bar">
                     <ha-assist-chip
@@ -587,7 +594,7 @@ export class HaConfigHelpers extends SubscribeMixin(LitElement) {
                     ${labelItems}
                   </ha-button-menu-new>`}`
           : nothing}
-        ${this.narrow || this.hass.dockedSidebar === "docked"
+        ${this.narrow || labelsInOverflow
           ? html`
           <ha-button-menu-new has-overflow slot="selection-bar">
             ${
@@ -958,6 +965,9 @@ export class HaConfigHelpers extends SubscribeMixin(LitElement) {
     return [
       haStyle,
       css`
+        :host {
+          display: block;
+        }
         hass-tabs-subpage-data-table {
           --data-table-row-height: 60px;
         }

src/panels/config/scene/ha-scene-dashboard.ts

@@ -1,4 +1,5 @@
 import { consume } from "@lit-labs/context";
+import { ResizeController } from "@lit-labs/observers/resize-controller";
 import "@lrnwebcomponents/simple-tooltip/simple-tooltip";
 import {
   mdiChevronRight,
@@ -139,6 +140,10 @@ class HaSceneDashboard extends SubscribeMixin(LitElement) {
   @consume({ context: fullEntitiesContext, subscribe: true })
   _entityReg!: EntityRegistryEntry[];
 
+  private _sizeController = new ResizeController(this, {
+    callback: (entries) => entries[0]?.contentRect.width,
+  });
+
   private _scenes = memoizeOne(
     (
       scenes: SceneEntity[],
@@ -417,7 +422,9 @@ class HaSceneDashboard extends SubscribeMixin(LitElement) {
           ${this.hass.localize("ui.panel.config.labels.add_label")}
         </div></ha-menu-item
       >`;
-
+    const labelsInOverflow =
+      (this._sizeController.value && this._sizeController.value < 700) ||
+      (!this._sizeController.value && this.hass.dockedSidebar === "docked");
     return html`
       <hass-tabs-subpage-data-table
         .hass=${this.hass}
@@ -525,7 +532,7 @@ class HaSceneDashboard extends SubscribeMixin(LitElement) {
                 </ha-assist-chip>
                 ${categoryItems}
               </ha-button-menu-new>
-              ${this.hass.dockedSidebar === "docked"
+              ${labelsInOverflow
                 ? nothing
                 : html`<ha-button-menu-new slot="selection-bar">
                     <ha-assist-chip
@@ -542,7 +549,7 @@ class HaSceneDashboard extends SubscribeMixin(LitElement) {
                     ${labelItems}
                   </ha-button-menu-new>`}`
           : nothing}
-        ${this.narrow || this.hass.dockedSidebar === "docked"
+        ${this.narrow || labelsInOverflow
           ? html`
           <ha-button-menu-new has-overflow slot="selection-bar">
             ${
@@ -912,6 +919,9 @@ class HaSceneDashboard extends SubscribeMixin(LitElement) {
     return [
       haStyle,
       css`
+        :host {
+          display: block;
+        }
         hass-tabs-subpage-data-table {
           --data-table-row-height: 60px;
         }

src/panels/config/script/ha-script-picker.ts

@@ -1,4 +1,5 @@
 import { consume } from "@lit-labs/context";
+import { ResizeController } from "@lit-labs/observers/resize-controller";
 import {
   mdiChevronRight,
   mdiCog,
@@ -143,6 +144,10 @@ class HaScriptPicker extends SubscribeMixin(LitElement) {
   @consume({ context: fullEntitiesContext, subscribe: true })
   _entityReg!: EntityRegistryEntry[];
 
+  private _sizeController = new ResizeController(this, {
+    callback: (entries) => entries[0]?.contentRect.width,
+  });
+
   private _scripts = memoizeOne(
     (
       scripts: ScriptEntity[],
@@ -429,7 +434,9 @@ class HaScriptPicker extends SubscribeMixin(LitElement) {
           ${this.hass.localize("ui.panel.config.labels.add_label")}
         </div></ha-menu-item
       >`;
-
+    const labelsInOverflow =
+      (this._sizeController.value && this._sizeController.value < 700) ||
+      (!this._sizeController.value && this.hass.dockedSidebar === "docked");
     return html`
       <hass-tabs-subpage-data-table
         .hass=${this.hass}
@@ -551,7 +558,7 @@ class HaScriptPicker extends SubscribeMixin(LitElement) {
                 </ha-assist-chip>
                 ${categoryItems}
               </ha-button-menu-new>
-              ${this.hass.dockedSidebar === "docked"
+              ${labelsInOverflow
                 ? nothing
                 : html`<ha-button-menu-new slot="selection-bar">
                     <ha-assist-chip
@@ -568,7 +575,7 @@ class HaScriptPicker extends SubscribeMixin(LitElement) {
                     ${labelItems}
                   </ha-button-menu-new>`}`
           : nothing}
-        ${this.narrow || this.hass.dockedSidebar === "docked"
+        ${this.narrow || labelsInOverflow
           ? html`
           <ha-button-menu-new has-overflow slot="selection-bar">
             ${
@@ -1028,6 +1035,9 @@ class HaScriptPicker extends SubscribeMixin(LitElement) {
     return [
       haStyle,
       css`
+        :host {
+          display: block;
+        }
         hass-tabs-subpage-data-table {
           --data-table-row-height: 60px;
         }