🪲 Move the modal close button to top right/left corner (#5906)

This PR ensures that the close button of modals appears in the top right/left corners.

Fixes #5887

**How to test**
- To show an error modal: log in as a teacher and select a class. Click Add students > Create accounts. Try creating a student account with @ or multiple student accounts with less than 3 chars for usernames and this will trigger an error modal. If the error message is short, the close button should be aligned with the text and if the error message is multiple lines, the close button should be aligned with the first row of the text. If you use a left-to-right language such as Arabic, the close button should appear on the left.
- To show a success modal: log in to an account and go to account settings. Change the language of your profile and this will trigger a successful modal. Double-check that for left-to-right languages, the close button should appear on the left.


Co-Authored-By: Jesús Pelay <[email protected]>

templates/layout.html

@@ -215,10 +215,12 @@ <h2>{{ _('levels')|capitalize }}</h2>
        </div>
     </div>
     <div id="modal_alert" class="z-50 fixed hidden" role="alert" style="top: 10%; left: 50%; transform: translate(-50%, -50%);">
-        <div id="modal_alert_container" data-cy="modal_alert_container" class="mx-auto text-center bg-green-100 border-green-400 text-green-700 border rounded px-4 py-3">
-            <span id="modal_alert_title" class="block sm:inline"></span>
+        <div id="modal_alert_container" data-cy="modal_alert_container"
+             class="mx-auto text-center bg-green-100 border-green-400 text-green-700 border rounded px-7 py-2">
+            <svg class="absolute top-2 end-1 h-6 w-6 fill-current text-green-500 block sm:inline cursor-pointer"
+                 id="modal_alert_button"
+                 xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20"><title>Close</title><path d="M14.348 14.849a1.2 1.2 0 0 1-1.697 0L10 11.819l-2.651 3.029a1.2 1.2 0 1 1-1.697-1.697l2.758-3.15-2.759-3.152a1.2 1.2 0 1 1 1.697-1.697L10 8.183l2.651-3.031a1.2 1.2 0 1 1 1.697 1.697l-2.758 3.152 2.758 3.15a1.2 1.2 0 0 1 0 1.698z"/></svg>
             <span id="modal_alert_text" data-cy="modal_alert_text" class="block sm:inline"></span>
-            <svg class="fill-current h-6 w-6 text-green-500 block sm:inline" id="modal_alert_button" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20"><title>Close</title><path d="M14.348 14.849a1.2 1.2 0 0 1-1.697 0L10 11.819l-2.651 3.029a1.2 1.2 0 1 1-1.697-1.697l2.758-3.15-2.759-3.152a1.2 1.2 0 1 1 1.697-1.697L10 8.183l2.651-3.031a1.2 1.2 0 1 1 1.697 1.697l-2.758 3.152 2.758 3.15a1.2 1.2 0 0 1 0 1.698z"/></svg>
         </div>
     </div>