FormControl + Overlay bug fixes (#2124)

primer · Jun 17, 2022 · f1b3e55 · f1b3e55
1 parent cb41da3
commit f1b3e55
Show file tree

Hide file tree

Showing 3 changed files with 18 additions and 12 deletions.
diff --git a/.changeset/flat-toys-try.md b/.changeset/flat-toys-try.md
@@ -0,0 +1,5 @@
+---
+"@primer/css": patch
+---
+
+FormControl + Overlay bug fixes
diff --git a/src/forms/FormControl.scss b/src/forms/FormControl.scss
@@ -114,7 +114,7 @@
   height: var(--primer-control-medium-size, 32px);
   background-color: var(--color-canvas-default);
   border-radius: var(--primer-borderRadius-medium, 6px);
-  box-shadow: var(--primer-borderInset-thin, 1px) var(--color-border-default);
+  box-shadow: var(--primer-borderInset-thin, inset 0 0 0 max(1px, 0.0625rem)) var(--color-border-default);
   grid-template-rows: auto;
   gap: var(--primer-controlStack-medium-gap-condensed, 8px);
   align-items: center;
@@ -143,7 +143,7 @@
   }
 
   &.FormControl-fieldWrap--invalid:not(:focus-within) {
-    box-shadow: var(--primer-borderInset-thin, 1px) var(--color-danger-emphasis);
+    box-shadow: var(--primer-borderInset-thin, inset 0 0 0 max(1px, 0.0625rem)) var(--color-danger-emphasis);
   }
 
   // if leadingVisual is present

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 {
@@ -255,6 +255,7 @@ $primer-borderRadius-large: 0.75rem;
 
 @mixin Overlay-backdrop--transparent() {
   position: absolute;
+  z-index: 999;
   background-color: transparent;
 }