When a menu appears in a height-limited container (or a container that is horizontally scrollable, even if it's not normally vertically scrollable), it can get taller than the menu even if the number of options is relatively small (10 in this case), and that causes the container to become scrollable if the menu is near the bottom of the container. The same thing will happen once we have dialogs, when dropdowns or other menus appear near the bottom of the dialog content.

Example: (the table has overflow-x: auto in this case)

Instead, we should allow the menu to extend past the edge of the container, like this:

On a technical level, this would require the developer using the Menu to create an "overlay" (empty div at/near the bottom of the page; or can we perhaps use position: fixed and have the overlay be much closer to the Menu?), then pass that overlay to the Menu so that it can teleport itself into that div and be absolutely positioned in the right place, which requires measuring the position of the parent component's anchor element (the input in Lookup, or the "handle" in Select). We should consider how much of this can be handled by Menu itself, and how much of it needs to be handled by the parent components (at minimum, the parents would have to pass through the reference to the overlay, and pass in a reference to the anchor element).

When we implement the Dialog component, we can make each Dialog create its own overlay, and then provide() that overlay to its children, so that Menu automatically picks it up (inject()s) it and uses it. This would make putting a Select in a Dialog work automatically, without needing an overlay to be specified manually. In addition (or instead), we could consider creating an OverlayWrapper component that wraps its children and provides them with an overlay, if the position: fixed approach hinted at above is feasible.