feat(webmail): enhance tag input display and improve dropdown menu styles

3 files changed, 37 insertions, 13 deletions

diff --git a/static/css/tailwind.css b/static/css/tailwind.css
index bc7f853..d741e81 100644
--- a/static/css/tailwind.css
+++ b/static/css/tailwind.css
@@ -458,6 +458,10 @@ input:-webkit-autofill:focus {
   min-width: 0;
 }
 
+.webmail-tag-input .tags-container > span {
+  display: contents;
+}
+
 .webmail-tag {
   display: inline-flex;
   align-items: center;
diff --git a/templates/mail/htmx/webmail.htmx.django b/templates/mail/htmx/webmail.htmx.django
index 1657b2a..9ea1324 100644
--- a/templates/mail/htmx/webmail.htmx.django
+++ b/templates/mail/htmx/webmail.htmx.django
@@ -83,18 +83,31 @@
 
 <script>
 (function() {
-    var webmail = document.getElementById("webmail");
-    if (!webmail) return;
+    var webmailId = "webmail";
+
+    function getWebmail() {
+        return document.getElementById(webmailId);
+    }
+
+    if (!getWebmail()) return;
 
     function getMailboxID() {
-        return webmail.dataset.mailboxId;
+        var element = getWebmail();
+        return element ? element.dataset.mailboxId : null;
     }
 
     function getFolderSlug() {
-        return webmail.dataset.folderSlug;
+        var element = getWebmail();
+        return element ? element.dataset.folderSlug : null;
+    }
+
+    function isStale() {
+        var element = getWebmail();
+        return !element || !element.isConnected;
     }
 
     function refreshEmailList() {
+        if (isStale()) return;
         var mailboxId = getMailboxID();
         var folderSlug = getFolderSlug();
         var url;
@@ -102,7 +115,8 @@
         if (folderSlug === "starred") {
             url = "/mail/webmail/" + mailboxId + "/starred/emails";
         } else {
-            var folderId = webmail.dataset.folderId;
+            var element = getWebmail();
+            var folderId = element.dataset.folderId;
             url = "/mail/webmail/" + mailboxId + "/folder/" + folderId + "/emails";
         }
 
@@ -110,12 +124,14 @@
     }
 
     function refreshFolderSidebar() {
+        if (isStale()) return;
         var mailboxId = getMailboxID();
         var folderSlug = getFolderSlug();
         htmx.ajax("GET", "/mail/webmail/" + mailboxId + "/folders?folder=" + folderSlug, { target: "#webmail-folders", swap: "innerHTML" });
     }
 
     function clearPreview() {
+        if (isStale()) return;
         var template = document.getElementById("webmail-empty-template");
         var preview = document.getElementById("webmail-preview");
         if (template && preview) {
@@ -155,14 +171,18 @@
 
     document.body.addEventListener("emailDeleted", function() {
         clearPreview();
-        refreshEmailList();
-        refreshFolderSidebar();
+        setTimeout(function() {
+            refreshEmailList();
+            refreshFolderSidebar();
+        }, 50);
     });
 
     document.body.addEventListener("emailMoved", function() {
         clearPreview();
-        refreshEmailList();
-        refreshFolderSidebar();
+        setTimeout(function() {
+            refreshEmailList();
+            refreshFolderSidebar();
+        }, 50);
     });
 
     document.body.addEventListener("emailReadChanged", function() {
diff --git a/templates/mail/webmail/preview.django b/templates/mail/webmail/preview.django
index 967cb0f..bab0cc3 100644
--- a/templates/mail/webmail/preview.django
+++ b/templates/mail/webmail/preview.django
@@ -41,11 +41,11 @@
                         <path stroke-linecap="round" stroke-linejoin="round" d="M2.25 12.75V12A2.25 2.25 0 0 1 4.5 9.75h15A2.25 2.25 0 0 1 21.75 12v.75m-8.69-6.44-2.12-2.12a1.5 1.5 0 0 0-1.061-.44H4.5A2.25 2.25 0 0 0 2.25 6v12a2.25 2.25 0 0 0 2.25 2.25h15A2.25 2.25 0 0 0 21.75 18V9a2.25 2.25 0 0 0-2.25-2.25h-5.379a1.5 1.5 0 0 1-1.06-.44Z" />
                     </svg>
                 </button>
-                <div class="dropdown-menu min-w-[10rem] right-0 left-auto" data-dropdown-menu>
-                    <div class="dropdown-options" data-dropdown-options>
+                <div class="dropdown-menu" style="left: auto; right: 0; min-width: 12rem; overflow: visible;" data-dropdown-menu>
+                    <div class="dropdown-options" style="overflow-x: hidden;" data-dropdown-options>
                         {% for folder in folders %}
-                        <button type="button" class="dropdown-option whitespace-nowrap" hx-put="/mail/webmail/email/{{ email.ID }}/move" hx-vals='{"folder_id": {{ folder.ID }}}' hx-swap="none" data-dropdown-option data-value="{{ folder.ID }}" data-label="{{ folder.Name }}">
-                            <p class="text-sm text-zinc-200">{{ folder.Name }}</p>
+                        <button type="button" class="dropdown-option" hx-put="/mail/webmail/email/{{ email.ID }}/move" hx-vals='{"folder_id": {{ folder.ID }}}' hx-swap="none" data-dropdown-option data-value="{{ folder.ID }}" data-label="{{ folder.Name }}">
+                            <p class="text-sm text-zinc-200 whitespace-nowrap">{{ folder.Name }}</p>
                         </button>
                         {% endfor %}
                     </div>