Changeset e25438a in Klonkt

Timestamp:

06/21/2026 06:52:12 PM (3 months ago)

Author:

roboburr <roboburr@…>

Branches:

main

Children:

c1b757d

Parents:

9a34d31

Message:

fix(comments): reply form closed until REPLY click + DELETE pixel-perfectly aligned

(1) .comment-reply-form{display:flex} overrode the [hidden] attribute -> the
form was always open. Now .comment-reply-form[hidden]{display:none} so it only
opens after clicking REPLY (the toggle JS already set .hidden).
(2) DELETE was in a <form style=display:inline> -> slightly different alignment
from REPLY. Now .comment-actions form{display:contents} (+ inline style removed)
-> both are identical flex siblings with equal gap/baseline.

Co-Authored-By: Claude <noreply@…>

File:

• src/views/pages/post.ejs (modified) (3 diffs)

src/views/pages/post.ejs

@@ -116 +116 @@
                 <% } %>
                 <% if (user && permissions.canDeleteComment(user, c, site)) { %>
-                  <form method="post" action="<%= _base %>/comments/<%= c.id %>/delete" style="display:inline" onsubmit="return confirm('<%= t('comments.delete_confirm') %>')">
+                  <form method="post" action="<%= _base %>/comments/<%= c.id %>/delete" onsubmit="return confirm('<%= t('comments.delete_confirm') %>')">
                     <button type="submit" class="comment-delete-btn"><%= t('comments.delete') %></button>
                   </form>
@@ -158 +158 @@
                           <% } %>
                           <% if (user && permissions.canDeleteComment(user, r, site)) { %>
-                            <form method="post" action="<%= _base %>/comments/<%= r.id %>/delete" style="display:inline" onsubmit="return confirm('<%= t('comments.delete_confirm') %>')">
+                            <form method="post" action="<%= _base %>/comments/<%= r.id %>/delete" onsubmit="return confirm('<%= t('comments.delete_confirm') %>')">
                               <button type="submit" class="comment-delete-btn"><%= t('comments.delete') %></button>
                             </form>
@@ -431 +431 @@
 .comment-form button { align-self: flex-start; }
 .comment-reply-form-actions { display: flex; gap: 0.5rem; }
+/* Reply-formulier pas tonen NA klik op REPLY. De display:flex hierboven overschreef
+   anders het [hidden]-attribuut → formulier stond altijd open. */
+.comment-reply-form[hidden] { display: none; }
+/* DELETE-knop zit in een <form>; display:contents laat 'm als directe flex-sibling
+   van REPLY meedoen → pixel-perfecte uitlijning + gelijke gap. */
+.comment-actions form { display: contents; }
 
 .comments-login-cta { margin-top: 1.5rem; text-align: center; }