styling fixes

src/app.css

@@ -209,6 +209,7 @@
   transition-duration: 500ms;
   syntax: "*";
   inherits: false;
+  scrollbar-gutter: stable;
 }
 
 ::selection {

src/app.tsx

@@ -164,7 +164,7 @@ function AppLayout(props: { children: any }) {
     <>
       <div class="flex max-w-screen flex-row">
         <LeftBar />
-        <div class="bg-base relative h-screen w-screen overflow-x-hidden overflow-y-scroll md:ml-62.5 md:w-[calc(100vw-500px)]">
+        <div class="bg-base relative h-screen w-screen overflow-x-hidden overflow-y-auto md:ml-62.5 md:w-[calc(100vw-500px)]">
           <noscript>
             <div class="bg-yellow text-crust border-text fixed top-0 z-150 border-b-2 p-4 text-center font-semibold md:w-[calc(100vw-500px)]">
               JavaScript is disabled. Features will be limited.

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 {
+import { createSignal, createEffect, For, Show } from "solid-js";
-  createSignal,
-  createEffect,
-  For,
-  Show,
-  onMount,
-  onCleanup
-} from "solid-js";
-import { useLocation } from "@solidjs/router";
 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)"

src/routes/blog/[title]/index.tsx

@@ -321,7 +321,7 @@ export default function PostPage() {
                                   return tagValue ? (
                                     <A
                                       href={`/blog?include=${encodeURIComponent(tagValue.split("#")[1])}`}
-                                      class="group bg-rosewater relative m-1 h-fit w-fit rounded-xl px-2 py-1 text-sm transition-all duration-200 hover:brightness-110 active:scale-95"
+                                      class="group bg-teal relative m-1 h-fit w-fit rounded-xl px-2 py-1 text-sm transition-all duration-200 hover:brightness-110 active:scale-95"
                                     >
                                       <div class="text-white">{tagValue}</div>
                                     </A>

src/types/comment.ts

@@ -210,6 +210,7 @@ export interface CommentDeletionPromptProps {
     deletionType: DeletionType
   ) => void;
   commentDeletionLoading: boolean;
+  onClose: () => void;
   commenterImage?: string;
   commenterEmail?: string;
   commenterDisplayName?: string;
@@ -220,6 +221,7 @@ export interface EditCommentModalProps {
   commentBody: string;
   editComment: (body: string, comment_id: number) => Promise<void>;
   editCommentLoading: boolean;
+  onClose: () => void;
   commenterImage?: string;
   commenterEmail?: string;
   commenterDisplayName?: string;