Skip to content

Fix draw tool menu layering over mode hints - #1010

Open
zzzhangy wants to merge 1 commit into
mapbox:mainfrom
zzzhangy:fix/mode-hint-layering
Open

Fix draw tool menu layering over mode hints#1010
zzzhangy wants to merge 1 commit into
mapbox:mainfrom
zzzhangy:fix/mode-hint-layering

Conversation

@zzzhangy

Copy link
Copy Markdown

Summary

  • Keep dropdown and context menu panels on the floating content z-index layer.
  • Move map mode hints to a lower layer so draw tool menus render above them.

Closes #1000

Validation

  • npx prettier --check "app/components/elements.tsx" "app/components/mode_hints.tsx"
  • npx eslint "app/components/elements.tsx" "app/components/mode_hints.tsx"
  • git diff --check
  • npm run build
  • npm test
  • Browser check: Rectangle mode + Circle type dropdown; dropdown computed z-index: 50, mode hint computed z-index: 10, and the overlap point resolves to the Mercator menu item.

@zzzhangy
zzzhangy requested a review from a team as a code owner June 12, 2026 07:37
export const DDContent = classed(DD.Content)(contentLike);
export const CMContent = classed(CM.Content)(contentLike);
export const CMSubContent = classed(CM.SubContent)(contentLike);
const floatingContentLike = `${contentLike} z-50`;

Copy link
Copy Markdown
Contributor

Choose a reason for hiding this comment

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

Can you add a comment here explaining why these three elements need a different z-index?

className={clsx(
'z-0 absolute top-2 left-2 px-2 text-sm flex gap-x-2 items-center dark:text-white',
contentLike
'absolute top-2 left-2 px-2 text-sm flex gap-x-2 items-center dark:text-white',

Copy link
Copy Markdown
Contributor

Choose a reason for hiding this comment

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

Can we just replace z-0 with z-10 in the same string on line 26?

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.

Z-Order on overlapping UI

2 participants