diff --git a/packages/design-system/src/components/N8nAlert/Alert.vue b/packages/design-system/src/components/N8nAlert/Alert.vue index 1f80edc907..a216f827b4 100644 --- a/packages/design-system/src/components/N8nAlert/Alert.vue +++ b/packages/design-system/src/components/N8nAlert/Alert.vue @@ -81,9 +81,11 @@ const alertBoxClassNames = computed(() => { .alert { display: flex; position: relative; + min-height: 60px; border-bottom: 1px solid transparent; align-items: center; justify-content: space-between; + padding: $alert-padding; &.center { justify-content: center; @@ -200,15 +202,6 @@ const alertBoxClassNames = computed(() => { } } } - - &.background { - min-height: 60px; - padding: $alert-padding; - - .icon { - padding-left: var(--spacing-2xs); - } - } } .content { @@ -220,7 +213,8 @@ const alertBoxClassNames = computed(() => { display: inline-flex; color: inherit; align-items: center; - padding-right: var(--spacing-2xs); + padding-left: var(--spacing-2xs); + padding-right: var(--spacing-s); } .text { @@ -233,14 +227,11 @@ const alertBoxClassNames = computed(() => { font-size: $alert-title-font-size; line-height: 18px; font-weight: bold; - - + .description { - margin-top: var(--spacing-2xs); - } } .description { font-size: $alert-description-font-size; + margin: 5px 0 0 0; } .aside {