fix: closes modal when clicking dismiss button

assets/controllers/alert_controller.js

@@ -14,5 +14,6 @@ export default class extends Controller {
             "3000"
         ));
         this.element.addEventListener('mouseover', () => clearTimeout(timer));
+        this.element.querySelector('.modal-close').addEventListener('click', () => this.element.remove());
     }
 }

docs/examples/compose.yml

@@ -43,7 +43,7 @@ services:
       - mysql:/var/lib/mysql
     env_file: .env
     healthcheck:
-      test: [ "CMD", "mysqladmin" ,"ping", "-h", "localhost" ]
+      test: [ "CMD", "mysqladmin", "-u", "${MYSQL_USER}", "-p", "${MYSQL_PASSWORD}" ,"ping", "-h", "localhost" ]
       interval: 5s
       timeout: 5s
       retries: 10

templates/components/Alert.html.twig

@@ -2,16 +2,14 @@
     class="alert alert-{{ type|default('success') }}"
     role="alert"
 >
+    <div class="flex justify-between items-center">
         <div class="flex items-center">
             <svg class="shrink-0 w-4 h-4 me-2" aria-hidden="true" xmlns="http://www.w3.org/2000/svg" fill="currentColor" viewBox="0 0 20 20">
                 <path d="M10 .5a9.5 9.5 0 1 0 9.5 9.5A9.51 9.51 0 0 0 10 .5ZM9.5 4a1.5 1.5 0 1 1 0 3 1.5 1.5 0 0 1 0-3ZM12 15H8a1 1 0 0 1 0-2h1v-3H8a1 1 0 0 1 0-2h2a1 1 0 0 1 1 1v4h1a1 1 0 0 1 0 2Z"/>
             </svg>
-
             <h3 class="text-lg font-medium font-bold">{{ title|default('') }}</h3>
-
-        <twig:ux:icon name="ic:twotone-cancel" style="text-align:right" width="16.75px" height="16.75px" class="modal-close rounded-full align-end text-red-600 hover:text-red-700" />
-
-        <span class="sr-only">Info</span>
+        </div>
+        <twig:ux:icon name="ic:twotone-cancel" width="16.75px" height="16.75px" class="modal-close rounded-full align-end text-red-600 hover:text-red-700" />
     </div>
     <div class="mt-2 text-sm w-[300px] font-bold overflow-hidden text-wrap">
         {{ message }}