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,140 +164,135 @@ class MoreInfoClimate extends LitElement {
             `
           : nothing}
       </div>
-      <div class="secondary-controls">
-        <div class="secondary-controls-scroll">
-          <ha-control-select-menu
-            .label=${this.hass.formatEntityAttributeName(
-              this.stateObj,
-              "hvac_mode"
-            )}
-            .value=${stateObj.state}
-            .disabled=${this.stateObj.state === UNAVAILABLE}
-            fixedMenuPosition
-            naturalMenuWidth
-            @selected=${this._handleOperationModeChanged}
-            @closed=${stopPropagation}
-          >
-            <ha-svg-icon slot="icon" .path=${mdiThermostat}></ha-svg-icon>
-            ${stateObj.attributes.hvac_modes
-              .concat()
-              .sort(compareClimateHvacModes)
-              .map(
-                (mode) => html`
-                  <ha-list-item .value=${mode} graphic="icon">
-                    <ha-svg-icon
-                      slot="graphic"
-                      .path=${computeHvacModeIcon(mode)}
-                    ></ha-svg-icon>
-                    ${this.hass.formatEntityState(stateObj, mode)}
-                  </ha-list-item>
-                `
-              )}
-          </ha-control-select-menu>
-          ${supportPresetMode && stateObj.attributes.preset_modes
-            ? html`
-                <ha-control-select-menu
-                  .label=${this.hass.formatEntityAttributeName(
-                    stateObj,
-                    "preset_mode"
-                  )}
-                  .value=${stateObj.attributes.preset_mode}
-                  .disabled=${this.stateObj.state === UNAVAILABLE}
-                  fixedMenuPosition
-                  naturalMenuWidth
-                  @selected=${this._handlePresetmodeChanged}
-                  @closed=${stopPropagation}
-                >
+      <ha-more-info-control-select-container>
+        <ha-control-select-menu
+          .label=${this.hass.formatEntityAttributeName(
+            this.stateObj,
+            "hvac_mode"
+          )}
+          .value=${stateObj.state}
+          .disabled=${this.stateObj.state === UNAVAILABLE}
+          fixedMenuPosition
+          naturalMenuWidth
+          @selected=${this._handleOperationModeChanged}
+          @closed=${stopPropagation}
+        >
+          <ha-svg-icon slot="icon" .path=${mdiThermostat}></ha-svg-icon>
+          ${stateObj.attributes.hvac_modes
+            .concat()
+            .sort(compareClimateHvacModes)
+            .map(
+              (mode) => html`
+                <ha-list-item .value=${mode} graphic="icon">
                   <ha-svg-icon
-                    slot="icon"
-                    .path=${mdiTuneVariant}
+                    slot="graphic"
+                    .path=${computeHvacModeIcon(mode)}
                   ></ha-svg-icon>
-                  ${stateObj.attributes.preset_modes!.map(
-                    (mode) => html`
-                      <ha-list-item .value=${mode} graphic="icon">
-                        <ha-svg-icon
-                          slot="graphic"
-                          .path=${computePresetModeIcon(mode)}
-                        ></ha-svg-icon>
-                        ${this.hass.formatEntityAttributeValue(
-                          stateObj,
-                          "preset_mode",
-                          mode
-                        )}
-                      </ha-list-item>
-                    `
-                  )}
-                </ha-control-select-menu>
+                  ${this.hass.formatEntityState(stateObj, mode)}
+                </ha-list-item>
               `
-            : nothing}
-          ${supportFanMode && stateObj.attributes.fan_modes
-            ? html`
-                <ha-control-select-menu
-                  .label=${this.hass.formatEntityAttributeName(
-                    stateObj,
-                    "fan_mode"
-                  )}
-                  .value=${stateObj.attributes.fan_mode}
-                  .disabled=${this.stateObj.state === UNAVAILABLE}
-                  fixedMenuPosition
-                  naturalMenuWidth
-                  @selected=${this._handleFanModeChanged}
-                  @closed=${stopPropagation}
-                >
-                  <ha-svg-icon slot="icon" .path=${mdiFan}></ha-svg-icon>
-                  ${stateObj.attributes.fan_modes!.map(
-                    (mode) => html`
-                      <ha-list-item .value=${mode} graphic="icon">
-                        <ha-svg-icon
-                          slot="graphic"
-                          .path=${computeFanModeIcon(mode)}
-                        ></ha-svg-icon>
-                        ${this.hass.formatEntityAttributeValue(
-                          stateObj,
-                          "fan_mode",
-                          mode
-                        )}
-                      </ha-list-item>
-                    `
-                  )}
-                </ha-control-select-menu>
-              `
-            : nothing}
-          ${supportSwingMode && stateObj.attributes.swing_modes
-            ? html`
-                <ha-control-select-menu
-                  .label=${this.hass.formatEntityAttributeName(
-                    stateObj,
-                    "swing_mode"
-                  )}
-                  .value=${stateObj.attributes.swing_mode}
-                  .disabled=${this.stateObj.state === UNAVAILABLE}
-                  fixedMenuPosition
-                  naturalMenuWidth
-                  @selected=${this._handleSwingmodeChanged}
-                  @closed=${stopPropagation}
-                >
-                  <ha-svg-icon slot="icon" .path=${haOscillating}></ha-svg-icon>
-                  ${stateObj.attributes.swing_modes!.map(
-                    (mode) => html`
-                      <ha-list-item .value=${mode} graphic="icon">
-                        <ha-svg-icon
-                          slot="graphic"
-                          .path=${computeSwingModeIcon(mode)}
-                        ></ha-svg-icon>
-                        ${this.hass.formatEntityAttributeValue(
-                          stateObj,
-                          "swing_mode",
-                          mode
-                        )}
-                      </ha-list-item>
-                    `
-                  )}
-                </ha-control-select-menu>
-              `
-            : nothing}
-        </div>
-      </div>
+            )}
+        </ha-control-select-menu>
+        ${supportPresetMode && stateObj.attributes.preset_modes
+          ? html`
+              <ha-control-select-menu
+                .label=${this.hass.formatEntityAttributeName(
+                  stateObj,
+                  "preset_mode"
+                )}
+                .value=${stateObj.attributes.preset_mode}
+                .disabled=${this.stateObj.state === UNAVAILABLE}
+                fixedMenuPosition
+                naturalMenuWidth
+                @selected=${this._handlePresetmodeChanged}
+                @closed=${stopPropagation}
+              >
+                <ha-svg-icon slot="icon" .path=${mdiTuneVariant}></ha-svg-icon>
+                ${stateObj.attributes.preset_modes!.map(
+                  (mode) => html`
+                    <ha-list-item .value=${mode} graphic="icon">
+                      <ha-svg-icon
+                        slot="graphic"
+                        .path=${computePresetModeIcon(mode)}
+                      ></ha-svg-icon>
+                      ${this.hass.formatEntityAttributeValue(
+                        stateObj,
+                        "preset_mode",
+                        mode
+                      )}
+                    </ha-list-item>
+                  `
+                )}
+              </ha-control-select-menu>
+            `
+          : nothing}
+        ${supportFanMode && stateObj.attributes.fan_modes
+          ? html`
+              <ha-control-select-menu
+                .label=${this.hass.formatEntityAttributeName(
+                  stateObj,
+                  "fan_mode"
+                )}
+                .value=${stateObj.attributes.fan_mode}
+                .disabled=${this.stateObj.state === UNAVAILABLE}
+                fixedMenuPosition
+                naturalMenuWidth
+                @selected=${this._handleFanModeChanged}
+                @closed=${stopPropagation}
+              >
+                <ha-svg-icon slot="icon" .path=${mdiFan}></ha-svg-icon>
+                ${stateObj.attributes.fan_modes!.map(
+                  (mode) => html`
+                    <ha-list-item .value=${mode} graphic="icon">
+                      <ha-svg-icon
+                        slot="graphic"
+                        .path=${computeFanModeIcon(mode)}
+                      ></ha-svg-icon>
+                      ${this.hass.formatEntityAttributeValue(
+                        stateObj,
+                        "fan_mode",
+                        mode
+                      )}
+                    </ha-list-item>
+                  `
+                )}
+              </ha-control-select-menu>
+            `
+          : nothing}
+        ${supportSwingMode && stateObj.attributes.swing_modes
+          ? html`
+              <ha-control-select-menu
+                .label=${this.hass.formatEntityAttributeName(
+                  stateObj,
+                  "swing_mode"
+                )}
+                .value=${stateObj.attributes.swing_mode}
+                .disabled=${this.stateObj.state === UNAVAILABLE}
+                fixedMenuPosition
+                naturalMenuWidth
+                @selected=${this._handleSwingmodeChanged}
+                @closed=${stopPropagation}
+              >
+                <ha-svg-icon slot="icon" .path=${haOscillating}></ha-svg-icon>
+                ${stateObj.attributes.swing_modes!.map(
+                  (mode) => html`
+                    <ha-list-item .value=${mode} graphic="icon">
+                      <ha-svg-icon
+                        slot="graphic"
+                        .path=${computeSwingModeIcon(mode)}
+                      ></ha-svg-icon>
+                      ${this.hass.formatEntityAttributeValue(
+                        stateObj,
+                        "swing_mode",
+                        mode
+                      )}
+                    </ha-list-item>
+                  `
+                )}
+              </ha-control-select-menu>
+            `
+          : nothing}
+      </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,117 +192,112 @@ class MoreInfoFan extends LitElement {
             `
           : nothing}
       </div>
-      <div class="secondary-controls">
-        <div class="secondary-controls-scroll">
-          ${supportsPresetMode && this.stateObj.attributes.preset_modes
-            ? html`
-                <ha-control-select-menu
-                  .label=${this.hass.formatEntityAttributeName(
-                    this.stateObj,
-                    "preset_mode"
-                  )}
-                  .value=${this.stateObj.attributes.preset_mode}
-                  .disabled=${this.stateObj.state === UNAVAILABLE}
-                  fixedMenuPosition
-                  naturalMenuWidth
-                  @selected=${this._handlePresetMode}
-                  @closed=${stopPropagation}
-                >
+      <ha-more-info-control-select-container>
+        ${supportsPresetMode && this.stateObj.attributes.preset_modes
+          ? html`
+              <ha-control-select-menu
+                .label=${this.hass.formatEntityAttributeName(
+                  this.stateObj,
+                  "preset_mode"
+                )}
+                .value=${this.stateObj.attributes.preset_mode}
+                .disabled=${this.stateObj.state === UNAVAILABLE}
+                fixedMenuPosition
+                naturalMenuWidth
+                @selected=${this._handlePresetMode}
+                @closed=${stopPropagation}
+              >
+                <ha-svg-icon slot="icon" .path=${mdiTuneVariant}></ha-svg-icon>
+                ${this.stateObj.attributes.preset_modes?.map(
+                  (mode) => html`
+                    <ha-list-item .value=${mode}>
+                      ${this.hass.formatEntityAttributeValue(
+                        this.stateObj!,
+                        "preset_mode",
+                        mode
+                      )}
+                    </ha-list-item>
+                  `
+                )}
+              </ha-control-select-menu>
+            `
+          : nothing}
+        ${supportsDirection
+          ? html`
+              <ha-control-select-menu
+                .label=${this.hass.formatEntityAttributeName(
+                  this.stateObj,
+                  "direction"
+                )}
+                .value=${this.stateObj.attributes.direction}
+                .disabled=${this.stateObj.state === UNAVAILABLE}
+                fixedMenuPosition
+                naturalMenuWidth
+                @selected=${this._handleDirection}
+                @closed=${stopPropagation}
+              >
+                <ha-svg-icon slot="icon" .path=${mdiRotateLeft}></ha-svg-icon>
+                <ha-list-item value="forward" graphic="icon">
                   <ha-svg-icon
-                    slot="icon"
-                    .path=${mdiTuneVariant}
+                    slot="graphic"
+                    .path=${mdiRotateRight}
                   ></ha-svg-icon>
-                  ${this.stateObj.attributes.preset_modes?.map(
-                    (mode) => html`
-                      <ha-list-item .value=${mode}>
-                        ${this.hass.formatEntityAttributeValue(
-                          this.stateObj!,
-                          "preset_mode",
-                          mode
-                        )}
-                      </ha-list-item>
-                    `
-                  )}
-                </ha-control-select-menu>
-              `
-            : nothing}
-          ${supportsDirection
-            ? html`
-                <ha-control-select-menu
-                  .label=${this.hass.formatEntityAttributeName(
+                  ${this.hass.formatEntityAttributeValue(
                     this.stateObj,
-                    "direction"
+                    "direction",
+                    "forward"
                   )}
-                  .value=${this.stateObj.attributes.direction}
-                  .disabled=${this.stateObj.state === UNAVAILABLE}
-                  fixedMenuPosition
-                  naturalMenuWidth
-                  @selected=${this._handleDirection}
-                  @closed=${stopPropagation}
-                >
-                  <ha-svg-icon slot="icon" .path=${mdiRotateLeft}></ha-svg-icon>
-                  <ha-list-item value="forward" graphic="icon">
-                    <ha-svg-icon
-                      slot="graphic"
-                      .path=${mdiRotateRight}
-                    ></ha-svg-icon>
-                    ${this.hass.formatEntityAttributeValue(
-                      this.stateObj,
-                      "direction",
-                      "forward"
-                    )}
-                  </ha-list-item>
-                  <ha-list-item value="reverse" graphic="icon">
-                    <ha-svg-icon
-                      slot="graphic"
-                      .path=${mdiRotateLeft}
-                    ></ha-svg-icon>
-                    ${this.hass.formatEntityAttributeValue(
-                      this.stateObj,
-                      "direction",
-                      "reverse"
-                    )}
-                  </ha-list-item>
-                </ha-control-select-menu>
-              `
-            : nothing}
-          ${supportsOscillate
-            ? html`
-                <ha-control-select-menu
-                  .label=${this.hass.formatEntityAttributeName(
-                    this.stateObj,
-                    "oscillating"
-                  )}
-                  .value=${this.stateObj.attributes.oscillating ? "on" : "off"}
-                  .disabled=${this.stateObj.state === UNAVAILABLE}
-                  fixedMenuPosition
-                  naturalMenuWidth
-                  @selected=${this._handleOscillating}
-                  @closed=${stopPropagation}
-                >
+                </ha-list-item>
+                <ha-list-item value="reverse" graphic="icon">
                   <ha-svg-icon
-                    slot="icon"
+                    slot="graphic"
+                    .path=${mdiRotateLeft}
+                  ></ha-svg-icon>
+                  ${this.hass.formatEntityAttributeValue(
+                    this.stateObj,
+                    "direction",
+                    "reverse"
+                  )}
+                </ha-list-item>
+              </ha-control-select-menu>
+            `
+          : nothing}
+        ${supportsOscillate
+          ? html`
+              <ha-control-select-menu
+                .label=${this.hass.formatEntityAttributeName(
+                  this.stateObj,
+                  "oscillating"
+                )}
+                .value=${this.stateObj.attributes.oscillating ? "on" : "off"}
+                .disabled=${this.stateObj.state === UNAVAILABLE}
+                fixedMenuPosition
+                naturalMenuWidth
+                @selected=${this._handleOscillating}
+                @closed=${stopPropagation}
+              >
+                <ha-svg-icon
+                  slot="icon"
+                  .path=${haOscillatingOff}
+                ></ha-svg-icon>
+                <ha-list-item value="on" graphic="icon">
+                  <ha-svg-icon
+                    slot="graphic"
+                    .path=${haOscillating}
+                  ></ha-svg-icon>
+                  ${this.hass.localize("state.default.on")}
+                </ha-list-item>
+                <ha-list-item value="off" graphic="icon">
+                  <ha-svg-icon
+                    slot="graphic"
                     .path=${haOscillatingOff}
                   ></ha-svg-icon>
-                  <ha-list-item value="on" graphic="icon">
-                    <ha-svg-icon
-                      slot="graphic"
-                      .path=${haOscillating}
-                    ></ha-svg-icon>
-                    ${this.hass.localize("state.default.on")}
-                  </ha-list-item>
-                  <ha-list-item value="off" graphic="icon">
-                    <ha-svg-icon
-                      slot="graphic"
-                      .path=${haOscillatingOff}
-                    ></ha-svg-icon>
-                    ${this.hass.localize("state.default.off")}
-                  </ha-list-item>
-                </ha-control-select-menu>
-              `
-            : nothing}
-        </div>
-      </div>
+                  ${this.hass.localize("state.default.off")}
+                </ha-list-item>
+              </ha-control-select-menu>
+            `
+          : nothing}
+      </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,79 +92,74 @@ class MoreInfoHumidifier extends LitElement {
         ></ha-more-info-humidifier-humidity>
       </div>
 
-      <div class="secondary-controls">
-        <div class="secondary-controls-scroll">
-          <ha-control-select-menu
-            .label=${this.hass.localize("ui.card.humidifier.state")}
-            .value=${this.stateObj.state}
-            .disabled=${this.stateObj.state === UNAVAILABLE}
-            fixedMenuPosition
-            naturalMenuWidth
-            @selected=${this._handleStateChanged}
-            @closed=${stopPropagation}
-          >
-            <ha-svg-icon slot="icon" .path=${mdiPower}></ha-svg-icon>
-            <ha-list-item value="off">
-              ${computeStateDisplay(
-                this.hass.localize,
-                this.stateObj,
-                this.hass.locale,
-                this.hass.config,
-                this.hass.entities,
-                "off"
-              )}
-            </ha-list-item>
-            <ha-list-item value="on">
-              ${computeStateDisplay(
-                this.hass.localize,
-                this.stateObj,
-                this.hass.locale,
-                this.hass.config,
-                this.hass.entities,
-                "on"
-              )}
-            </ha-list-item>
-          </ha-control-select-menu>
+      <ha-more-info-control-select-container>
+        <ha-control-select-menu
+          .label=${this.hass.localize("ui.card.humidifier.state")}
+          .value=${this.stateObj.state}
+          .disabled=${this.stateObj.state === UNAVAILABLE}
+          fixedMenuPosition
+          naturalMenuWidth
+          @selected=${this._handleStateChanged}
+          @closed=${stopPropagation}
+        >
+          <ha-svg-icon slot="icon" .path=${mdiPower}></ha-svg-icon>
+          <ha-list-item value="off">
+            ${computeStateDisplay(
+              this.hass.localize,
+              this.stateObj,
+              this.hass.locale,
+              this.hass.config,
+              this.hass.entities,
+              "off"
+            )}
+          </ha-list-item>
+          <ha-list-item value="on">
+            ${computeStateDisplay(
+              this.hass.localize,
+              this.stateObj,
+              this.hass.locale,
+              this.hass.config,
+              this.hass.entities,
+              "on"
+            )}
+          </ha-list-item>
+        </ha-control-select-menu>
 
-          ${supportModes
-            ? html`
-                <ha-control-select-menu
-                  .label=${hass.localize("ui.card.humidifier.mode")}
-                  .value=${stateObj.attributes.mode}
-                  .disabled=${this.stateObj.state === UNAVAILABLE}
-                  fixedMenuPosition
-                  naturalMenuWidth
-                  @selected=${this._handleModeChanged}
-                  @closed=${stopPropagation}
-                >
-                  <ha-svg-icon
-                    slot="icon"
-                    .path=${mdiTuneVariant}
-                  ></ha-svg-icon>
-                  ${stateObj.attributes.available_modes!.map(
-                    (mode) => html`
-                      <ha-list-item .value=${mode} graphic="icon">
-                        <ha-svg-icon
-                          slot="graphic"
-                          .path=${computeHumidiferModeIcon(mode)}
-                        ></ha-svg-icon>
-                        ${computeAttributeValueDisplay(
-                          hass.localize,
-                          stateObj!,
-                          hass.locale,
-                          hass.config,
-                          hass.entities,
-                          "mode",
-                          mode
-                        )}
-                      </ha-list-item>
-                    `
-                  )}
-                </ha-control-select-menu>
-              `
-            : nothing}
-        </div>
-      </div>
+        ${supportModes
+          ? html`
+              <ha-control-select-menu
+                .label=${hass.localize("ui.card.humidifier.mode")}
+                .value=${stateObj.attributes.mode}
+                .disabled=${this.stateObj.state === UNAVAILABLE}
+                fixedMenuPosition
+                naturalMenuWidth
+                @selected=${this._handleModeChanged}
+                @closed=${stopPropagation}
+              >
+                <ha-svg-icon slot="icon" .path=${mdiTuneVariant}></ha-svg-icon>
+                ${stateObj.attributes.available_modes!.map(
+                  (mode) => html`
+                    <ha-list-item .value=${mode} graphic="icon">
+                      <ha-svg-icon
+                        slot="graphic"
+                        .path=${computeHumidiferModeIcon(mode)}
+                      ></ha-svg-icon>
+                      ${computeAttributeValueDisplay(
+                        hass.localize,
+                        stateObj!,
+                        hass.locale,
+                        hass.config,
+                        hass.entities,
+                        "mode",
+                        mode
+                      )}
+                    </ha-list-item>
+                  `
+                )}
+              </ha-control-select-menu>
+            `
+          : nothing}
+      </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,39 +287,37 @@ class MoreInfoLight extends LitElement {
           : nothing}
       </div>
       <div>
-        <div class="secondary-controls">
-          <div class="secondary-controls-scroll">
-            ${supportsEffects && this.stateObj.attributes.effect_list
-              ? html`
-                  <ha-control-select-menu
-                    .label=${this.hass.formatEntityAttributeName(
-                      this.stateObj,
-                      "effect"
-                    )}
-                    .value=${this.stateObj.attributes.effect}
-                    .disabled=${this.stateObj.state === UNAVAILABLE}
-                    fixedMenuPosition
-                    naturalMenuWidth
-                    @selected=${this._handleEffect}
-                    @closed=${stopPropagation}
-                  >
-                    <ha-svg-icon slot="icon" .path=${mdiCreation}></ha-svg-icon>
-                    ${this.stateObj.attributes.effect_list?.map(
-                      (mode) => html`
-                        <ha-list-item .value=${mode}>
-                          ${this.hass.formatEntityAttributeValue(
-                            this.stateObj!,
-                            "effect",
-                            mode
-                          )}
-                        </ha-list-item>
-                      `
-                    )}
-                  </ha-control-select-menu>
-                `
-              : nothing}
-          </div>
-        </div>
+        <ha-more-info-control-select-container>
+          ${supportsEffects && this.stateObj.attributes.effect_list
+            ? html`
+                <ha-control-select-menu
+                  .label=${this.hass.formatEntityAttributeName(
+                    this.stateObj,
+                    "effect"
+                  )}
+                  .value=${this.stateObj.attributes.effect}
+                  .disabled=${this.stateObj.state === UNAVAILABLE}
+                  fixedMenuPosition
+                  naturalMenuWidth
+                  @selected=${this._handleEffect}
+                  @closed=${stopPropagation}
+                >
+                  <ha-svg-icon slot="icon" .path=${mdiCreation}></ha-svg-icon>
+                  ${this.stateObj.attributes.effect_list?.map(
+                    (mode) => html`
+                      <ha-list-item .value=${mode}>
+                        ${this.hass.formatEntityAttributeValue(
+                          this.stateObj!,
+                          "effect",
+                          mode
+                        )}
+                      </ha-list-item>
+                    `
+                  )}
+                </ha-control-select-menu>
+              `
+            : nothing}
+        </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,77 +69,69 @@ class MoreInfoWaterHeater extends LitElement {
           .stateObj=${this.stateObj}
         ></ha-more-info-water_heater-temperature>
       </div>
-      <div class="secondary-controls">
-        <div class="secondary-controls-scroll">
-          ${supportOperationMode && stateObj.attributes.operation_list
-            ? html`
-                <ha-control-select-menu
-                  .label=${this.hass.formatEntityAttributeName(
-                    stateObj,
-                    "operation"
+      <ha-more-info-control-select-container>
+        ${supportOperationMode && stateObj.attributes.operation_list
+          ? html`
+              <ha-control-select-menu
+                .label=${this.hass.formatEntityAttributeName(
+                  stateObj,
+                  "operation"
+                )}
+                .value=${stateObj.state}
+                .disabled=${stateObj.state === UNAVAILABLE}
+                fixedMenuPosition
+                naturalMenuWidth
+                @selected=${this._handleOperationModeChanged}
+                @closed=${stopPropagation}
+              >
+                <ha-svg-icon slot="icon" .path=${mdiWaterBoiler}></ha-svg-icon>
+                ${stateObj.attributes.operation_list
+                  .concat()
+                  .sort(compareWaterHeaterOperationMode)
+                  .map(
+                    (mode) => html`
+                      <ha-list-item .value=${mode} graphic="icon">
+                        <ha-svg-icon
+                          slot="graphic"
+                          .path=${computeOperationModeIcon(mode)}
+                        ></ha-svg-icon>
+                        ${this.hass.formatEntityState(stateObj, mode)}
+                      </ha-list-item>
+                    `
                   )}
-                  .value=${stateObj.state}
-                  .disabled=${stateObj.state === UNAVAILABLE}
-                  fixedMenuPosition
-                  naturalMenuWidth
-                  @selected=${this._handleOperationModeChanged}
-                  @closed=${stopPropagation}
-                >
+              </ha-control-select-menu>
+            `
+          : nothing}
+        ${supportAwayMode
+          ? html`
+              <ha-control-select-menu
+                .label=${this.hass.formatEntityAttributeName(
+                  stateObj,
+                  "away_mode"
+                )}
+                .value=${stateObj.attributes.away_mode}
+                .disabled=${stateObj.state === UNAVAILABLE}
+                fixedMenuPosition
+                naturalMenuWidth
+                @selected=${this._handleAwayModeChanged}
+                @closed=${stopPropagation}
+              >
+                <ha-svg-icon slot="icon" .path=${mdiAccount}></ha-svg-icon>
+                <ha-list-item value="on" graphic="icon">
                   <ha-svg-icon
-                    slot="icon"
-                    .path=${mdiWaterBoiler}
+                    slot="graphic"
+                    .path=${mdiAccountArrowRight}
                   ></ha-svg-icon>
-                  ${stateObj.attributes.operation_list
-                    .concat()
-                    .sort(compareWaterHeaterOperationMode)
-                    .map(
-                      (mode) => html`
-                        <ha-list-item .value=${mode} graphic="icon">
-                          <ha-svg-icon
-                            slot="graphic"
-                            .path=${computeOperationModeIcon(mode)}
-                          ></ha-svg-icon>
-                          ${this.hass.formatEntityState(stateObj, mode)}
-                        </ha-list-item>
-                      `
-                    )}
-                </ha-control-select-menu>
-              `
-            : nothing}
-          ${supportAwayMode
-            ? html`
-                <ha-control-select-menu
-                  .label=${this.hass.formatEntityAttributeName(
-                    stateObj,
-                    "away_mode"
-                  )}
-                  .value=${stateObj.attributes.away_mode}
-                  .disabled=${stateObj.state === UNAVAILABLE}
-                  fixedMenuPosition
-                  naturalMenuWidth
-                  @selected=${this._handleAwayModeChanged}
-                  @closed=${stopPropagation}
-                >
-                  <ha-svg-icon slot="icon" .path=${mdiAccount}></ha-svg-icon>
-                  <ha-list-item value="on" graphic="icon">
-                    <ha-svg-icon
-                      slot="graphic"
-                      .path=${mdiAccountArrowRight}
-                    ></ha-svg-icon>
-                    ${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>
-                    ${this.hass.localize("state.default.off")}
-                  </ha-list-item>
-                </ha-control-select-menu>
-              `
-            : nothing}
-        </div>
-      </div>
+                  ${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>
+                  ${this.hass.localize("state.default.off")}
+                </ha-list-item>
+              </ha-control-select-menu>
+            `
+          : nothing}
+      </ha-more-info-control-select-container>
     `;
   }