Fix alert layout alignment and bump devalue for a security fix (#3140)

core/scss/ui/_alerts.scss

@@ -20,15 +20,16 @@
   // scss-docs-end alert-css-vars
 
   position: relative;
-  display: flex;
-  flex-direction: row;
-  gap: var(--alert-gap);
   padding: var(--alert-padding-y) var(--alert-padding-x);
   margin-bottom: var(--alert-margin-bottom);
   color: var(--alert-color);
   background-color: color-mix(in oklab, var(--alert-bg), var(--bg-surface));
   border: var(--border-width) var(--border-style) var(--alert-border-color);
   @include border-radius(var(--alert-border-radius));
+
+  &:has(> .alert-icon) {
+    padding-inline-start: calc(var(--alert-padding-x) + var(--alert-icon-size) + var(--alert-gap));
+  }
 }
 
 .alert-heading {
@@ -44,9 +45,23 @@
 .alert-icon {
   width: var(--alert-icon-size) !important;
   height: var(--alert-icon-size) !important;
+  margin-inline-end: var(--alert-gap);
   color: var(--alert-color);
 }
 
+.alert > .alert-icon {
+  position: absolute;
+  inset-inline-start: var(--alert-padding-x);
+  top: var(--alert-padding-y);
+  margin-inline-end: 0;
+}
+
+.alert-action,
+.alert-link {
+  margin-inline-start: 0.25rem;
+  white-space: nowrap;
+}
+
 .alert-action {
   color: var(--alert-color);
   text-decoration: underline;
@@ -60,6 +75,11 @@
   margin: 0;
 }
 
+.alert > .alert-heading + div:has(+ .alert-action),
+.alert > .alert-heading + div:has(+ .alert-link) {
+  display: inline;
+}
+
 .alert-link {
   font-weight: $alert-link-font-weight;
   color: var(--alert-link-color);