fix(alert): fixed close button overlapping text #282 (#287)

Author: mart-sessman

package.json

@@ -122,8 +122,7 @@
   },
   "lint-staged": {
     "{src,tedi}/**/*.{css,scss}": [
-      "stylelint --fix",
-      "prettier --write"
+      "stylelint --fix"
     ],
     "src/**/*.{ts,html}": [
       "prettier --write"

tedi/components/notifications/alert/alert.component.scss

@@ -5,6 +5,8 @@
 }
 
 .tedi-alert {
+  --_close-button-size: 18px;
+
   position: relative;
   display: flex;
   flex-direction: column;
@@ -14,17 +16,19 @@
   border: 1px solid;
   border-radius: var(--alert-radius);
 
-  @include alert-variant(
-    var(--alert-default-background-info),
-    var(--alert-default-border-info)
-  );
+  @include alert-variant(var(--alert-default-background-info),
+    var(--alert-default-border-info));
 
   &__head {
     display: flex;
     gap: var(--layout-grid-gutters-04);
     align-items: center;
   }
 
+  &:has(&__close) {
+    padding-right: calc(var(--layout-grid-gutters-04) + var(--_close-button-size) + var(--alert-default-padding-x));
+  }
+
   &__close {
     position: absolute;
     top: var(--alert-default-padding-y);
@@ -48,31 +52,23 @@
   }
 
   &--info {
-    @include alert-variant(
-      var(--alert-default-background-info),
-      var(--alert-default-border-info)
-    );
+    @include alert-variant(var(--alert-default-background-info),
+      var(--alert-default-border-info));
   }
 
   &--success {
-    @include alert-variant(
-      var(--alert-default-background-success),
-      var(--alert-default-border-success)
-    );
+    @include alert-variant(var(--alert-default-background-success),
+      var(--alert-default-border-success));
   }
 
   &--warning {
-    @include alert-variant(
-      var(--alert-default-background-warning),
-      var(--alert-default-border-warning)
-    );
+    @include alert-variant(var(--alert-default-background-warning),
+      var(--alert-default-border-warning));
   }
 
   &--danger {
-    @include alert-variant(
-      var(--alert-default-background-danger),
-      var(--alert-default-border-danger)
-    );
+    @include alert-variant(var(--alert-default-background-danger),
+      var(--alert-default-border-danger));
   }
 
   &--global {