fix(Notification): fix icon styling (#1248)

mittwald · Mar 7, 2025 · 66640a4 · 66640a4
1 parent fb677cf
commit 66640a4
Show file tree

Hide file tree

Showing 2 changed files with 9 additions and 1 deletion.
diff --git a/packages/components/src/components/Notification/Notification.module.scss b/packages/components/src/components/Notification/Notification.module.scss
@@ -31,6 +31,14 @@
     padding-inline-end: calc(
       var(--button-width) + var(--heading--icon-to-text-spacing)
     );
+
+    .icon {
+      height: var(--heading-line-height);
+      width: var(--heading-line-height);
+      vertical-align: bottom;
+      display: inline-block;
+      margin-inline-end: var(--heading--icon-to-text-spacing);
+    }
   }
 
   .text {

diff --git a/packages/components/src/components/Notification/Notification.tsx b/packages/components/src/components/Notification/Notification.tsx
@@ -52,7 +52,7 @@ export const Notification: FC<NotificationProps> = (props) => {
       level: 4,
       children: dynamic((props) => (
         <>
-          <AlertIcon status={status} />
+          <AlertIcon status={status} className={styles.icon} />
           {props.children}
         </>
       )),