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;
 }
 

app/templates_src/chats.lisp

@@ -22,7 +22,7 @@
     (div
         ("class" "card surface w_full flex justify_between items_center gap_2")
         (a
-            ("class" "flush flex gap_ch items_center {% if not user.id in chat[0].last_message_read_by -%} yellow {%- endif %}")
+            ("class" "flush flex gap_ch items_center flex_wrap {% if not user.id in chat[0].last_message_read_by -%} yellow {%- endif %}")
             ("href" "/chats/{{ chat[0].id }}")
             (text "{{ components::chat_name(chat=chat[0], members=chat[1], advanced=true) }}"))
         (div

app/templates_src/components.lisp

@@ -112,6 +112,7 @@
 (text "{% if replying_to -%}")
 (div
     ("class" "message_reply_wrapper")
+    ("id" "message_{{ message.id }}_reply")
     (text "{{ self::message(message=replying_to, hide_actions=true) }}"))
 (text "{%- endif %}")
 (text "{%- endmacro %}")

app/templates_src/root.lisp

@@ -112,8 +112,7 @@
         (article
             ("class" "content_container flex flex_col")
             ("id" "page")
-            (ul ("id" "messages"))
+            (ul ("class" "hidden") ("id" "messages"))
-            (text "{% block body %}{% endblock %}")
+            (text "{% block body %}{% endblock %}"))
-            (div ("style" "min-height: 32px")))
 
         (script (text "setTimeout(() => init_dropdowns(document.body), 150);"))))