jess
/
Graphite
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

Fix menu bar sub-menus being incorrectly positioned (#4073)

This commit is contained in:
Keavon Chambers 2026-04-28 18:51:45 -07:00 committed by GitHub
parent d44b0cd308
commit b6ac217b70
1 changed files with 10 additions and 8 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

18
frontend/src/components/layout/FloatingMenu.svelte
View File

@ -211,14 +211,16 @@
// These are set imperatively, not through reactive Svelte style bindings, because that would cause `afterUpdate()` to call this function recursively forever.
// CSS custom properties on the container are used instead of direct `.style` on the content because Svelte's `set_style` can replace the content's entire
// inline style when its managed `style` attribute updates, which would wipe out any manually-set properties like `top` and `left`.
floatingMenuContainer.style.removeProperty("--content-top");
floatingMenuContainer.style.removeProperty("--content-bottom");
floatingMenuContainer.style.removeProperty("--content-left");
floatingMenuContainer.style.removeProperty("--content-right");
floatingMenuContainer.style.removeProperty("--content-border-top-left-radius");
floatingMenuContainer.style.removeProperty("--content-border-top-right-radius");
floatingMenuContainer.style.removeProperty("--content-border-bottom-left-radius");
floatingMenuContainer.style.removeProperty("--content-border-bottom-right-radius");
// We set each property to `initial` rather than removing it, because CSS custom properties inherit, so a submenu nested inside a parent floating menu would
// otherwise pick up the parent's positioning values. Setting to `initial` makes `var()` fall back to its default on this element regardless of inheritance.
floatingMenuContainer.style.setProperty("--content-top", "initial");
floatingMenuContainer.style.setProperty("--content-bottom", "initial");
floatingMenuContainer.style.setProperty("--content-left", "initial");
floatingMenuContainer.style.setProperty("--content-right", "initial");
floatingMenuContainer.style.setProperty("--content-border-top-left-radius", "initial");
floatingMenuContainer.style.setProperty("--content-border-top-right-radius", "initial");
floatingMenuContainer.style.setProperty("--content-border-bottom-left-radius", "initial");
floatingMenuContainer.style.setProperty("--content-border-bottom-right-radius", "initial");
const inParentFloatingMenu = Boolean(floatingMenuContainer.closest("[data-floating-menu-content]"));
const noPosition = Boolean(floatingMenuContainer.closest("[data-floating-menu-no-position]"));