diff --git a/.changeset/pl-alert-close-btn-centering.md b/.changeset/pl-alert-close-btn-centering.md new file mode 100644 index 0000000000..9e2f3f7857 --- /dev/null +++ b/.changeset/pl-alert-close-btn-centering.md @@ -0,0 +1,5 @@ +--- +"@milaboratories/uikit": patch +--- + +`PlAlert`: center the `closeable` close button on the first line of text. The X was pinned ~6px too low on single-line alerts; it now aligns with the text on both single-line and multi-line alerts. diff --git a/lib/ui/uikit/src/components/PlAlert/pl-alert.scss b/lib/ui/uikit/src/components/PlAlert/pl-alert.scss index 6b3d8f5e9b..b27c60e69a 100644 --- a/lib/ui/uikit/src/components/PlAlert/pl-alert.scss +++ b/lib/ui/uikit/src/components/PlAlert/pl-alert.scss @@ -70,7 +70,9 @@ &__close-btn { position: absolute; - top: 10px; + // Centre the 40px button on the first content row. The row's centre sits at + // 24px (12px padding + half the 24px row); top = 24 − 20 (half the button). + top: 4px; right: 12px; } }