use vh/vw

langermank · web-flow · commit 190f9eef9a9b · 2022-06-11T00:36:02.000Z
diff --git a/src/overlay/overlay.scss b/src/overlay/overlay.scss
@@ -27,50 +27,50 @@ $primer-borderRadius-large: 0.75rem;
   }
 
   &.Overlay--height-xsmall {
-    height: min(192px, 100% - 2rem);
+    height: min(192px, 100vh - 2rem);
   }
 
   &.Overlay--height-small {
-    height: min(256px, 100% - 2rem);
+    height: min(256px, 100vh - 2rem);
   }
 
   &.Overlay--height-medium {
-    height: min(320px, 100% - 2rem);
+    height: min(320px, 100vh - 2rem);
   }
 
   &.Overlay--height-large {
-    height: min(432px, 100% - 2rem);
+    height: min(432px, 100vh - 2rem);
   }
 
   &.Overlay--height-xlarge {
-    height: min(600px, 100% - 2rem);
+    height: min(600px, 100vh - 2rem);
   }
 
   &.Overlay--width-auto {
     width: auto;
   }
 
   &.Overlay--width-small {
-    width: min(256px, 100% - 2rem);
+    width: min(256px, 100vw - 2rem);
   }
 
   &.Overlay--width-medium {
-    width: min(320px, 100% - 2rem);
+    width: min(320px, 100vw - 2rem);
   }
 
   &.Overlay--width-large {
     // stylelint-disable-next-line primer/responsive-widths
-    width: min(480px, 100% - 2rem);
+    width: min(480px, 100vw - 2rem);
   }
 
   &.Overlay--width-xlarge {
     // stylelint-disable-next-line primer/responsive-widths
-    width: min(640px, 100% - 2rem);
+    width: min(640px, 100vw - 2rem);
   }
 
   &.Overlay--width-xxlarge {
     // stylelint-disable-next-line primer/responsive-widths
-    width: min(960px, 100% - 2rem);
+    width: min(960px, 100vw - 2rem);
   }
 
   &.Overlay--motion-scaleFade {

Original file line number	Diff line number	Diff line change
`@@ -27,50 +27,50 @@ $primer-borderRadius-large: 0.75rem;`
`27`	`27`	`}`
`28`	`28`
`29`	`29`	`&.Overlay--height-xsmall {`
`30`		`- height: min(192px, 100% - 2rem);`
	`30`	`+ height: min(192px, 100vh - 2rem);`
`31`	`31`	`}`
`32`	`32`
`33`	`33`	`&.Overlay--height-small {`
`34`		`- height: min(256px, 100% - 2rem);`
	`34`	`+ height: min(256px, 100vh - 2rem);`
`35`	`35`	`}`
`36`	`36`
`37`	`37`	`&.Overlay--height-medium {`
`38`		`- height: min(320px, 100% - 2rem);`
	`38`	`+ height: min(320px, 100vh - 2rem);`
`39`	`39`	`}`
`40`	`40`
`41`	`41`	`&.Overlay--height-large {`
`42`		`- height: min(432px, 100% - 2rem);`
	`42`	`+ height: min(432px, 100vh - 2rem);`
`43`	`43`	`}`
`44`	`44`
`45`	`45`	`&.Overlay--height-xlarge {`
`46`		`- height: min(600px, 100% - 2rem);`
	`46`	`+ height: min(600px, 100vh - 2rem);`
`47`	`47`	`}`
`48`	`48`
`49`	`49`	`&.Overlay--width-auto {`
`50`	`50`	`width: auto;`
`51`	`51`	`}`
`52`	`52`
`53`	`53`	`&.Overlay--width-small {`
`54`		`- width: min(256px, 100% - 2rem);`
	`54`	`+ width: min(256px, 100vw - 2rem);`
`55`	`55`	`}`
`56`	`56`
`57`	`57`	`&.Overlay--width-medium {`
`58`		`- width: min(320px, 100% - 2rem);`
	`58`	`+ width: min(320px, 100vw - 2rem);`
`59`	`59`	`}`
`60`	`60`
`61`	`61`	`&.Overlay--width-large {`
`62`	`62`	`// stylelint-disable-next-line primer/responsive-widths`
`63`		`- width: min(480px, 100% - 2rem);`
	`63`	`+ width: min(480px, 100vw - 2rem);`
`64`	`64`	`}`
`65`	`65`
`66`	`66`	`&.Overlay--width-xlarge {`
`67`	`67`	`// stylelint-disable-next-line primer/responsive-widths`
`68`		`- width: min(640px, 100% - 2rem);`
	`68`	`+ width: min(640px, 100vw - 2rem);`
`69`	`69`	`}`
`70`	`70`
`71`	`71`	`&.Overlay--width-xxlarge {`
`72`	`72`	`// stylelint-disable-next-line primer/responsive-widths`
`73`		`- width: min(960px, 100% - 2rem);`
	`73`	`+ width: min(960px, 100vw - 2rem);`
`74`	`74`	`}`
`75`	`75`
`76`	`76`	`&.Overlay--motion-scaleFade {`