dnd: Restore tooltip visibility after duration selection and improve dropdown styling.

Ensures that the DND tooltip remains usable after selecting a duration. Updated styles to better match Zulip's dark theme (rounded corners, shadows, etc.).

Fixes #561.

Author: lolostheman

app/renderer/css/main.css

@@ -381,22 +381,26 @@ webview.focus {
 .dropdown {
   position: absolute;
   left: 60px;
-  background-color: rgb(44 44 44 / 100%);
-  border: 1px solid rgb(68 68 68 / 100%);
-  color: rgb(255 255 255 / 100%);
-  z-index: 10;
-  padding: 5px 0;
-  font-size: 14px;
+  background-color: rgb(32 33 36 / 100%); /* closer to Zulip's sidebars */
+  border: 1px solid rgb(60 60 60 / 100%);
+  border-radius: 8px;
+  color: rgb(240 240 240 / 100%);
+  z-index: 1000;
+  padding: 4px 0;
+  font-size: 13px;
+  font-family: arial, sans-serif;
   min-width: 150px;
+  box-shadow: 0 4px 12px rgb(0 0 0 / 40%);
 }
 
 .dropdown div {
-  padding: 6px 12px;
+  padding: 8px 16px;
   cursor: pointer;
+  transition: background-color 0.15s ease;
 }
 
 .dropdown div:hover {
-  background-color: rgb(68 68 68 / 100%);
+  background-color: rgb(60 60 60 / 100%);
 }
 
 #loading-tooltip::after,

app/renderer/js/main.ts

@@ -454,6 +454,7 @@ export class ServerManagerView {
       this.$dndTooltip.classList.add("hidden");
       dropdown?.addEventListener("mouseleave", () => {
         dropdown.classList.add("hidden");
+        this.$dndTooltip.classList.remove("hidden");
       });
     });
     const dropdownItems = document.querySelectorAll("#dnd-dropdown div");
@@ -1229,7 +1230,7 @@ window.addEventListener("load", async () => {
             >
           </div>
           <div id="dnd-dropdown" class="dropdown hidden">
-            <div data-minutes="1">1 minute</div>
+            <div data-minutes="30">30 minutes</div>
             <div data-minutes="60">1 hour</div>
             <div data-minutes="180">3 hours</div>
             <div data-minutes="720">12 hours</div>