Support Vertical Breakpoints

[CoenWarmer]

Is your feature request related to a problem? Please describe. In some situations vertical screen space is limited. In those situations it would be nice to be able to adjust the dimensions of elements based on how high the viewport is.

Describe the solution you'd like It would be great if there would be similar hooks such as useCurrentEuiBreakpoint, useIsWithinBreakpoints, useIsWithinMaxBreakpoint, etc for vertical viewport sizes. I.e. useCurrentEuiVerticalBreakpoint

Describe alternatives you've considered Rolling my own media query inside emotion css. Using intersection observer.

Desired timeline No rush.

Additional context

https://github.com/elastic/eui/assets/535564/fa477646-99b2-4577-b581-0bd06cabaa9a

https://elastic.slack.com/archives/C7QC1JV6F/p1702373092632269

[cee-chen]

Hey Coen! After some team discussion, we're going to hold off on implementing this in EUI, as it feels like a bit of an edge case and isn't necessarily something we want all our users to reach for as a default. In general, we'd prefer consumers use our responsive flex components as a default, or if necessary roll their own @media (max-height) queries.

We're going to go ahead leave this issue open to see if any other teams or open source users +1 this or have additional use cases that would warrant this feature. We may also possibly convert this to a GitHub discussion as well for a longer-running tail.

[github-actions[bot]]

👋 Hi there - this issue hasn't had any activity in 6 months. If the EUI team has not explicitly expressed that this is something on our roadmap, it's unlikely that we'll pick this issue up. We would sincerely appreciate a PR/community contribution if this is something that matters to you! If not, and there is no further activity on this issue for another 6 months (i.e. it's stale for over a year), the issue will be auto-closed.