fix: minor ui issues

app/public/app.js

@@ -71,6 +71,7 @@ function check_message() {
     const message_good = get_cookie("App-Message-Good") === "true";
 
     if (message) {
+        element.classList.remove("hidden");
         element.style.marginBottom = "1rem";
         element.style.paddingLeft = "1rem";
         element.innerHTML = `<li class="${message_good ? "green" : "red"}">${message.replaceAll('"', "")}</li>`;
@@ -85,6 +86,7 @@ function check_message() {
 
 globalThis.show_message = (message, message_good = true) => {
     const element = document.getElementById("messages");
+    element.classList.remove("hidden");
     element.style.marginBottom = "1rem";
     element.style.paddingLeft = "1rem";
     element.innerHTML = `<li class="${message_good ? "green" : "red"}">${message.replaceAll('"', "")}</li>`;

app/public/messages.js

@@ -121,6 +121,10 @@ function sock_con() {
             if (document.getElementById(`message_${msg.body}`)) {
                 document.getElementById(`message_${msg.body}`).remove();
             }
+
+            if (document.getElementById(`message_${msg.body}_reply`)) {
+                document.getElementById(`message_${msg.body}_reply`).remove();
+            }
         } else if (msg.method === "MessageUpdate") {
             const [id, content] = JSON.parse(msg.body);
             document.getElementById(`${id}_body`).innerHTML =

app/public/style.css

@@ -135,6 +135,10 @@ nav.sticky {
     top: 0;
 }
 
+nav:not(.sticky) {
+    padding: var(--pad-1);
+}
+
 @media screen and (max-width: 900px) {
     main,
     article,
@@ -254,7 +258,7 @@ video {
     position: relative;
 }
 
-.button:not(nav *, .tab, .dropdown .inner *, .square) {
+.button:not(.tab, .dropdown .inner *, .square) {
     border-radius: var(--radius);
 }
 
@@ -349,10 +353,12 @@ video {
     color: inherit;
     position: absolute;
     z-index: 2;
-    top: 100%;
+    top: calc(100% + 5px);
     right: 0;
     width: max-content;
     max-width: 15rem;
+    border-radius: var(--radius);
+    overflow: hidden;
 }
 
 .dropdown .inner.surface {
@@ -394,6 +400,10 @@ video {
     right: unset;
 }
 
+nav .dropdown .inner {
+    top: calc(100% + var(--pad-3));
+}
+
 /* input */
 input,
 textarea,
@@ -819,7 +829,8 @@ menu.col {
 }
 
 .message:hover .dropdown.hidden,
-.message:focus .dropdown.hidden {
+.message:focus .dropdown.hidden,
+.message:has(.open) .dropdown.hidden {
     display: flex !important;
 }