Repository navigation
feat: Let hosts dock the action menu to the top - #995
Conversation
Add an actionMenuPlacement editor prop ('bottom' | 'top', default 'bottom').
Tooltips and popovers inside the menu open away from the docked edge.
Mobile keeps the bottom rail.
A floating top menu is centered on the whole viewer, so it overlaps the host's toolbar groups and covers the camera controls hint. In layout v2 the menu now sits in a new center slot of the toolbar row, between the side groups and level with them; the camera hint moves below it. Layout v1 keeps a floating menu at the top edge.
The side groups are normally the same height, so nothing moves by default; a host that stacks a group vertically on narrow windows no longer pushes the other group down.
When the side groups and the docked menu don't fit in one row, the menu moves to its own centered row below the side groups instead of pushing the right group out of view. The layout publishes where the toolbar ends, and the level selector and camera hint sit below that, so nothing they cover changes with the row height. With the default bottom menu nothing moves. The camera hint also only makes room for a top menu that is really docked (not on mobile).
|
What this does Adds an opt-in
Best place to start: the |
When the menu does not fit inline it goes under the left group if the right group is tall enough to leave room there, else on its own full-width row. Only the menu takes clicks on that row, so the empty space beside it still reaches the canvas. Each side of the toolbar publishes its own bottom edge and the inspector column sits below the right side instead of a fixed top-20.
…top menu The camera hint now sits below the full toolbar height, so a taller right group or a missing left group can't put it inside the toolbar row. With the menu docked at the top, the inspector column no longer keeps the bottom clearance meant for a bottom menu.
# Conflicts: # packages/editor/src/components/editor/editor-layout-v2.tsx # packages/editor/src/components/editor/index.tsx # packages/editor/src/components/ui/floating-level-selector.tsx
|
hey @wass08 @Aymericr, pinging on this one. its been open 10 days with only bots looking at it, and in the meantime the views/split layout landed and moved the whole stage under it, so I had to rebuild it from scratch 😅 current version: with could one of you take a look, or just tell me its not something you want upstream? both answers are fine, I just need to know if I keep carrying it in my fork. and if you do want it, a quick note before the next big layout change would save me another rewrite :) |
# Conflicts: # packages/editor/src/components/ui/action-menu/action-button.tsx # packages/editor/src/components/ui/action-menu/index.tsx
Centred in the toolbar row it covered the host's right toolbar on common widths. It now sits in a row below it, and the inspector and camera hint start under the menu. Drops the toolbar CSS variables nothing wrote, and the wrapper transform that would have anchored the menu's fixed pill to it.
There was a problem hiding this comment.
Cursor Bugbot has reviewed your changes using high effort and found 2 potential issues.
❌ Bugbot Autofix is OFF. To automatically fix reported issues with cloud agents, enable autofix in the Cursor dashboard.
Reviewed by Cursor Bugbot for commit ed648f4. Configure here.
…nu is hidden The level selector's list opens down over the menu row, so the row sits below it. The inspector and camera hint only step down while the menu is actually shown (not in studio, capture, version preview or read-only).
|
@ivnnv thank you, could you provide screenshots or a video recording of what it does? |
|
@wass08 sure! sorry after the second edition the initial screenshots got wiped, here are the new ones (also modified in the pr body) default, nothing changes: menu at the bottom
|
|
@ivnnv thanks, no problem having this if it can be useful for your integrations. |





Right now the viewer loses two strips of space, the toolbar row at the top and the action menu at the bottom, and hosts cant change that since the menu position is hardcoded in the editor.
This adds an opt-in
actionMenuPlacementprop toEditor('bottom'by default so nothing changes for anyone, or'top'). With'top'on the v2 layout the menu gets its own row right under the toolbar row, centered on the scene panes and following them in split like the level selector does, and the inspector and camera hint start under it so nothing gets covered (tooltips and popovers inside it open downwards). On v1 it floats at the top edge, and mobile keeps the bottom rail as it is.actionMenuPlacement="top": own row under the toolbar, bottom strip free