refactor(comments): tidy comments panel header and quote layout

- Merge the comments side-panel header into the Open/Resolved tab row,
  then drop the now-redundant "Comments" title; the panel keeps its
  accessible name via the AppShell.Aside aria-label.
- Overlay the close (X) button on the right of the tab row and nudge it
  up 4px to align with the tab labels; the tab list stays full-width so
  its bottom border line is preserved. The toc/details tabs keep their
  existing shared header and scroll area unchanged.
- Quote block (.textSelection): increase top margin (2px -> 8px) so it
  no longer sticks to the timestamp when it is the first block, and add
  margin-left: 6px so the quote's left bar lines up with the comment
  body text left edge.

apps/client/src/components/layouts/global/aside.tsx

@@ -27,9 +27,7 @@ export default function Aside() {
 
   switch (tab) {
     case "comments":
-      component = (
-        <CommentListWithTabs title={t("Comments")} onClose={closeAside} />
-      );
+      component = <CommentListWithTabs onClose={closeAside} />;
       title = "Comments";
       break;
     case "toc":

apps/client/src/features/comment/components/comment-list-with-tabs.tsx

@@ -11,7 +11,6 @@ import {
   Badge,
   Text,
   ScrollArea,
-  Title,
   Tooltip,
 } from "@mantine/core";
 import CommentListItem from "@/features/comment/components/comment-list-item";
@@ -34,11 +33,10 @@ import { currentUserAtom } from "@/features/user/atoms/current-user-atom";
 import { CustomAvatar } from "@/components/ui/custom-avatar.tsx";
 
 interface CommentListWithTabsProps {
-  title?: string;
   onClose?: () => void;
 }
 
-function CommentListWithTabs({ title, onClose }: CommentListWithTabsProps) {
+function CommentListWithTabs({ onClose }: CommentListWithTabsProps) {
   const { t } = useTranslation();
   const { pageSlug } = useParams();
   const { data: page } = usePageQuery({ pageId: extractPageSlugId(pageSlug) });
@@ -201,29 +199,8 @@ function CommentListWithTabs({ title, onClose }: CommentListWithTabsProps) {
           overflow: "hidden",
         }}
       >
-        {/* Single header row: a full-width centered tab list with the panel
-            title overlaid on the left and the close button on the right.
-            Title/close are kept OUTSIDE Tabs.List (which is role="tablist")
-            so the tablist only owns role="tab" children — the tab list still
-            spans full width, so its bottom border line stays full-width. */}
+        {/* Header row: full-width centered tab list with the close button overlaid on the right. */}
         <div style={{ position: "relative" }}>
-          {title && (
-            <Title
-              order={2}
-              size="h6"
-              fw={500}
-              style={{
-                position: "absolute",
-                left: 0,
-                top: "50%",
-                transform: "translateY(-50%)",
-                // Non-interactive heading must not intercept clicks meant for the row.
-                pointerEvents: "none",
-              }}
-            >
-              {title}
-            </Title>
-          )}
           <Tabs.List justify="center">
             <Tabs.Tab
               value="open"
@@ -257,7 +234,8 @@ function CommentListWithTabs({ title, onClose }: CommentListWithTabsProps) {
                   position: "absolute",
                   right: 0,
                   top: "50%",
-                  transform: "translateY(-50%)",
+                  // Nudge the close button slightly up to align with the tab labels.
+                  transform: "translateY(calc(-50% - 4px))",
                 }}
               >
                 <IconX size={18} />

apps/client/src/features/comment/components/comment.module.css

@@ -3,7 +3,12 @@
 }
 
 .textSelection {
-    margin-top: 2px;
+    /* Breathing room below the comment header (author + timestamp) so the
+       quote does not stick to the timestamp when it is the first block. */
+    margin-top: 8px;
+    /* Align the quote's left bar with the comment body text left edge
+       (the comment editor insets its text by 6px). */
+    margin-left: 6px;
     border-left: 2px solid var(--mantine-color-gray-6);
     padding: 6px;
     background: var(--mantine-color-gray-light);