diff --git a/.changeset/lemon-pandas-buy.md b/.changeset/lemon-pandas-buy.md new file mode 100644 index 00000000000..f6dc97fd968 --- /dev/null +++ b/.changeset/lemon-pandas-buy.md @@ -0,0 +1,5 @@ +--- +"@primer/react": patch +--- + +Add breakpoint to shrink gutter around dialog on very small screen heights diff --git a/packages/react/src/Dialog/Dialog.module.css b/packages/react/src/Dialog/Dialog.module.css index d750854c158..f59c4369010 100644 --- a/packages/react/src/Dialog/Dialog.module.css +++ b/packages/react/src/Dialog/Dialog.module.css @@ -200,6 +200,11 @@ } } + @media (max-height: 280px) { + max-height: calc(100dvh - 12px); + max-width: calc(100dvw - 12px); + } + &[data-position-narrow='bottom'] { width: 100dvw; max-width: 100dvw;