styling fixes

src/components/blog/CommentBlock.tsx

@@ -1,12 +1,4 @@
-import {
-  createSignal,
-  createEffect,
-  For,
-  Show,
-  onMount,
-  onCleanup
-} from "solid-js";
-import { useLocation } from "@solidjs/router";
+import { createSignal, createEffect, For, Show } from "solid-js";
 import type {
   CommentBlockProps,
   CommentReaction,
@@ -23,8 +15,6 @@ import CommentInputBlock from "./CommentInputBlock";
 import ReactionBar from "./ReactionBar";
 
 export default function CommentBlock(props: CommentBlockProps) {
-  const location = useLocation();
-
   const [commentCollapsed, setCommentCollapsed] = createSignal(false);
   const [showingReactionOptions, setShowingReactionOptions] =
     createSignal(false);
@@ -92,6 +82,8 @@ export default function CommentBlock(props: CommentBlockProps) {
 
   const deleteCommentTrigger = async (e: MouseEvent) => {
     e.stopPropagation();
+    console.log("Delete comment");
+
     setDeletionLoading(true);
     const user = userData();
     props.toggleModification(
@@ -270,7 +262,7 @@ export default function CommentBlock(props: CommentBlockProps) {
 
                 {/* Delete button */}
                 <Show when={canDelete()}>
-                  <button onClick={deleteCommentTrigger}>
+                  <button class="z-100" onClick={deleteCommentTrigger}>
                     <Show
                       when={!deletionLoading()}
                       fallback={<LoadingSpinner height={24} width={24} />}

src/components/blog/CommentDeletionPrompt.tsx

@@ -37,11 +37,6 @@ export default function CommentDeletionPrompt(
     } else if (fullDeleteChecked()) {
       deleteType = "database";
     }
-    console.log("[CommentDeletionPrompt] Calling deleteComment:", {
-      commentID: props.commentID,
-      commenterID: props.commenterID,
-      deleteType
-    });
     props.deleteComment(props.commentID, props.commenterID, deleteType);
   };
 
@@ -55,7 +50,7 @@ export default function CommentDeletionPrompt(
           id="delete_prompt"
           class="fade-in bg-red rounded-md px-8 py-4 shadow-lg brightness-110"
         >
-          <button class="absolute right-4" onClick={() => {}}>
+          <button class="fixed right-4" onClick={() => props.onClose()}>
             <Xmark strokeWidth={0.5} color="white" height={50} width={50} />
           </button>
           <div class="py-4 text-center text-3xl tracking-wide">

src/components/blog/CommentSectionWrapper.tsx

@@ -645,6 +645,10 @@ export default function CommentSectionWrapper(
             privilegeLevel={props.privilegeLevel}
             commentDeletionLoading={commentDeletionLoading()}
             deleteComment={deleteComment}
+            onClose={() => {
+              setShowingDeletionPrompt(false);
+              clearModificationPrompt();
+            }}
           />
         </div>
       </Show>
@@ -659,6 +663,10 @@ export default function CommentSectionWrapper(
             commenterDisplayName={commenterDisplayNameForModification()}
             editCommentLoading={editCommentLoading()}
             editComment={editComment}
+            onClose={() => {
+              setShowingCommentEdit(false);
+              clearModificationPrompt();
+            }}
           />
         </div>
       </Show>

src/components/blog/EditCommentModal.tsx

@@ -27,7 +27,7 @@ export default function EditCommentModal(props: EditCommentModalProps) {
           id="edit_prompt"
           class="fade-in bg-surface1 z-50 rounded-md px-8 py-4 shadow-lg"
         >
-          <button class="absolute right-4" onClick={() => {}}>
+          <button class="absolute right-4" onClick={() => props.onClose()}>
             <Xmark
               strokeWidth={0.5}
               color="var(--color-text)"