Trouble with dropdown menu sizing

[lolo]

I'm struggling with getting the grid that appears when opening a dropdown menu to be visible when containing multiple elements — specifically with dropdowns at the left of the screen. See example below:

Here's the layout with many different dropdown menus:

Here's when opening the dropdown menu for "PERC 3" — it looks great:

But when I try to open the dropdown menu for "MISC", it looks horrible and is unreadable:

I have the grid size set to [500rem, 500rem], and have the CSS from @Udo (Text size scaling with percentage - #4 by Udo) in the CSS property to make the text resize with window size. I've got the vw ratio set to .4vw.

Any ideas how I could make it so that the grid box is reasonably sized to fit everything? Is there a better option than a drop-down grid? I think my ideal would be that all grids from all the dropdowns would open the same — in the middle of the screen, with plenty of room, spacing, and padding for all text to be read, and to be fully visible on the screen. But I can't seem to figure out how to set the ultimate size that it will actually open at, and where it will open as such.

(note that I removed the dropdown icon as i couldn't figure out how to get it to ignore the CSS about sizing and it was too large and clipping the text)

Thanks in advance!

[lolo]

@jean-emmanuel could this be considered a bug since it seems the menu doesn't know to be bound by the edges of the screen? (in view below, it's expanding above the edge of the screen)

[lolo]

I've found a temporary solution to this by making the grid layout "Vertical" and the menuAlignV "Top" for dropdowns on the top row and "Bottom" for dropdowns on the bottom row. I've also changed the size to be [100, 500] and that seems to fit everything: