Tweak new user menu design (#33444)

* Tweak new user menu design

* Update screenshots

* More screenshots

* Add story with no avatar

* add story to test

* Expand the menu so it actually shows what it's supposed to show

* Use the open parameter

which is the param to open the menu

* snapshot

* Add test for normal open menu version

* Move menu to the right of the avatar

and make it appear on top of the display name

* Fix user menu layout

* screenshots

* snapshot

* screenshots

* more screenshots

* Shift toasts to the left slightly

So they completely cover the display name of the user menu when
it's expanded. Also down slightly so they're level with the user menu.

* Tweak toast border radius & position

to match & sit on top of the user menu

* Close toasts in cider tests

* Only close the toast if it's actually there

* Fix some toasts to be dismissed & update screenshots

more to come though

* Make closeKeyStorageToast actually optional

* Fix some more toasts & races

* Screenshots again again (again)

* More screenshots

* Convert to rejectToast

* Fix toast rejectors to not wait and update screenshots

* Apparently 1ms is not long enough

apps/web/res/css/structures/_ToastContainer.pcss

@@ -9,10 +9,9 @@ Please see LICENSE files in the repository root for full details.
 
 .mx_ToastContainer {
     position: absolute;
-    top: 0;
-    left: 70px;
+    top: 12px;
+    left: 62px;
     z-index: 101;
-    padding: 4px;
     display: grid;
     grid-template-rows: 1fr 28px 8px;
 
@@ -33,7 +32,7 @@ Please see LICENSE files in the repository root for full details.
         color: $primary-content;
         box-shadow: 0px 4px 24px rgb(0, 0, 0, 0.1);
         border: var(--cpd-border-width-1) solid var(--cpd-color-border-interactive-secondary);
-        border-radius: calc(var(--cpd-space-6x) - var(--cpd-border-width-1));
+        border-radius: var(--cpd-space-3x);
         overflow: hidden;
         display: grid;
         grid-template-columns: 20px 1fr auto;