From 9f9dbf3c25189270854ccf37baf0ee93660403c3 Mon Sep 17 00:00:00 2001 From: Siddharth Kshetrapal Date: Fri, 28 Mar 2025 20:58:58 +0100 Subject: [PATCH 1/3] full screen overlay should be fixed to top:0 --- packages/react/src/Overlay/Overlay.module.css | 1 + packages/react/src/Overlay/Overlay.tsx | 1 + 2 files changed, 2 insertions(+) diff --git a/packages/react/src/Overlay/Overlay.module.css b/packages/react/src/Overlay/Overlay.module.css index 5aab9024d0a..de584ec2aa0 100644 --- a/packages/react/src/Overlay/Overlay.module.css +++ b/packages/react/src/Overlay/Overlay.module.css @@ -158,6 +158,7 @@ } &:where([data-variant='fullscreen']) { + position: fixed; top: 0; left: 0; width: 100vw; diff --git a/packages/react/src/Overlay/Overlay.tsx b/packages/react/src/Overlay/Overlay.tsx index 519be0d24f4..f7d32cc24af 100644 --- a/packages/react/src/Overlay/Overlay.tsx +++ b/packages/react/src/Overlay/Overlay.tsx @@ -104,6 +104,7 @@ const StyledOverlay = toggleStyledComponent( } &:where([data-variant='fullscreen']) { + position: fixed; top: 0; left: 0; width: 100vw; From 0af5120e660e242790530081a8929863e570f19d Mon Sep 17 00:00:00 2001 From: Siddharth Kshetrapal Date: Fri, 28 Mar 2025 20:59:57 +0100 Subject: [PATCH 2/3] update snapshot --- .../src/__tests__/__snapshots__/AnchoredOverlay.test.tsx.snap | 1 + 1 file changed, 1 insertion(+) diff --git a/packages/react/src/__tests__/__snapshots__/AnchoredOverlay.test.tsx.snap b/packages/react/src/__tests__/__snapshots__/AnchoredOverlay.test.tsx.snap index ce4d66ef15a..99f22fc126d 100644 --- a/packages/react/src/__tests__/__snapshots__/AnchoredOverlay.test.tsx.snap +++ b/packages/react/src/__tests__/__snapshots__/AnchoredOverlay.test.tsx.snap @@ -31,6 +31,7 @@ exports[`AnchoredOverlay should render consistently when open 1`] = ` } .c1:where([data-variant='fullscreen']) { + position: fixed; top: 0; left: 0; width: 100vw; From 14f720db8e4a7e45363072652b63b7aeee45052d Mon Sep 17 00:00:00 2001 From: Siddharth Kshetrapal Date: Fri, 28 Mar 2025 21:05:16 +0100 Subject: [PATCH 3/3] Create light-beds-stare.md --- .changeset/light-beds-stare.md | 5 +++++ 1 file changed, 5 insertions(+) create mode 100644 .changeset/light-beds-stare.md diff --git a/.changeset/light-beds-stare.md b/.changeset/light-beds-stare.md new file mode 100644 index 00000000000..fefb2d4319a --- /dev/null +++ b/.changeset/light-beds-stare.md @@ -0,0 +1,5 @@ +--- +"@primer/react": patch +--- + +Overlay: Fix position for fullscreen overlay on narrow screens