proposed Fix: issue with submenu vertical position when text wraps (#…

…3600) * feat(submenu): fix issue with submenu vertical position when text wraps * feat(submenu): add comment to explain reason behind the 12 pixel buffer * fix(navbar submenu): add changeset --------- Co-authored-by: Ddouglasz <[email protected]>
commercetools · Sep 6, 2024 · d50a0ae · d50a0ae
1 parent 27d7807
commit d50a0ae
Show file tree

Hide file tree

Showing 2 changed files with 16 additions and 1 deletion.
diff --git a/.changeset/calm-students-mix.md b/.changeset/calm-students-mix.md
@@ -0,0 +1,6 @@
+---
+'@commercetools-frontend/application-shell': patch
+---
+
+When the submenu has a text link that wraps to the next line, the vertical position of the submenu is adjusted, causing the submenu submenu position to be recalculated and as a result, hidden.
+This change fixes the issue by adding a 12-pixel buffer to the height calculation when determining if the submenu fits within the viewport below the menu item, this value accounts for the padding introduced on link hover.
diff --git a/packages/application-shell/src/components/navbar/navbar.tsx b/packages/application-shell/src/components/navbar/navbar.tsx
@@ -186,9 +186,18 @@ export const ApplicationMenu = (props: ApplicationMenuProps) => {
 
       const [entry] = entries;
 
+      /**
+       * Adding a 12 pixel buffer to the height calculation when determining if the submenu fits within the viewport below the menu item.
+       * This buffer accounts for the padding added during link hover, accommodating one additional line height.
+       * We need this to account for the additional card height when a hovered submenu text link wraps to the next line,
+       * as otherwise the submenu would extend beyond the viewport's bottom edge and flip above the menu item.
+       */
+      const SINGLE_LINE_HEIGHT_BUFFER = 12;
+
       const doesSubmenuFitWithinViewportBelowMenuItem =
         entry.boundingClientRect.height +
-          (props.isMenuOpen ? menuItemTop : menuItemBottom) >
+          (props.isMenuOpen ? menuItemTop : menuItemBottom) +
+          SINGLE_LINE_HEIGHT_BUFFER >
         window.innerHeight;
       // if the submenu does not fit at the bottom of the viewport (below the menu item)
       if (doesSubmenuFitWithinViewportBelowMenuItem) {