Here's solution for moving UI3 widget from the bottom to the top

If anyone else is annoyed with the new UI toolbar (toolbelt) being at the bottom of the screen instead of top - here’s CSS which puts it on top and shrinks it when not used:

1div[class^="positioned_design_toolbelt--root"] {
2    bottom: auto;
3    top: 12px;
4    transition: all 0.25s ease;
5    max-width: 300px;
6    margin: auto !important;
7}
8
9div[class^="positioned_design_toolbelt--root"]:not(.positioned_design_toolbelt--root--INYO4:hover, :has([style*="display: contents"])) {
10    bottom: auto;
11    max-width: 46px;
12    overflow: hidden;
13    border-radius: 8px;  
14    opacity: 0.2;  
15}
16
17div[class^="positioned_design_toolbelt--root"]:not(div[class^="positioned_design_toolbelt--root"]:hover, :has([style*="display: contents"])) button {
18    opacity: 0;
19    transition: all 0.2s ease;
20}
21
22div[class^="positioned_design_toolbelt--root"] [data-keyboard-receiver]>*,
23div[class^="positioned_design_toolbelt--root"] [data-keyboard-receiver]>*>* {
24  top: 50px;
25  height: fit-content;
26}

You can put this CSS with any browser extension used for styling.

Here’s the preview when it’s shrined:

And on hover or when menu is open it stays open: