Adapt more info button layout depending of number of items and screen (#17691)

src/components/ha-control-select-menu.ts

@@ -171,15 +171,12 @@ export class HaControlSelectMenu extends SelectBase {
         --control-select-menu-background-color: var(--disabled-color);
         --control-select-menu-background-opacity: 0.2;
         --control-select-menu-border-radius: 14px;
-        --control-select-menu-min-width: 120px;
-        --control-select-menu-max-width: 200px;
-        --control-select-menu-width: 100%;
         --mdc-icon-size: 20px;
+        width: auto;
         color: var(--primary-text-color);
         -webkit-tap-highlight-color: transparent;
       }
       .select-anchor {
-        color: var(--control-select-menu-text-color);
         height: 48px;
         padding: 6px 10px;
         overflow: hidden;
@@ -198,11 +195,8 @@ export class HaControlSelectMenu extends SelectBase {
         z-index: 0;
         font-size: inherit;
         transition: color 180ms ease-in-out;
-        color: var(--control-text-icon-color);
         gap: 10px;
-        min-width: var(--control-select-menu-min-width);
-        max-width: var(--control-select-menu-max-width);
-        width: var(--control-select-menu-width);
+        width: 100%;
         user-select: none;
         font-size: 14px;
         font-style: normal;

src/dialogs/more-info/components/ha-more-info-control-select-container.ts

@@ -0,0 +1,79 @@
+import { css, CSSResultGroup, html, LitElement, TemplateResult } from "lit";
+import { customElement } from "lit/decorators";
+import { classMap } from "lit/directives/class-map";
+
+@customElement("ha-more-info-control-select-container")
+export class HaMoreInfoControlSelectContainer extends LitElement {
+  protected render(): TemplateResult {
+    const classname = `items-${this.childElementCount}`;
+
+    return html`
+      <div class="controls">
+        <div
+          class="controls-scroll ${classMap({
+            [classname]: true,
+            multiline: this.childElementCount >= 4,
+          })}"
+        >
+          <slot></slot>
+        </div>
+      </div>
+    `;
+  }
+
+  static get styles(): CSSResultGroup {
+    return css`
+      .controls {
+        display: flex;
+        flex-direction: row;
+        justify-content: center;
+      }
+      .controls-scroll {
+        display: flex;
+        flex-direction: row;
+        justify-content: flex-start;
+        gap: 12px;
+        margin: auto;
+        overflow: auto;
+        -ms-overflow-style: none; /* IE and Edge */
+        scrollbar-width: none; /* Firefox */
+        margin: 0 -24px;
+        padding: 0 24px;
+      }
+      .controls-scroll::-webkit-scrollbar {
+        display: none;
+      }
+
+      ::slotted(*) {
+        min-width: 120px;
+        max-width: 160px;
+        flex: none;
+      }
+
+      @media all and (hover: hover),
+        all and (min-width: 600px) and (min-height: 501px) {
+        .controls-scroll {
+          justify-content: center;
+          flex-wrap: wrap;
+          width: 100%;
+          max-width: 450px;
+        }
+        .controls-scroll.items-4 {
+          max-width: 300px;
+        }
+        .controls-scroll.items-3 ::slotted(*) {
+          max-width: 140px;
+        }
+        .multiline ::slotted(*) {
+          width: 140px;
+        }
+      }
+    `;
+  }
+}
+
+declare global {
+  interface HTMLElementTagNameMap {
+    "ha-more-info-control-select-container": HaMoreInfoControlSelectContainer;
+  }
+}

src/dialogs/more-info/components/ha-more-info-control-style.ts

@@ -22,35 +22,6 @@ export const moreInfoControlStyle = css`
     margin-bottom: 24px;
   }
 
-  .secondary-controls {
-    display: flex;
-    flex-direction: row;
-    justify-content: center;
-  }
-  .secondary-controls-scroll {
-    display: flex;
-    flex-direction: row;
-    justify-content: flex-start;
-    gap: 12px;
-    margin: auto;
-    overflow: auto;
-    -ms-overflow-style: none; /* IE and Edge */
-    scrollbar-width: none; /* Firefox */
-    margin: 0 -24px;
-    padding: 0 24px;
-  }
-  .secondary-controls-scroll::-webkit-scrollbar {
-    display: none;
-  }
-
-  /* Don't use scroll on device without touch support  */
-  @media (hover: hover) {
-    .secondary-controls-scroll {
-      justify-content: center;
-      flex-wrap: wrap;
-    }
-  }
-
   .buttons {
     display: flex;
     align-items: center;

src/dialogs/more-info/controls/more-info-climate.ts

@@ -38,6 +38,7 @@ import { haOscillating } from "../../../data/icons/haOscillating";
 import { HomeAssistant } from "../../../types";
 import "../components/climate/ha-more-info-climate-humidity";
 import "../components/climate/ha-more-info-climate-temperature";
+import "../components/ha-more-info-control-select-container";
 import { moreInfoControlStyle } from "../components/ha-more-info-control-style";
 
 type MainControl = "temperature" | "humidity";
@@ -163,8 +164,7 @@ class MoreInfoClimate extends LitElement {
             `
           : nothing}
       </div>
-      <div class="secondary-controls">
-        <div class="secondary-controls-scroll">
+      <ha-more-info-control-select-container>
         <ha-control-select-menu
           .label=${this.hass.formatEntityAttributeName(
             this.stateObj,
@@ -207,10 +207,7 @@ class MoreInfoClimate extends LitElement {
                 @selected=${this._handlePresetmodeChanged}
                 @closed=${stopPropagation}
               >
-                  <ha-svg-icon
-                    slot="icon"
-                    .path=${mdiTuneVariant}
-                  ></ha-svg-icon>
+                <ha-svg-icon slot="icon" .path=${mdiTuneVariant}></ha-svg-icon>
                 ${stateObj.attributes.preset_modes!.map(
                   (mode) => html`
                     <ha-list-item .value=${mode} graphic="icon">
@@ -295,8 +292,7 @@ class MoreInfoClimate extends LitElement {
               </ha-control-select-menu>
             `
           : nothing}
-        </div>
-      </div>
+      </ha-more-info-control-select-container>
     `;
   }
 

src/dialogs/more-info/controls/more-info-fan.ts

@@ -27,6 +27,7 @@ import { haOscillating } from "../../../data/icons/haOscillating";
 import { haOscillatingOff } from "../../../data/icons/haOscillatingOff";
 import type { HomeAssistant } from "../../../types";
 import "../components/fan/ha-more-info-fan-speed";
+import "../components/ha-more-info-control-select-container";
 import { moreInfoControlStyle } from "../components/ha-more-info-control-style";
 import "../components/ha-more-info-state-header";
 import "../components/ha-more-info-toggle";
@@ -191,8 +192,7 @@ class MoreInfoFan extends LitElement {
             `
           : nothing}
       </div>
-      <div class="secondary-controls">
-        <div class="secondary-controls-scroll">
+      <ha-more-info-control-select-container>
         ${supportsPresetMode && this.stateObj.attributes.preset_modes
           ? html`
               <ha-control-select-menu
@@ -207,10 +207,7 @@ class MoreInfoFan extends LitElement {
                 @selected=${this._handlePresetMode}
                 @closed=${stopPropagation}
               >
-                  <ha-svg-icon
-                    slot="icon"
-                    .path=${mdiTuneVariant}
-                  ></ha-svg-icon>
+                <ha-svg-icon slot="icon" .path=${mdiTuneVariant}></ha-svg-icon>
                 ${this.stateObj.attributes.preset_modes?.map(
                   (mode) => html`
                     <ha-list-item .value=${mode}>
@@ -300,8 +297,7 @@ class MoreInfoFan extends LitElement {
               </ha-control-select-menu>
             `
           : nothing}
-        </div>
-      </div>
+      </ha-more-info-control-select-container>
     `;
   }
 

src/dialogs/more-info/controls/more-info-humidifier.ts

@@ -25,6 +25,7 @@ import {
   computeHumidiferModeIcon,
 } from "../../../data/humidifier";
 import { HomeAssistant } from "../../../types";
+import "../components/ha-more-info-control-select-container";
 import { moreInfoControlStyle } from "../components/ha-more-info-control-style";
 import "../components/humidifier/ha-more-info-humidifier-humidity";
 
@@ -91,8 +92,7 @@ class MoreInfoHumidifier extends LitElement {
         ></ha-more-info-humidifier-humidity>
       </div>
 
-      <div class="secondary-controls">
-        <div class="secondary-controls-scroll">
+      <ha-more-info-control-select-container>
         <ha-control-select-menu
           .label=${this.hass.localize("ui.card.humidifier.state")}
           .value=${this.stateObj.state}
@@ -136,10 +136,7 @@ class MoreInfoHumidifier extends LitElement {
                 @selected=${this._handleModeChanged}
                 @closed=${stopPropagation}
               >
-                  <ha-svg-icon
-                    slot="icon"
-                    .path=${mdiTuneVariant}
-                  ></ha-svg-icon>
+                <ha-svg-icon slot="icon" .path=${mdiTuneVariant}></ha-svg-icon>
                 ${stateObj.attributes.available_modes!.map(
                   (mode) => html`
                     <ha-list-item .value=${mode} graphic="icon">
@@ -162,8 +159,7 @@ class MoreInfoHumidifier extends LitElement {
               </ha-control-select-menu>
             `
           : nothing}
-        </div>
-      </div>
+      </ha-more-info-control-select-container>
     `;
   }
 

src/dialogs/more-info/controls/more-info-light.ts

@@ -36,6 +36,7 @@ import {
   lightSupportsFavoriteColors,
 } from "../../../data/light";
 import type { HomeAssistant } from "../../../types";
+import "../components/ha-more-info-control-select-container";
 import { moreInfoControlStyle } from "../components/ha-more-info-control-style";
 import "../components/ha-more-info-state-header";
 import "../components/ha-more-info-toggle";
@@ -286,8 +287,7 @@ class MoreInfoLight extends LitElement {
           : nothing}
       </div>
       <div>
-        <div class="secondary-controls">
-          <div class="secondary-controls-scroll">
+        <ha-more-info-control-select-container>
           ${supportsEffects && this.stateObj.attributes.effect_list
             ? html`
                 <ha-control-select-menu
@@ -317,8 +317,7 @@ class MoreInfoLight extends LitElement {
                 </ha-control-select-menu>
               `
             : nothing}
-          </div>
-        </div>
+        </ha-more-info-control-select-container>
         <ha-attributes
           .hass=${this.hass}
           .stateObj=${this.stateObj}

src/dialogs/more-info/controls/more-info-water_heater.ts

@@ -13,6 +13,7 @@ import {
   computeOperationModeIcon,
 } from "../../../data/water_heater";
 import { HomeAssistant } from "../../../types";
+import "../components/ha-more-info-control-select-container";
 import { moreInfoControlStyle } from "../components/ha-more-info-control-style";
 import "../components/water_heater/ha-more-info-water_heater-temperature";
 
@@ -68,8 +69,7 @@ class MoreInfoWaterHeater extends LitElement {
           .stateObj=${this.stateObj}
         ></ha-more-info-water_heater-temperature>
       </div>
-      <div class="secondary-controls">
-        <div class="secondary-controls-scroll">
+      <ha-more-info-control-select-container>
         ${supportOperationMode && stateObj.attributes.operation_list
           ? html`
               <ha-control-select-menu
@@ -84,10 +84,7 @@ class MoreInfoWaterHeater extends LitElement {
                 @selected=${this._handleOperationModeChanged}
                 @closed=${stopPropagation}
               >
-                  <ha-svg-icon
-                    slot="icon"
-                    .path=${mdiWaterBoiler}
-                  ></ha-svg-icon>
+                <ha-svg-icon slot="icon" .path=${mdiWaterBoiler}></ha-svg-icon>
                 ${stateObj.attributes.operation_list
                   .concat()
                   .sort(compareWaterHeaterOperationMode)
@@ -128,17 +125,13 @@ class MoreInfoWaterHeater extends LitElement {
                   ${this.hass.localize("state.default.on")}
                 </ha-list-item>
                 <ha-list-item value="off" graphic="icon">
-                    <ha-svg-icon
-                      slot="graphic"
-                      .path=${mdiAccount}
-                    ></ha-svg-icon>
+                  <ha-svg-icon slot="graphic" .path=${mdiAccount}></ha-svg-icon>
                   ${this.hass.localize("state.default.off")}
                 </ha-list-item>
               </ha-control-select-menu>
             `
           : nothing}
-        </div>
-      </div>
+      </ha-more-info-control-select-container>
     `;
   }