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