[Feature] Threshold Warning + Cosmetics (#277)

Co-authored-by: Tim Lorsbach <tim@lorsba.ch>
Reviewed-on: enviPath/enviPy#277

templates/modals/search_modal.html

@@ -1,11 +1,10 @@
-{% load static %}
 <dialog
   id="search_modal"
-  class="modal @max-sm:modal-top justify-center"
+  class="modal items-start sm:items-center"
   x-data="searchModal()"
   @close="reset()"
 >
-  <div class="modal-box h-full w-lvw p-1 sm:h-8/12 sm:w-[85vw] sm:max-w-5xl">
+  <div class="modal-box mt-4 sm:mt-0 p-1 sm:h-8/12 sm:w-[85vw] sm:max-w-5xl">
     <!-- Search Input and Mode Selector -->
     <div class="form-control mb-4 w-full shrink-0">
       <div class="join m-0 w-full items-center p-3">
@@ -43,7 +42,7 @@
             type="button"
             tabindex="0"
             popovertarget="search_dropdown_menu"
-            style="anchor-name: --1"
+            style="anchor-name: --anchor-mode"
             class="btn join-item btn-ghost"
           >
             <span x-text="searchModeLabel"></span>
@@ -67,7 +66,7 @@
             popover
             x-ref="modeDropdown"
             id="search_dropdown_menu"
-            style="position-anchor: --anchor-2"
+            style="position-anchor: --anchor-mode"
           >
             <li class="menu-title">Text</li>
             <li>
@@ -495,8 +494,7 @@
     </div>
   </div>
 
-  <!-- Backdrop to close -->
   <form method="dialog" class="modal-backdrop">
-    <button>close</button>
+    <button aria-label="close"></button>
   </form>
 </dialog>