🐛 Fixed comment thread connector lines occasionally appearing doubled

[luissazevedo]

• The vertical lines linking nested replies were rendered as 1px-wide divs filled with a background colour. At certain DPI scales and zoom levels browsers painted these 2-3px wide, which gave the appearance of two parallel lines next to the cleanly-rendered elbow connectors.
• Switched the lines to use border-l, the same render path the elbow connectors already use, so reply, continuation and elbow lines all align on whole-pixel boundaries and render consistently.

[coderabbitai]

No actionable comments were generated in the recent review. 🎉

ℹ️ Recent review info

⚙️ Run configuration

Configuration used: Path: .coderabbit.yaml

Review profile: CHILL

Plan: Pro

Run ID: 5f2cbb41-1ecd-490f-9220-96a98f2f3bb7

📥 Commits

Reviewing files that changed from the base of the PR and between 044548d and 39b0277.

📒 Files selected for processing (1)

• apps/comments-ui/package.json

✅ Files skipped from review due to trivial changes (1)

• apps/comments-ui/package.json

---

Walkthrough

This PR updates the visual styling of threaded comment reply connector lines in the comments UI component. Three connector line elements—the reply form continuation line, the replies threading line, and the left-side connector in reply layout—were changed from a fixed-width background (w-px) approach to a border-based approach (border-l). The updates include responsive dark mode styling (dark:border-neutral-700) and inset positioning (inset-y-0) for absolutely positioned elements. The apps/comments-ui package version was bumped from 1.5.1 to 1.5.2.

Possibly related PRs

• TryGhost/Ghost#27962: Updates the same comment.tsx file to refactor threaded reply "connector/elbow" visuals with border-based styling and conditional layout behavior.
• TryGhost/Ghost#27847: Adjusts threaded-mode rendering and layout logic in comment.tsx, which affects the same reply-thread visuals modified here.

🚥 Pre-merge checks | ✅ 5

✅ Passed checks (5 passed)

Check name	Status	Explanation
Title check	✅ Passed	The title clearly summarizes the main change: fixing comment thread connector lines appearing doubled, which matches the UI styling updates in comment.tsx.
Description check	✅ Passed	The description is directly related to the changeset, explaining the problem (1px-wide divs appearing 2-3px at certain scales) and the solution (switching to border-left), which aligns with the comment.tsx modifications.
Docstring Coverage	✅ Passed	No functions found in the changed files to evaluate docstring coverage. Skipping docstring coverage check.
Linked Issues check	✅ Passed	Check skipped because no linked issues were found for this pull request.
Out of Scope Changes check	✅ Passed	Check skipped because no linked issues were found for this pull request.

_{✏️ Tip: You can configure your own custom pre-merge checks in the settings.}

✨ Finishing Touches

🧪 Generate unit tests (beta)

• Create PR with unit tests
• Commit unit tests in branch fix-doubled-thread-line-in-comments

---

Thanks for using CodeRabbit! It's free for OSS, and your support helps us grow. If you like it, consider giving us a shout-out.

❤️ Share

• X
• Mastodon
• Reddit
• LinkedIn

_{Comment @coderabbitai help to get the list of available commands and usage tips.}

[nx-cloud]

🤖 Nx Cloud AI Fix

Ensure the fix-ci command is configured to always run in your CI pipeline to get automatic fixes in future runs. For more information, please see https://nx.dev/ci/features/self-healing-ci

---

View your CI Pipeline Execution ↗ for commit 39b0277

Command	Status	Duration	Result
nx build @tryghost/comments-ui	✅ Succeeded	<1s	View ↗
nx build @tryghost/signup-form	✅ Succeeded	<1s	View ↗
nx build @tryghost/sodo-search	✅ Succeeded	<1s	View ↗
nx build @tryghost/announcement-bar	✅ Succeeded	<1s	View ↗
nx build @tryghost/portal	✅ Succeeded	<1s	View ↗
nx build @tryghost/activitypub	✅ Succeeded	1s	View ↗
nx run @tryghost/comments-ui:test:acceptance	✅ Succeeded	47s	View ↗
nx run-many -t test:unit -p @tryghost/comments-ui	✅ Succeeded	17s	View ↗
Additional runs (5)	✅ Succeeded	...	View ↗

---

☁️ Nx Cloud last updated this comment at 2026-05-26 13:09:02 UTC