apunkt/SurfSense
1
0
Fork 0
mirror of https://github.com/MODSetter/SurfSense.git synced 2026-05-15 18:25:18 +02:00
Code Issues Projects Releases Packages Wiki Activity Actions 1

fix(web): improve comment thread layout

Browse source
This commit is contained in:
CREDO23 2026-01-16 11:10:54 +02:00
parent 66275f1b53
commit d719370dc2
2 changed files with 15 additions and 20 deletions
Download patch file Download diff file Expand all files Collapse all files

4
surfsense_web/components/chat-comments/comment-panel/comment-panel.tsx
View file

@ -32,7 +32,7 @@ export function CommentPanel({
if (isLoading) { if (isLoading) {
return ( return (
<div className="flex min-h-[120px] w-80 items-center justify-center rounded-lg border bg-card p-4"> <div className="flex min-h-[120px] w-96 items-center justify-center rounded-lg border bg-card p-4">
<div className="flex items-center gap-2 text-sm text-muted-foreground"> <div className="flex items-center gap-2 text-sm text-muted-foreground">
<div className="size-4 animate-spin rounded-full border-2 border-current border-t-transparent" /> <div className="size-4 animate-spin rounded-full border-2 border-current border-t-transparent" />
Loading comments... Loading comments...
@ -44,7 +44,7 @@ export function CommentPanel({
const hasThreads = threads.length > 0; const hasThreads = threads.length > 0;
return ( return (
<div className="flex w-80 flex-col rounded-lg border bg-card"> <div className="flex w-96 flex-col rounded-lg border bg-card">
{hasThreads ? ( {hasThreads ? (
<div <div
className="overflow-y-auto" className="overflow-y-auto"

23
surfsense_web/components/chat-comments/comment-thread/comment-thread.tsx
View file

@ -53,17 +53,8 @@ export function CommentThread({
onDelete={onDeleteComment} onDelete={onDeleteComment}
/> />
<div className="ml-11 flex items-center gap-2">
<Button
variant="outline"
size="sm"
className="h-7 px-3 text-xs"
onClick={handleReply}
>
<MessageSquare className="mr-1.5 size-3" />
Reply
</Button>
{thread.replies.length > 1 && ( {thread.replies.length > 1 && (
<div className="ml-11">
<Button <Button
variant="ghost" variant="ghost"
size="sm" size="sm"
@ -77,8 +68,8 @@ export function CommentThread({
)} )}
{thread.replies.length} replies {thread.replies.length} replies
</Button> </Button>
)}
</div> </div>
)}
{thread.replies.length > 0 && (thread.replies.length === 1 || isRepliesExpanded) && ( {thread.replies.length > 0 && (thread.replies.length === 1 || isRepliesExpanded) && (
<div className="ml-11 space-y-3"> <div className="ml-11 space-y-3">
@ -94,8 +85,8 @@ export function CommentThread({
</div> </div>
)} )}
{isReplyComposerOpen && (
<div className="ml-11"> <div className="ml-11">
{isReplyComposerOpen ? (
<CommentComposer <CommentComposer
members={members} members={members}
membersLoading={membersLoading} membersLoading={membersLoading}
@ -106,9 +97,13 @@ export function CommentThread({
onCancel={handleReplyCancel} onCancel={handleReplyCancel}
autoFocus autoFocus
/> />
</div> ) : (
<Button variant="outline" size="sm" className="h-7 px-3 text-xs" onClick={handleReply}>
<MessageSquare className="mr-1.5 size-3" />
Reply
</Button>
)} )}
</div> </div>
</div>
); );
} }