Improve CustomSelectControl's usability around max height

[cbirdsong]

Gutenberg's CustomSelectControl (the reimplementation of the standard <select> control) has a maximum height due to an issue reported in #19751, but this ends up making it require scrolling when it shouldn't really be necessary:

CleanShot.2023-03-15.at.13.12.07.mp4

There are two complementary ways this could be addressed.

1) Adjust the max height based on media queries. Right now, it's just a flat 400px. Increasing it based on @media (min-height: whatever) is not a silver bullet, but it would help on large displays and/or portrait-oriented displays.¹

2) Make the design more compact. By default, CustomSelectControl only shows 7 or 8 items², which is far fewer than <select> while taking up far more vertical space:

The amount of padding and margin² can definitely be reduced while keeping the control usable³ and legible.

---

Values I used to create these screenshots in Storybook

SelectControl:

[
  {
    "value": "default",
    "label": "Default"
  },
  {
    "value": "0",
    "label": "0"
  },
  {
    "value": "1",
    "label": "1"
  },
  {
    "value": "2",
    "label": "2"
  },
  {
    "value": "3",
    "label": "3"
  },
  {
    "value": "4",
    "label": "4"
  },
  {
    "value": "5",
    "label": "5"
  },
  {
    "value": "6",
    "label": "6"
  },
  {
    "value": "7",
    "label": "7"
  },
  {
    "value": "8",
    "label": "8"
  },
  {
    "value": "9",
    "label": "9"
  }
]

CustomSelectControl:

[
  {
    "key": "default",
    "name": "Default"
  },
  {
    "key": "0",
    "name": "0"
  },
  {
    "key": "1",
    "name": "1"
  },
  {
    "key": "2",
    "name": "2"
  },
  {
    "key": "3",
    "name": "3"
  },
  {
    "key": "4",
    "name": "4"
  },
  {
    "key": "5",
    "name": "5"
  },
  {
    "key": "6",
    "name": "6"
  },
  {
    "key": "7",
    "name": "7"
  },
  {
    "key": "8",
    "name": "8"
  },
  {
    "key": "9",
    "name": "9"
  }
]

Footnotes

1. Setting the max height by calculating the amount of space available for the menu would be ideal, but that's getting a bit complex and anything like that would work best supported by simpler fallbacks like this. ↩

2. In the actual editor, margin-bottom: 6px; is applied to the custom select list items, and this isn't present in Storybook. ↩ ↩²

3. If touch screen usability is the reasoning behind the current values, then they could be moved into a @media (pointer: coarse). ↩

[ciampo]

Thank you for the report!

While we're not going to be able to drop the 400px max-height for the current version of the component, we're about to merge an improvement that allows the max-height to be less than 400px in case the popover meets the viewport edge.

As we're starting to gather feedback for a hypothetical new version of CustomSelectControl, I'd like us to consider allowing consumers of the component to set min-height and max-height for the select popover (either via react props, or CSS rules). cc @WordPress/gutenberg-components

[cbirdsong]

I hope you'll consider making the sizing/spacing dynamic using @media (pointer: coarse)/@media (pointer: fine). That could make it a lot more usable for mouse users while still preserving usability for touch.

[ciampo]

consider making the sizing/spacing dynamic using @media (pointer: coarse)/@media (pointer: fine)

That's a great point, and definitely something that we could/should take into account at a broader design level (cc @WordPress/gutenberg-design ).

Regarding CustomSelectControl specifically, I'm not sure how much of an impact that would make on the component, since its main purpose will be to allow custom option item designs provided by the consumers of the component.

If a consumer doesn't need a custom item design and/or wants a more compact select popover look, SelectControl is a good alternative.

[jasmussen]

Definitely on our minds, and good reminder. Nicer query too, than the previous trick used, which was @media (hover: none).