Merge 6555591 into c090174

primer · Mar 19, 2024 · 4c4834d · 4c4834d
2 parents c090174 + 6555591
commit 4c4834d
Show file tree

Hide file tree

Showing 3 changed files with 12 additions and 6 deletions.
diff --git a/.changeset/quick-icons-agree.md b/.changeset/quick-icons-agree.md
@@ -0,0 +1,5 @@
+---
+"@primer/react": patch
+---
+
+UnderlineNav: Fix position of overflow menu for small screens
diff --git a/packages/react/src/UnderlineNav/UnderlineNav.tsx b/packages/react/src/UnderlineNav/UnderlineNav.tsx
@@ -4,6 +4,7 @@ import Box from '../Box'
 import type {BetterSystemStyleObject, SxProp} from '../sx'
 import sx, {merge} from '../sx'
 import {UnderlineNavContext} from './UnderlineNavContext'
+import {useAnchoredPosition, useOnEscapePress, useOnOutsideClick, useId} from '../hooks'
 import type {ResizeObserverEntry} from '../hooks/useResizeObserver'
 import {useResizeObserver} from '../hooks/useResizeObserver'
 import {useTheme} from '../ThemeProvider'
@@ -13,9 +14,6 @@ import {moreBtnStyles, getDividerStyle, getNavStyles, ulStyles, menuStyles, menu
 import styled from 'styled-components'
 import {Button} from '../Button'
 import {TriangleDownIcon} from '@primer/octicons-react'
-import {useOnEscapePress} from '../hooks/useOnEscapePress'
-import {useOnOutsideClick} from '../hooks/useOnOutsideClick'
-import {useId} from '../hooks/useId'
 import {ActionList} from '../ActionList'
 import {defaultSxProp} from '../utils/defaultSxProp'
 import CounterLabel from '../CounterLabel'
@@ -295,6 +293,11 @@ export const UnderlineNav = forwardRef(
         )
     }, navRef as RefObject<HTMLElement>)
 
+    const {position: overflowMenuPosition} = useAnchoredPosition(
+      {anchorElementRef: moreMenuBtnRef, floatingElementRef: containerRef, align: 'end'},
+      [menuItems.length > 0, isWidgetOpen],
+    )
+
     return (
       <UnderlineNavContext.Provider
         value={{
@@ -342,7 +345,7 @@ export const UnderlineNav = forwardRef(
                   ref={containerRef}
                   id={disclosureWidgetId}
                   sx={menuStyles}
-                  style={{display: isWidgetOpen ? 'block' : 'none'}}
+                  style={{display: isWidgetOpen ? 'block' : 'none', ...overflowMenuPosition}}
                 >
                   {menuItems.map((menuItem, index) => {
                     const {

diff --git a/packages/react/src/UnderlineNav/styles.ts b/packages/react/src/UnderlineNav/styles.ts
@@ -139,8 +139,6 @@ export const menuItemStyles = {
 export const menuStyles = {
   position: 'absolute',
   zIndex: 1,
-  top: '90%',
-  right: '0',
   boxShadow: '0 1px 3px rgba(0, 0, 0, 0.12), 0 1px 2px rgba(0, 0, 0, 0.24)',
   borderRadius: '12px',
   backgroundColor: 'canvas.overlay',