From 82465913c0d3ec3eacf1cef56b127a8bb9f206b9 Mon Sep 17 00:00:00 2001
From: Siddharth Kshetrapal <siddharthkp@github.com>
Date: Tue, 19 Mar 2024 16:49:18 +0100
Subject: [PATCH 1/2] use anchored position to position overflow menu

---
 packages/react/src/UnderlineNav/UnderlineNav.tsx | 11 +++++++----
 packages/react/src/UnderlineNav/styles.ts        |  2 --
 2 files changed, 7 insertions(+), 6 deletions(-)

diff --git a/packages/react/src/UnderlineNav/UnderlineNav.tsx b/packages/react/src/UnderlineNav/UnderlineNav.tsx
index d43ee03cb38..bc53ce571d1 100644
--- 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
index e19266edcb3..ad654cba9b5 100644
--- 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',

From 6555591662c02ff65b86d8fc75915a1a05d37d3d Mon Sep 17 00:00:00 2001
From: Siddharth Kshetrapal <siddharthkp@github.com>
Date: Tue, 19 Mar 2024 17:08:18 +0100
Subject: [PATCH 2/2] Create quick-icons-agree.md

---
 .changeset/quick-icons-agree.md | 5 +++++
 1 file changed, 5 insertions(+)
 create mode 100644 .changeset/quick-icons-agree.md

diff --git a/.changeset/quick-icons-agree.md b/.changeset/quick-icons-agree.md
new file mode 100644
index 00000000000..2c210b2addc
--- /dev/null
+++ b/.changeset/quick-icons-agree.md
@@ -0,0 +1,5 @@
+---
+"@primer/react": patch
+---
+
+UnderlineNav: Fix position of overflow menu for small screens