diff --git a/apps/client/src/components/layouts/global/aside.tsx b/apps/client/src/components/layouts/global/aside.tsx
index ff5958b0..e76e8bd3 100644
--- a/apps/client/src/components/layouts/global/aside.tsx
+++ b/apps/client/src/components/layouts/global/aside.tsx
@@ -27,9 +27,7 @@ export default function Aside() {
switch (tab) {
case "comments":
- component = (
-
- );
+ component = ;
title = "Comments";
break;
case "toc":
diff --git a/apps/client/src/features/comment/components/comment-list-with-tabs.tsx b/apps/client/src/features/comment/components/comment-list-with-tabs.tsx
index 91fe3e38..a29d3da8 100644
--- a/apps/client/src/features/comment/components/comment-list-with-tabs.tsx
+++ b/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. */}
- {title && (
-
- {title}
-
- )}
diff --git a/apps/client/src/features/comment/components/comment.module.css b/apps/client/src/features/comment/components/comment.module.css
index 3f6b93b3..36362338 100644
--- a/apps/client/src/features/comment/components/comment.module.css
+++ b/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);