search

Azure / cosmos-explorer

UI for Azure Cosmos DB. Powers the Azure Portal, https://cosmos.azure.com/, and the Cosmos DB Emulator
https://cosmos.azure.com
MIT License
105 stars 46 forks source link

fix rendering of global commands menu #1953

Closed analogrelay closed 4 weeks ago

analogrelay commented 1 month ago

Preview this branch

I was opening the split button "Global Commands" menu and I noticed something:

image

Hey menu, what are you doing way up there?

Well, it turns out that when you put two DOM elements under a <MenuTrigger>, it gets a little confused and does all the positioning based on the last element. In our case, the last element is only visible on small screens (we swap between the first and last element based on container width using CSS container queries). As a result, that messes with things when the first element (the SplitButton) is the one that's visible.

This PR wraps those elements in a new div. Unfortunately, that's not entirely enough, we also need the Menu to know to anchor the menu off that div. We do that using a React state value.

With this change, the menu is back where it belongs:

image

And still works fine in small screens:

image

analogrelay commented 1 month ago

Playwright test failures are all in the resource token tests.