Move the TAC to above the button

[dbkr]

This isn't what the designs say, but there is a (bug/feature)* in radix where it will turn a mouseup event within the menu into a click so that it activates the menu option that's under your cursor when you lift the button, even if you pressed the button down on a different item. Unfortunately it forgot to check that the mouse down happened in the menu, so if the menu appears under the cursor, the cursor, it will immediately select whatever option appeared under the cursor.

I think the simplest solution here is to just move the menu above the TAC button. This also makes it consistent† with quick settings.

Fixes element-hq/element-web#27335

*delete as applicable
†Not actually consistent because it fades in a different way

Checklist

• Tests written for new code (and old code if feasible).
• New or updated public/exported symbols have accurate TSDoc documentation.
• Linter and other CI checks pass.
• Sign-off given on the changes (see CONTRIBUTING.md).

[robintown]

For the record the mouseup behavior is a feature: in many OS-native menus, you can select an item by dragging from the menu trigger to the item and then releasing your mouse. So Radix menus implement this behavior to make them feel more native, but this does mean that the trigger and menu should never overlap.

It looks like the size of the parent <button> is off, as it doesn't actually form a bounding box around both the icon and the label, and I bet fixing that would also be an option. But this solution seems fine to me as well 👍

[dbkr]

Yeah, the bounding box is wrong due to a hack of having an IndicatorIcon (to get the coloured dot) but then wanting the whole thing to be the button. I had a quick look at fixing this but it was quite involved and also would have meant the popup appearing all the way to the right which would have been inconsistent with quick settings.