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 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; 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;