From 974e458e8efee347f45dc6f932029e2c654bf80e Mon Sep 17 00:00:00 2001
From: m2rt <mart@bitweb.ee>
Date: Wed, 21 Jan 2026 18:23:50 +0200
Subject: [PATCH 1/2] fix(alert): fixed close button overlapping text #282

---
 tedi/components/notifications/alert/alert.component.scss | 9 +++++++++
 1 file changed, 9 insertions(+)

diff --git a/tedi/components/notifications/alert/alert.component.scss b/tedi/components/notifications/alert/alert.component.scss
index 015ff9be9..9c0eb0766 100644
--- a/tedi/components/notifications/alert/alert.component.scss
+++ b/tedi/components/notifications/alert/alert.component.scss
@@ -5,6 +5,8 @@
 }
 
 .tedi-alert {
+  --_close-button-size: 18px;
+
   position: relative;
   display: flex;
   flex-direction: column;
@@ -25,6 +27,13 @@
     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);

From d3f6e6a636f4f4abbaf9d14d08ba00c33963fe4c Mon Sep 17 00:00:00 2001
From: m2rt <mart@bitweb.ee>
Date: Wed, 21 Jan 2026 18:27:27 +0200
Subject: [PATCH 2/2] fix(alert): removed prettier pre-commit scss formatting
 #282

---
 package.json                                  |  3 +-
 .../notifications/alert/alert.component.scss  | 35 ++++++-------------
 2 files changed, 12 insertions(+), 26 deletions(-)

diff --git a/package.json b/package.json
index fa4aa3d5c..820fe268d 100644
--- a/package.json
+++ b/package.json
@@ -122,8 +122,7 @@
   },
   "lint-staged": {
     "{src,tedi}/**/*.{css,scss}": [
-      "stylelint --fix",
-      "prettier --write"
+      "stylelint --fix"
     ],
     "src/**/*.{ts,html}": [
       "prettier --write"
diff --git a/tedi/components/notifications/alert/alert.component.scss b/tedi/components/notifications/alert/alert.component.scss
index 9c0eb0766..b11289961 100644
--- a/tedi/components/notifications/alert/alert.component.scss
+++ b/tedi/components/notifications/alert/alert.component.scss
@@ -16,10 +16,8 @@
   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;
@@ -28,10 +26,7 @@
   }
 
   &:has(&__close) {
-    padding-right: calc(
-      var(--layout-grid-gutters-04) + var(--_close-button-size) +
-        var(--alert-default-padding-x)
-    );
+    padding-right: calc(var(--layout-grid-gutters-04) + var(--_close-button-size) + var(--alert-default-padding-x));
   }
 
   &__close {
@@ -57,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 {