Shortcut lists are not hidden which cause the icons to be displayed vertifcally

[maisun]

Hi:

Would like to report a strange UI issue that all icons in the configuration list are displayed vertically instead of horizantally, I'm not sure if it has anything to do with some HA updates, but it used to work fine. I think the root cause is that all lists with options to choose are now displayed by default. Previously they are all hidden and only when I click on the icon. Please find the image below for illustration:

[maisun]

Seems there has been some changes to ha-button-menu in the new HA version so it affect how the dropdown is displayed:

`
} else if (itemtype === 'dropdown') {
const sources = carddata.dropdownitems != null ? carddata.dropdownitems : this.currentlimits;
const selected = sources.indexOf(Number(carddata.useval));

    return html`
      <div class="collapsible-item">
      <ha-button-menu @click="${(e) => e.stopPropagation()}">
        <div slot="trigger">
            <div class="tooltip">
              <ha-icon icon="${carddata.icon}"></ha-icon>
              <br />${carddata.useval} ${carddata.unit_show ? carddata.unit : ''}
              <span class="tooltiptext">${this.loc(carddata.text, "common", this.brand)} ${carddata.unit_showontext ? "(" +carddata.unit +")" : ''}</span>
            </div>
        </div>
          <mwc-list>
          ${sources.map(
            (item, index) =>
              html`<mwc-list-item
                ?activated=${selected === index}
                value=${item}
                @click=${(event) => this.createServiceData(carddata.service, true, carddata.service_data, event)}
              >
                ${item}
              </mwc-list-item>`
          )}
          </mwc-list>
        </ha-button-menu>
      </div>
    `;
} else {
  return html``;
}

}
`

I'm no expert in TS can anybody help?