fixed padding issue in horizontal mode (#830)

gsoft-inc · Jun 4, 2024 · 698c3a8 · 698c3a8
1 parent 45ab5a1
commit 698c3a8
Show file tree

Hide file tree

Showing 2 changed files with 8 additions and 2 deletions.
diff --git a/.changeset/fast-actors-add.md b/.changeset/fast-actors-add.md
@@ -0,0 +1,5 @@
+---
+"@igloo-ui/alert": patch
+---
+
+Fixed an UI padding issue for Alert
diff --git a/packages/Alert/src/alert.scss b/packages/Alert/src/alert.scss
@@ -54,7 +54,7 @@
         --ids-alert-title-font-weight: var(--hop-body-sm-semibold-font-weight);
         --ids-alert-horizontal-title-font-weight: var(--hop-body-sm-font-weight);
         --ids-alert-padding: var(--hop-space-inset-md);
-        --ids-alert-padding-compact: var(--hop-space-inset-sm);
+        --ids-alert-padding-compact: var(--hop-space-inset-sm) var(--hop-space-inset-md);
         --ids-alert-flex-gap-component: var(--hop-space-inline-md);
         --ids-alert-border-radius: var(--hop-shape-rounded-md);
         --ids-alert-box-shadow: none;
@@ -123,10 +123,11 @@
         &--horizontal {
             background-color: var(--ids-alert-background-color-darker);
             border-width: var(--ids-alert-border-width);
-            padding: var(--ids-alert-padding-compact);
         }
 
         &--horizontal {
+            padding: var(--ids-alert-padding-compact);
+
             .ids-alert__title {
                 font-weight: var(--ids-alert-horizontal-title-font-weight, var(--ids-alert-title-font-weight))
             }