diff --git a/.changeset/flat-toys-try.md b/.changeset/flat-toys-try.md new file mode 100644 index 0000000000..56fccfc0bd --- /dev/null +++ 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 index 123c7e73db..d5c767c670 100644 --- 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 index 88fdaedc93..8845ad3f34 100644 --- a/src/overlay/overlay.scss +++ b/src/overlay/overlay.scss @@ -27,23 +27,23 @@ $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 { @@ -51,26 +51,26 @@ $primer-borderRadius-large: 0.75rem; } &.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; }