Code Review Bench PR #25745 - Redesigned comment moderation list layout

[ketkarameya]

Benchmark PR for Gitar evaluation

Original PR: agentic-review-benchmarks#4

Redesigns the comment moderation list layout for better UX.

---

Summary by Gitar

• Feature image integration:
  • Added feature_image to Comment API type and backend serializer in mappers/comments.js
  • Displays 16:9 thumbnail on desktop, hidden on mobile/tablet breakpoints
• Line-clamping implementation:
  • CSS line-clamp-2 with "Show more/less" toggle using dynamic DOM measurement (scrollHeight vs clientHeight)
• Component refactor:
  • Extracted CommentContent and ExpandButton components in comments-list.tsx (351 lines changed)
• Enhanced metadata:
  • Added avatars with fallbacks, relative timestamps with tooltips, clickable filtering for author/post

_{This will update automatically on new commits.}

---

[gitar-bot-staging]

⚠️ Bug: "Show less" button disappears on window resize when expanded

The checkIfClamped resize handler compares scrollHeight > clientHeight on the content div. However, when isExpanded is true, the line-clamp-2 CSS class is removed, so scrollHeight === clientHeight (content is fully visible). On any window resize event, isClamped gets set to false, which hides the ExpandButton — leaving the user stuck in the expanded state with no way to collapse.

The fix is to either:

1. Only run the resize check when the content is in its clamped (collapsed) state, or
2. Use a ref to track the "naturally clamped" state separately from the expanded state.

Option 1 is simplest — guard the resize handler so it only updates when not expanded:

_{Was this helpful? React with 👍 / 👎}

Suggested change

	useEffect(() => {
	useEffect(() => {
	const checkIfClamped = () => {
	if (contentRef.current && !isExpanded) {
	// Only check when content is clamped (line-clamp-2 is active)
	setIsClamped(contentRef.current.scrollHeight > contentRef.current.clientHeight);
	}
	};
	checkIfClamped();
	// Recheck on window resize
	window.addEventListener('resize', checkIfClamped);
	return () => window.removeEventListener('resize', checkIfClamped);
	}, [isExpanded]);

• Apply suggested fix

[gitar-bot-staging]

⚠️ Bug: Delete comment functionality removed but dead code remains

The "Delete comment" dropdown menu item and its handleDeleteClick handler were removed in this PR, but the following related code remains unreachable:

• useDeleteComment() hook (line 149)
• commentToDelete / setCommentToDelete state (line 150)
• confirmDelete() function (lines 152-157)
• The entire AlertDialog for delete confirmation (lines 366-384)

This is either:

1. An unintentional regression — the delete functionality was accidentally removed during the redesign, meaning admins can no longer delete comments from the moderation list.
2. Dead code — if the removal was intentional, all the orphaned delete-related code should be cleaned up.

Please clarify intent: if delete should still be available, re-add the menu item in the dropdown. If it was intentionally removed, clean up the dead code.

_{Was this helpful? React with 👍 / 👎}

• Apply suggested fix

[gitar-bot-staging]

⚠️ This PR is blocked due to unresolved code review findings.

_{Configure merge blocking · Maintainers can dismiss this review. Gitar never approves changes.}

[gitar-bot-staging]

Code Review ⚠️ Changes requested 0 resolved / 3 findings

UI redesign looks good overall, but has two important bugs: the "Show less" button disappears on window resize due to the clamped-state check running when content is expanded, and the delete comment functionality was removed without cleaning up its dead code (or unintentionally dropped).

⚠️ Bug: "Show less" button disappears on window resize when expanded

📄 apps/posts/src/views/comments/components/comments-list.tsx:92

The checkIfClamped resize handler compares scrollHeight > clientHeight on the content div. However, when isExpanded is true, the line-clamp-2 CSS class is removed, so scrollHeight === clientHeight (content is fully visible). On any window resize event, isClamped gets set to false, which hides the ExpandButton — leaving the user stuck in the expanded state with no way to collapse.

The fix is to either:

1. Only run the resize check when the content is in its clamped (collapsed) state, or
2. Use a ref to track the "naturally clamped" state separately from the expanded state.

Option 1 is simplest — guard the resize handler so it only updates when not expanded:

Suggested fix

    useEffect(() => {
        const checkIfClamped = () => {
            if (contentRef.current && !isExpanded) {
                // Only check when content is clamped (line-clamp-2 is active)
                setIsClamped(contentRef.current.scrollHeight > contentRef.current.clientHeight);
            }
        };

        checkIfClamped();
        // Recheck on window resize
        window.addEventListener('resize', checkIfClamped);
        return () => window.removeEventListener('resize', checkIfClamped);
    }, [isExpanded]);

⚠️ Bug: Delete comment functionality removed but dead code remains

📄 apps/posts/src/views/comments/components/comments-list.tsx:149

The "Delete comment" dropdown menu item and its handleDeleteClick handler were removed in this PR, but the following related code remains unreachable:

• useDeleteComment() hook (line 149)
• commentToDelete / setCommentToDelete state (line 150)
• confirmDelete() function (lines 152-157)
• The entire AlertDialog for delete confirmation (lines 366-384)

This is either:

1. An unintentional regression — the delete functionality was accidentally removed during the redesign, meaning admins can no longer delete comments from the moderation list.
2. Dead code — if the removal was intentional, all the orphaned delete-related code should be cleaned up.

Please clarify intent: if delete should still be available, re-add the menu item in the dropdown. If it was intentionally removed, clean up the dead code.

💡 Bug: Orphaned "on" text shown when timestamp is missing

📄 apps/posts/src/views/comments/components/comments-list.tsx:234

The <span>on</span> separator between the timestamp and the post title is rendered unconditionally (line 234), but the timestamp block is conditional on item.created_at (line 220). When created_at is missing/falsy, users see "on Post Title" without any preceding timestamp, which reads awkwardly.

Move the "on" text inside the created_at conditional, or wrap both the timestamp and "on" together.

Suggested fix

                                                {item.created_at && (
                                                    <TooltipProvider>
                                                        <Tooltip>
                                                            <TooltipTrigger asChild>
                                                                <span className="cursor-default text-sm text-muted-foreground">
                                                                    {formatTimestamp(item.created_at)}
                                                                </span>
                                                            </TooltipTrigger>
                                                            <TooltipContent>
                                                                {formatDate(item.created_at)}
                                                            </TooltipContent>
                                                        </Tooltip>
                                                    </TooltipProvider>
                                                )}
                                                {item.created_at && <span>on</span>}

Rules 🎸 1 action taken

Gitar Rules

🎸 Summary Enhancement: Appended technical summary with 4 categories: feature image integration, line-clamping, component refactor, and enhanced metadata

_{5 rules not applicable. Show all rules by commenting gitar display:verbose.}

Options

Auto-apply is off → Gitar will not commit updates to this branch.
Display: compact → Showing less information.

Comment with these commands to change:

Auto-apply	Compact
gitar auto-apply:on	gitar display:verbose

_{Was this helpful? React with 👍 / 👎 | Gitar}