styling fixes

src/components/Bars.tsx

@@ -171,7 +171,7 @@ export function RightBarContent() {
 }
 
 export function LeftBar() {
-  const { leftBarSize, leftBarVisible, setLeftBarVisible } = useBars();
+  const { leftBarVisible, setLeftBarVisible } = useBars();
   let ref: HTMLDivElement | undefined;
 
   const [recentPosts, setRecentPosts] = createSignal<any[] | undefined>(
@@ -293,14 +293,14 @@ export function LeftBar() {
       tabindex="-1"
       ref={ref}
       aria-label="Main navigation"
-      class="border-r-overlay2 bg-base fixed z-50 h-dvh w-min border-r-2 transition-transform duration-500 ease-out"
+      class="border-r-overlay2 bg-base fixed z-50 h-dvh border-r-2 transition-transform duration-500 ease-out"
       classList={{
         "-translate-x-full": !leftBarVisible(),
         "translate-x-0": leftBarVisible()
       }}
       style={{
         "transition-timing-function": "cubic-bezier(0.4, 0, 0.2, 1)",
-        "min-width": "250px",
+        width: "250px",
         "box-shadow": "inset -6px 0 16px -6px rgba(0, 0, 0, 0.1)",
         "padding-top": "env(safe-area-inset-top)",
         "padding-bottom": "env(safe-area-inset-bottom)"
@@ -477,14 +477,14 @@ export function RightBar() {
     <aside
       ref={ref}
       aria-label="Links and activity"
-      class="border-l-overlay2 bg-base fixed right-0 z-50 hidden h-dvh w-fit border-l-2 transition-transform duration-500 ease-out md:block md:max-w-[20%]"
+      class="border-l-overlay2 bg-base fixed right-0 z-50 hidden h-dvh w-fit border-l-2 transition-transform duration-500 ease-out md:block"
       classList={{
         "translate-x-full": !rightBarVisible(),
         "translate-x-0": rightBarVisible()
       }}
       style={{
         "transition-timing-function": "cubic-bezier(0.4, 0, 0.2, 1)",
-        "min-width": "250px",
+        width: "250px",
         "box-shadow": "inset 6px 0 16px -6px rgba(0, 0, 0, 0.1)",
         "padding-top": "env(safe-area-inset-top)",
         "padding-bottom": "env(safe-area-inset-bottom)"

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)"