From 08bccd37d301fa65e25799ae6d493bacfdac052e Mon Sep 17 00:00:00 2001
From: Marie Lucca <francinelucca@github.com>
Date: Wed, 29 Oct 2025 16:18:30 -0400
Subject: [PATCH 1/7] fix(AnchoredOverlay): Remove use of useResponsiveValue

---
 packages/react/src/AnchoredOverlay/AnchoredOverlay.tsx   | 9 +++------
 .../__snapshots__/AnchoredOverlay.test.tsx.snap          | 3 +--
 packages/react/src/Overlay/Overlay.module.css            | 8 ++++++++
 packages/react/src/Overlay/Overlay.tsx                   | 8 ++++----
 4 files changed, 16 insertions(+), 12 deletions(-)

diff --git a/packages/react/src/AnchoredOverlay/AnchoredOverlay.tsx b/packages/react/src/AnchoredOverlay/AnchoredOverlay.tsx
index 0ba6cf0b174..26f80d34ebf 100644
--- a/packages/react/src/AnchoredOverlay/AnchoredOverlay.tsx
+++ b/packages/react/src/AnchoredOverlay/AnchoredOverlay.tsx
@@ -9,7 +9,7 @@ import {useFocusZone} from '../hooks/useFocusZone'
 import {useAnchoredPosition, useProvidedRefOrCreate, useRenderForcingRef} from '../hooks'
 import {useId} from '../hooks/useId'
 import type {AnchorPosition, PositionSettings} from '@primer/behaviors'
-import {useResponsiveValue, type ResponsiveValue} from '../hooks/useResponsiveValue'
+import {type ResponsiveValue} from '../hooks/useResponsiveValue'
 import {IconButton, type IconButtonProps} from '../Button'
 import {XIcon} from '@primer/octicons-react'
 import classes from './AnchoredOverlay.module.css'
@@ -225,8 +225,6 @@ export const AnchoredOverlay: React.FC<React.PropsWithChildren<AnchoredOverlayPr
   })
   useFocusTrap({containerRef: overlayRef, disabled: !open || !position, ...focusTrapSettings})
 
-  const currentResponsiveVariant = useResponsiveValue(variant, 'anchored')
-
   const showXIcon = onClose && variant.narrow === 'fullscreen' && displayCloseButton
   const XButtonAriaLabelledBy = closeButtonProps['aria-labelledby']
   const XButtonAriaLabel = closeButtonProps['aria-label']
@@ -254,10 +252,9 @@ export const AnchoredOverlay: React.FC<React.PropsWithChildren<AnchoredOverlayPr
           visibility={position ? 'visible' : 'hidden'}
           height={height}
           width={width}
-          top={currentResponsiveVariant === 'anchored' ? position?.top || 0 : undefined}
-          left={currentResponsiveVariant === 'anchored' ? position?.left || 0 : undefined}
+          top={position?.top || 0}
+          left={position?.left || 0}
           responsiveVariant={variant.narrow === 'fullscreen' ? 'fullscreen' : undefined}
-          data-variant={currentResponsiveVariant}
           anchorSide={position?.anchorSide}
           className={className}
           preventOverflow={preventOverflow}
diff --git a/packages/react/src/AnchoredOverlay/__snapshots__/AnchoredOverlay.test.tsx.snap b/packages/react/src/AnchoredOverlay/__snapshots__/AnchoredOverlay.test.tsx.snap
index 7442de16784..03a5a8c9750 100644
--- a/packages/react/src/AnchoredOverlay/__snapshots__/AnchoredOverlay.test.tsx.snap
+++ b/packages/react/src/AnchoredOverlay/__snapshots__/AnchoredOverlay.test.tsx.snap
@@ -43,11 +43,10 @@ exports[`AnchoredOverlay > should render consistently when open 1`] = `
           class="prc-Overlay-Overlay-ViJgm"
           data-focus-trap="active"
           data-height-auto=""
-          data-variant="anchored"
           data-visibility-visible=""
           data-width-auto=""
           role="none"
-          style="left: 0px; top: 36px;"
+          style="--top: 36; --left: 0;"
         >
           <span
             aria-hidden="true"
diff --git a/packages/react/src/Overlay/Overlay.module.css b/packages/react/src/Overlay/Overlay.module.css
index aa8fb20fa31..56d35c8cba1 100644
--- a/packages/react/src/Overlay/Overlay.module.css
+++ b/packages/react/src/Overlay/Overlay.module.css
@@ -19,6 +19,14 @@
   background-color: var(--overlay-bgColor);
   border-radius: var(--borderRadius-large);
   box-shadow: var(--shadow-floating-small);
+  /* stylelint-disable-next-line primer/spacing, csstools/value-no-unknown-custom-properties */
+  top: var(--top);
+  /* stylelint-disable-next-line primer/spacing, csstools/value-no-unknown-custom-properties */
+  left: var(--left);
+  /* stylelint-disable-next-line primer/spacing, csstools/value-no-unknown-custom-properties */
+  right: var(--right);
+  /* stylelint-disable-next-line primer/spacing, csstools/value-no-unknown-custom-properties */
+  bottom: var(--bottom);
 
   &:focus {
     outline: none;
diff --git a/packages/react/src/Overlay/Overlay.tsx b/packages/react/src/Overlay/Overlay.tsx
index b4d917154a6..f1e093cfd34 100644
--- a/packages/react/src/Overlay/Overlay.tsx
+++ b/packages/react/src/Overlay/Overlay.tsx
@@ -113,10 +113,10 @@ export const BaseOverlay = React.forwardRef(
         ref={forwardedRef}
         style={
           {
-            left,
-            right,
-            top,
-            bottom,
+            '--top': top,
+            '--left': left,
+            '--right': right,
+            '--bottom': bottom,
             position,
             ...styleFromProps,
           } as React.CSSProperties

From a86114145f9840c9c4e540f9ff0f360e692ea028 Mon Sep 17 00:00:00 2001
From: Marie Lucca <francinelucca@github.com>
Date: Wed, 29 Oct 2025 16:25:46 -0400
Subject: [PATCH 2/7] remove needless disables

---
 packages/react/src/Overlay/Overlay.module.css | 8 ++++----
 1 file changed, 4 insertions(+), 4 deletions(-)

diff --git a/packages/react/src/Overlay/Overlay.module.css b/packages/react/src/Overlay/Overlay.module.css
index 56d35c8cba1..240923466ef 100644
--- a/packages/react/src/Overlay/Overlay.module.css
+++ b/packages/react/src/Overlay/Overlay.module.css
@@ -19,13 +19,13 @@
   background-color: var(--overlay-bgColor);
   border-radius: var(--borderRadius-large);
   box-shadow: var(--shadow-floating-small);
-  /* stylelint-disable-next-line primer/spacing, csstools/value-no-unknown-custom-properties */
+  /* stylelint-disable-next-line primer/spacing */
   top: var(--top);
-  /* stylelint-disable-next-line primer/spacing, csstools/value-no-unknown-custom-properties */
+  /* stylelint-disable-next-line primer/spacing */
   left: var(--left);
-  /* stylelint-disable-next-line primer/spacing, csstools/value-no-unknown-custom-properties */
+  /* stylelint-disable-next-line primer/spacing */
   right: var(--right);
-  /* stylelint-disable-next-line primer/spacing, csstools/value-no-unknown-custom-properties */
+  /* stylelint-disable-next-line primer/spacing */
   bottom: var(--bottom);
 
   &:focus {

From 02483425f8d2ebec079c2c0030f71a41b744c0e1 Mon Sep 17 00:00:00 2001
From: Marie Lucca <40550942+francinelucca@users.noreply.github.com>
Date: Wed, 29 Oct 2025 16:29:19 -0400
Subject: [PATCH 3/7] Update packages/react/src/Overlay/Overlay.tsx

Co-authored-by: Copilot <175728472+Copilot@users.noreply.github.com>
---
 packages/react/src/Overlay/Overlay.tsx | 8 ++++----
 1 file changed, 4 insertions(+), 4 deletions(-)

diff --git a/packages/react/src/Overlay/Overlay.tsx b/packages/react/src/Overlay/Overlay.tsx
index f1e093cfd34..399078d4e37 100644
--- a/packages/react/src/Overlay/Overlay.tsx
+++ b/packages/react/src/Overlay/Overlay.tsx
@@ -113,10 +113,10 @@ export const BaseOverlay = React.forwardRef(
         ref={forwardedRef}
         style={
           {
-            '--top': top,
-            '--left': left,
-            '--right': right,
-            '--bottom': bottom,
+            '--top': typeof top === 'number' ? `${top}px` : top,
+            '--left': typeof left === 'number' ? `${left}px` : left,
+            '--right': typeof right === 'number' ? `${right}px` : right,
+            '--bottom': typeof bottom === 'number' ? `${bottom}px` : bottom,
             position,
             ...styleFromProps,
           } as React.CSSProperties

From 71909efd0051b36ed25dbe3d3d3462cebc2eadf3 Mon Sep 17 00:00:00 2001
From: Marie Lucca <francinelucca@github.com>
Date: Wed, 29 Oct 2025 16:42:37 -0400
Subject: [PATCH 4/7] update snapshot

---
 .../AnchoredOverlay/__snapshots__/AnchoredOverlay.test.tsx.snap | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/packages/react/src/AnchoredOverlay/__snapshots__/AnchoredOverlay.test.tsx.snap b/packages/react/src/AnchoredOverlay/__snapshots__/AnchoredOverlay.test.tsx.snap
index 03a5a8c9750..f92d41f159c 100644
--- a/packages/react/src/AnchoredOverlay/__snapshots__/AnchoredOverlay.test.tsx.snap
+++ b/packages/react/src/AnchoredOverlay/__snapshots__/AnchoredOverlay.test.tsx.snap
@@ -46,7 +46,7 @@ exports[`AnchoredOverlay > should render consistently when open 1`] = `
           data-visibility-visible=""
           data-width-auto=""
           role="none"
-          style="--top: 36; --left: 0;"
+          style="--top: 36px; --left: 0px;"
         >
           <span
             aria-hidden="true"

From 51a9e6ca3eece29012bb69e07a2857dfea1ce986 Mon Sep 17 00:00:00 2001
From: Marie Lucca <francinelucca@github.com>
Date: Wed, 29 Oct 2025 21:43:18 -0400
Subject: [PATCH 5/7] css fix

---
 packages/react/src/Overlay/Overlay.module.css             | 8 ++++----
 .../src/experimental/SelectPanel2/SelectPanel.module.css  | 7 +++++++
 2 files changed, 11 insertions(+), 4 deletions(-)

diff --git a/packages/react/src/Overlay/Overlay.module.css b/packages/react/src/Overlay/Overlay.module.css
index 240923466ef..a411b34c6f4 100644
--- a/packages/react/src/Overlay/Overlay.module.css
+++ b/packages/react/src/Overlay/Overlay.module.css
@@ -20,13 +20,13 @@
   border-radius: var(--borderRadius-large);
   box-shadow: var(--shadow-floating-small);
   /* stylelint-disable-next-line primer/spacing */
-  top: var(--top);
+  top: var(--top, auto);
   /* stylelint-disable-next-line primer/spacing */
-  left: var(--left);
+  left: var(--left, auto);
   /* stylelint-disable-next-line primer/spacing */
-  right: var(--right);
+  right: var(--right, auto);
   /* stylelint-disable-next-line primer/spacing */
-  bottom: var(--bottom);
+  bottom: var(--bottom, auto);
 
   &:focus {
     outline: none;
diff --git a/packages/react/src/experimental/SelectPanel2/SelectPanel.module.css b/packages/react/src/experimental/SelectPanel2/SelectPanel.module.css
index b71d6278f2e..7689c6c9261 100644
--- a/packages/react/src/experimental/SelectPanel2/SelectPanel.module.css
+++ b/packages/react/src/experimental/SelectPanel2/SelectPanel.module.css
@@ -25,6 +25,13 @@
     }
   }
 
+  &:where([data-variant='modal']) {
+    top: 0;
+    left: 0;
+    right: 0;
+    bottom: 0;
+  }
+
   &:where([data-variant='modal'])::backdrop {
     background-color: var(--overlay-backdrop-bgColor);
   }

From 26457ee98fd766a104598e0ff9587065c3b8b6ac Mon Sep 17 00:00:00 2001
From: Marie Lucca <francinelucca@github.com>
Date: Wed, 29 Oct 2025 22:30:25 -0400
Subject: [PATCH 6/7] add data-component attribute to AnchoredOverlay

---
 packages/react/src/AnchoredOverlay/AnchoredOverlay.tsx | 1 +
 1 file changed, 1 insertion(+)

diff --git a/packages/react/src/AnchoredOverlay/AnchoredOverlay.tsx b/packages/react/src/AnchoredOverlay/AnchoredOverlay.tsx
index 26f80d34ebf..6fb3eed697d 100644
--- a/packages/react/src/AnchoredOverlay/AnchoredOverlay.tsx
+++ b/packages/react/src/AnchoredOverlay/AnchoredOverlay.tsx
@@ -258,6 +258,7 @@ export const AnchoredOverlay: React.FC<React.PropsWithChildren<AnchoredOverlayPr
           anchorSide={position?.anchorSide}
           className={className}
           preventOverflow={preventOverflow}
+          data-component="AnchoredOverlay"
           {...overlayProps}
         >
           {showXIcon ? (

From a5a39decb74ec76752b9f9d0919c82f41d7bb637 Mon Sep 17 00:00:00 2001
From: Marie Lucca <francinelucca@github.com>
Date: Wed, 29 Oct 2025 22:32:12 -0400
Subject: [PATCH 7/7] update snapshots

---
 .../AnchoredOverlay/__snapshots__/AnchoredOverlay.test.tsx.snap  | 1 +
 1 file changed, 1 insertion(+)

diff --git a/packages/react/src/AnchoredOverlay/__snapshots__/AnchoredOverlay.test.tsx.snap b/packages/react/src/AnchoredOverlay/__snapshots__/AnchoredOverlay.test.tsx.snap
index f92d41f159c..74c4f25139c 100644
--- a/packages/react/src/AnchoredOverlay/__snapshots__/AnchoredOverlay.test.tsx.snap
+++ b/packages/react/src/AnchoredOverlay/__snapshots__/AnchoredOverlay.test.tsx.snap
@@ -41,6 +41,7 @@ exports[`AnchoredOverlay > should render consistently when open 1`] = `
       >
         <div
           class="prc-Overlay-Overlay-ViJgm"
+          data-component="AnchoredOverlay"
           data-focus-trap="active"
           data-height-auto=""
           data-visibility-visible=""