Skip to content

feat: Let hosts dock the action menu to the top - #995

Merged
wass08 merged 12 commits into
pascalorg:mainfrom
ivnnv:action-menu-placement
Oct 14, 2026
Merged

wass08 merged 12 commits into
pascalorg:mainfrom
ivnnv:action-menu-placement

Conversation

@ivnnv

@ivnnv ivnnv commented Oct 4, 2026 •

Copy link
Copy Markdown
Contributor

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 actionMenuPlacement prop to Editor ('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.

  1. Default, nothing changes: menu at the bottom

default

  1. actionMenuPlacement="top": own row under the toolbar, bottom strip free

top

  1. Split: centered across both scene panes

split

  1. Narrow viewer (1024px): still clear of the toolbar groups

narrow

ivnnv added 5 commits October 3, 2026 23:43
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).
@pascal

pascal Bot commented Oct 4, 2026

Copy link
Copy Markdown
Contributor

What this does

Adds an opt-in actionMenuPlacement prop to Editor so a host can dock the action menu into the viewer's top toolbar row instead of floating it at the bottom. Default stays 'bottom', so existing hosts see no change. With 'top' on desktop and layout v2, the menu renders in a new center slot of the toolbar row, and the bottom strip of the viewer goes back to the canvas. The layout now measures the three toolbar groups: when they don't fit on one line the center group drops to its own centered row, and the row's bottom edge is published as a --viewer-toolbar-bottom CSS variable so the level selector and the camera controls hint sit below the toolbar wherever it actually ends. Tooltips and popovers inside the menu flip to open downwards when it is docked at the top. Mobile keeps the bottom rail, and v1 just floats the menu at the top edge.

File Change What it does
packages/editor/src/components/editor/editor-layout-v2.tsx modified RightColumn gains a toolbarCenter slot, a ResizeObserver that moves the center group to its own row when the three groups don't fit, and publishes --viewer-toolbar-bottom
packages/editor/src/components/editor/index.tsx modified New actionMenuPlacement prop; on desktop v2 it renders <ActionMenu inline placement="top" /> in the toolbar center slot instead of the overlay, and passes the hint offset down to ViewerCanvas
packages/editor/src/components/ui/action-menu/index.tsx modified inline and placement props, wraps the menu in the placement provider, forces 'bottom' on mobile
packages/editor/src/components/ui/action-menu/placement.ts added ActionMenuPlacement type, its context, and useActionMenuPopupSide
packages/editor/src/components/ui/action-menu/action-button.tsx modified Tooltip side falls back to the placement-aware side instead of a fixed one
packages/editor/src/components/ui/action-menu/measurement-control.tsx modified Popover opens away from the docked edge
packages/editor/src/components/ui/action-menu/view-toggles.tsx modified Same popover side handling for the toggles' popovers
packages/editor/src/components/ui/floating-level-selector.tsx modified Top offset reads --viewer-toolbar-bottom with the old value as fallback
packages/editor/src/index.tsx modified Exports the ActionMenuPlacement type

Best place to start: the RightColumn effect in editor-layout-v2.tsx, since the wrap decision and the CSS variable drive everything the overlays do, then the wiring in components/editor/index.tsx.

@ivnnv ivnnv changed the title Let hosts dock the action menu to the top feat: Let hosts dock the action menu to the top Oct 4, 2026

@cursor cursor Bot left a comment •

Copy link
Copy Markdown

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Stale Bugbot comment from a previous run.

Comment thread packages/editor/src/components/editor/editor-layout-v2.tsx Outdated
Comment thread packages/editor/src/components/editor/editor-layout-v2.tsx Outdated
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.

@cursor cursor Bot left a comment •

Copy link
Copy Markdown

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Stale Bugbot comment from a previous run.

Comment thread packages/editor/src/components/editor/editor-layout-v2.tsx Outdated
Comment thread packages/editor/src/components/editor/editor-layout-v2.tsx Outdated

@cursor cursor Bot left a comment •

Copy link
Copy Markdown

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Stale Bugbot comment from a previous run.

Comment thread packages/editor/src/components/ui/right-stack.tsx Outdated
Comment thread packages/editor/src/components/editor/editor-layout-v2.tsx Outdated
…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

@cursor cursor Bot left a comment •

Copy link
Copy Markdown

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Stale Bugbot comment from a previous run.

Comment thread packages/editor/src/components/editor/index.tsx
@ivnnv

ivnnv commented Oct 14, 2026

Copy link
Copy Markdown
Contributor Author

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 actionMenuPlacement="top" the menu docks top center of the scene region and follows the panes like the level selector does. its opt-in, existing hosts dont change at all.

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 :)

ivnnv added 2 commits October 14, 2026 13:31
# 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.

@cursor cursor Bot left a comment

Copy link
Copy Markdown

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Cursor Bugbot has reviewed your changes using high effort and found 2 potential issues.

Fix All in Cursor

❌ 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.

Comment thread packages/editor/src/components/editor/index.tsx
Comment thread packages/editor/src/components/editor/index.tsx
…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).
@wass08

wass08 commented Oct 14, 2026

Copy link
Copy Markdown
Collaborator

@ivnnv thank you, could you provide screenshots or a video recording of what it does?

@ivnnv

ivnnv commented Oct 14, 2026

Copy link
Copy Markdown
Contributor Author

@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
default

actionMenuPlacement="top": own row under the toolbar, bottom strip free
top

split: centered across both scene panes
split

narrow viewer (1024px): still clear of the toolbar groups
narrow

@wass08
wass08 merged commit 7559556 into pascalorg:main Oct 14, 2026
4 checks passed
@wass08

wass08 commented Oct 14, 2026

Copy link
Copy Markdown
Collaborator

@ivnnv thanks, no problem having this if it can be useful for your integrations.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

None yet

Projects

None yet

Development

Successfully merging this pull request may close these issues.

2 participants