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:
div[class^="positioned_design_toolbelt--root"] {
bottom: auto;
top: 12px;
transition: all 0.25s ease;
max-width: 300px;
margin: auto !important;
}
div[class^="positioned_design_toolbelt--root"]:not(.positioned_design_toolbelt--root--INYO4:hover, :has([style*="display: contents"])) {
bottom: auto;
max-width: 46px;
overflow: hidden;
border-radius: 8px;
opacity: 0.2;
}
div[class^="positioned_design_toolbelt--root"]:not(div[class^="positioned_design_toolbelt--root"]:hover, :has([style*="display: contents"])) button {
opacity: 0;
transition: all 0.2s ease;
}
div[class^="positioned_design_toolbelt--root"] [data-keyboard-receiver]>*,
div[class^="positioned_design_toolbelt--root"] [data-keyboard-receiver]>*>* {
top: 50px;
height: fit-content;
}
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:
