fix(blog): ui improvements and comment layout fix by Adebesin-Cell · Pull Request #2139 · npmx-dev/npmx.dev

Adebesin-Cell · 2026-03-18T20:05:54Z

Summary

Reduced spacing in nested comments on mobile
Fixed blog content indentation alignment with header/authors
Fixed button-primary hover states in light mode
Fixed Bluesky embed icon positioning (equidistant from top/right edges)
Added hover effects for blog prose links
Reduced federated articles' hover shadow intensity
Fixed federated articles mobile alignment

Closes #2136, closes #2137

…-dev#2136, npmx-dev#2137) Redesign nested comments to use a flat, single-indent layout with collapsible reply threads. Fix blog content alignment, button hover states, Bluesky embed icon positioning, prose link hover effects, and federated articles shadow/alignment.

vercel · 2026-03-18T20:06:00Z

The latest updates on your projects. Learn more about Vercel for GitHub.

Project	Deployment	Actions	Updated (UTC)
npmx.dev	Ready	Preview, Comment	Mar 19, 2026 3:11am

2 Skipped Deployments

Project	Deployment	Actions	Updated (UTC)
docs.npmx.dev	Ignored	Preview	Mar 19, 2026 3:11am
npmx-lunaria	Ignored		Mar 19, 2026 3:11am

github-actions · 2026-03-18T20:06:51Z

Lunaria Status Overview

🌕 This pull request will trigger status changes.

Learn more

By default, every PR changing files present in the Lunaria configuration's files property will be considered and trigger status changes accordingly.

You can change this by adding one of the keywords present in the ignoreKeywords property in your Lunaria configuration file in the PR's title (ignoring all files) or by including a tracker directive in the merged commit's description.

Tracked Files

File	Note
i18n/locales/az-AZ.json	Localization changed, will be marked as complete.
i18n/locales/cs-CZ.json	Localization changed, will be marked as complete.
i18n/locales/de-DE.json	Localization changed, will be marked as complete.
i18n/locales/fr-FR.json	Localization changed, will be marked as complete.
i18n/locales/id-ID.json	Localization changed, will be marked as complete.
i18n/locales/ja-JP.json	Localization changed, will be marked as complete.
i18n/locales/pl-PL.json	Localization changed, will be marked as complete.
i18n/locales/ru-RU.json	Localization changed, will be marked as complete.
i18n/locales/tr-TR.json	Localization changed, will be marked as complete.
i18n/locales/zh-CN.json	Localization changed, will be marked as complete.

Warnings reference

Icon	Description
🔄️	The source for this localization has been updated since the creation of this pull request, make sure all changes in the source have been applied.

codecov · 2026-03-18T20:08:08Z

Codecov Report

❌ Patch coverage is 76.92308% with 3 lines in your changes missing coverage. Please review.
✅ All tests successful. No failed tests found.

Files with missing lines	Patch %	Lines
app/components/BlueskyComment.vue	70.00%	3 Missing ⚠️

📢 Thoughts on this report? Let us know!

…plies i18n key

coderabbitai · 2026-03-18T20:16:15Z

No actionable comments were generated in the recent review. 🎉

ℹ️ Recent review info

⚙️ Run configuration

Configuration used: Organization UI

Review profile: CHILL

Plan: Pro

Run ID: f961efdf-dba5-4c7e-978c-23fd7fa40240

📥 Commits

Reviewing files that changed from the base of the PR and between a334522 and 8ecca37.

📒 Files selected for processing (4)

app/components/BlueskyComment.vue
app/components/global/BlogPostFederatedArticles.vue
app/components/global/BlogPostWrapper.vue
app/components/global/BlueskyPostEmbed.client.vue

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

app/components/global/BlogPostFederatedArticles.vue

🚧 Files skipped from review as they are similar to previous changes (2)

app/components/global/BlogPostWrapper.vue
app/components/BlueskyComment.vue

📝 Walkthrough

Walkthrough

This pull request updates multiple blog-related Vue components and internationalisation files. The component changes address responsive layout adjustments, avatar presentation logic, spacing modifications, and hover styling for BlueskyComment, BlogPostFederatedArticles, BlogPostWrapper, and BlueskyPostEmbed. Additionally, the "more_replies" translation key across ten locale files (Azerbaijani, Czech, German, French, Indonesian, Japanese, Polish, Russian, Turkish, and Simplified Chinese) has been updated with revised wording and pluralisation variants.

Suggested labels

front

Suggested reviewers

alexdln

🚥 Pre-merge checks | ✅ 2 | ❌ 1

❌ Failed checks (1 inconclusive)

Check name	Status	Explanation	Resolution
Out of Scope Changes check	❓ Inconclusive	All changes are directly related to the linked issues. However, i18n locale file updates for more_replies translations appear tangential to the stated objectives.	Clarify whether the i18n locale updates are part of the comment redesign scope or should be separated into a distinct pull request.

✅ Passed checks (2 passed)

Check name	Status	Explanation
Description check	✅ Passed	The pull request description clearly outlines all major changes including spacing reductions, indentation fixes, hover states, icon positioning, and link effects.
Linked Issues check	✅ Passed	All coding requirements from `#2136` and `#2137` are addressed: indentation alignment, Bluesky button hover states, icon positioning, link hover effects, shadow intensity, and nested comment spacing reductions.

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

✨ Finishing Touches

🧪 Generate unit tests (beta)

Create PR with unit tests

📝 Coding Plan

Generate coding plan for human review 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

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

coderabbitai

🧹 Nitpick comments (2)

app/components/BlueskyCommentThread.vue (1)
38-38: Consider Vue 3.4+ same-name shorthand.

Since you're using Vue 3.5.30, you can simplify the binding using the same-name shorthand.
♻️ Suggested refactor
-    <BlueskyComment :comment="comment" />
+    <BlueskyComment :comment />
Based on learnings: "In Vue 3.4 and later, you can use same-name shorthand for attribute bindings: use :attributeName instead of :attributeName="attributeName" when binding to a variable with the same name in scope."
app/components/BlueskyComment.vue (1)

72-72: Remove the non-essential template comment at Line 72.

 is describing obvious markup and can be dropped to keep the template lean.

As per coding guidelines, “Add comments only to explain complex logic or non-obvious implementations.”

ℹ️ Review info

⚙️ Run configuration

Configuration used: Organization UI

Review profile: CHILL

Plan: Pro

Run ID: f8d84945-1caf-45be-ac18-ac342f8d79f9

📥 Commits

Reviewing files that changed from the base of the PR and between 5d8fcf5 and 49a5022.

📒 Files selected for processing (9)

app/components/BlueskyComment.vue
app/components/BlueskyCommentThread.vue
app/components/BlueskyComments.vue
app/components/Link/Base.vue
app/components/global/BlogPostFederatedArticles.vue
app/components/global/BlogPostWrapper.vue
app/components/global/BlueskyPostEmbed.client.vue
i18n/locales/en.json
i18n/schema.json

coderabbitai

Actionable comments posted: 2

ℹ️ Review info

⚙️ Run configuration

Configuration used: Organization UI

Review profile: CHILL

Plan: Pro

Run ID: 09bb1c82-0f32-4848-a2d7-06cc7d3bcfde

📥 Commits

Reviewing files that changed from the base of the PR and between 49a5022 and e3afaae.

📒 Files selected for processing (16)

i18n/locales/az-AZ.json
i18n/locales/cs-CZ.json
i18n/locales/de-DE.json
i18n/locales/en.json
i18n/locales/es.json
i18n/locales/fr-FR.json
i18n/locales/id-ID.json
i18n/locales/ja-JP.json
i18n/locales/pl-PL.json
i18n/locales/pt-BR.json
i18n/locales/ru-RU.json
i18n/locales/tr-TR.json
i18n/locales/uk-UA.json
i18n/locales/zh-CN.json
i18n/schema.json
test/unit/a11y-component-coverage.spec.ts

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

i18n/locales/uk-UA.json

🚧 Files skipped from review as they are similar to previous changes (2)

i18n/locales/en.json
i18n/schema.json

i18n/locales/pt-BR.json

test/unit/a11y-component-coverage.spec.ts

Nested comments use inline avatar on mobile (Medium-style) for full content width, and classic avatar-column on desktop. Each nesting level costs ~12px on mobile instead of ~44px, eliminating horizontal scroll. Removes BlueskyCommentThread in favor of recursive depth.

app/components/global/BlogPostFederatedArticles.vue

app/components/global/BlogPostWrapper.vue

app/components/global/BlueskyPostEmbed.client.vue

app/components/Link/Base.vue

app/components/BlueskyComment.vue

- Use hover:shadow-fg/5 for federated articles shadow - Scope prose link hover to exclude no-underline links - Add group hover for Bluesky icon (blue on card hover) - Revert button-primary hover to original accent style - Use separate class/v-bind for avatar shrink-0 - Fix pt-BR duplicate JSON keys from merge conflict

Adebesin-Cell added 2 commits March 18, 2026 21:05

fix(i18n): add comment thread i18n keys for view/hide replies

f649c3b

Adebesin-Cell changed the title ~~fix(blog): UI improvements and Instagram-style comment redesign~~ fix(blog):ui improvements and Instagram-style comment redesign Mar 18, 2026

Adebesin-Cell changed the title ~~fix(blog):ui improvements and Instagram-style comment redesign~~ fix(blog): ui improvements and Instagram-style comment redesign Mar 18, 2026

vercel bot deployed to Preview – npmx.dev March 18, 2026 20:08 View deployment

Merge branch 'main' into fix/blog-ui-and-comment-redesign

49a5022

vercel bot deployed to Preview – docs.npmx.dev March 18, 2026 20:11 View deployment

vercel bot deployed to Preview – npmx.dev March 18, 2026 20:11 View deployment

fix: add a11y skip for BlueskyCommentThread and remove unused more_re…

e3afaae

…plies i18n key

coderabbitai bot reviewed Mar 18, 2026

View reviewed changes

vercel bot deployed to Preview – npmx.dev March 18, 2026 20:19 View deployment

coderabbitai bot reviewed Mar 18, 2026

View reviewed changes

i18n/locales/pt-BR.json Outdated Show resolved Hide resolved

test/unit/a11y-component-coverage.spec.ts Outdated Show resolved Hide resolved

Adebesin-Cell and others added 2 commits March 18, 2026 21:38

[autofix.ci] apply automated fixes

a334522

Adebesin-Cell changed the title ~~fix(blog): ui improvements and Instagram-style comment redesign~~ fix(blog): ui improvements and comment layout fix Mar 18, 2026

vercel bot deployed to Preview – npmx.dev March 18, 2026 20:42 View deployment

alexdln reviewed Mar 18, 2026

View reviewed changes

Adebesin-Cell added 2 commits March 19, 2026 04:07

fix(blog): add spacing between comment author and text

8ecca37

vercel bot deployed to Preview – npmx.dev March 19, 2026 03:11 View deployment

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Uh oh!

fix(blog): ui improvements and comment layout fix#2139

fix(blog): ui improvements and comment layout fix#2139
Adebesin-Cell wants to merge 8 commits intonpmx-dev:mainfrom
Adebesin-Cell:fix/blog-ui-and-comment-redesign

Adebesin-Cell commented Mar 18, 2026 •

edited

Loading

Uh oh!

vercel bot commented Mar 18, 2026 •

edited

Loading

Uh oh!

github-actions bot commented Mar 18, 2026 •

edited

Loading

Uh oh!

codecov bot commented Mar 18, 2026 •

edited

Loading

Uh oh!

coderabbitai bot commented Mar 18, 2026 •

edited

Loading

Walkthrough

Suggested labels

Suggested reviewers

❌ Failed checks (1 inconclusive)

Uh oh!

coderabbitai bot left a comment

Uh oh!

coderabbitai bot left a comment

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

2 participants

Uh oh!

Conversation

Adebesin-Cell commented Mar 18, 2026 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Summary

Uh oh!

vercel bot commented Mar 18, 2026 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Uh oh!

github-actions bot commented Mar 18, 2026 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Lunaria Status Overview

Tracked Files

Uh oh!

codecov bot commented Mar 18, 2026 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Codecov Report

Uh oh!

coderabbitai bot commented Mar 18, 2026 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Walkthrough

Suggested labels

Suggested reviewers

❌ Failed checks (1 inconclusive)

Uh oh!

coderabbitai bot left a comment

Choose a reason for hiding this comment

Uh oh!

coderabbitai bot left a comment

Choose a reason for hiding this comment

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

2 participants

Adebesin-Cell commented Mar 18, 2026 •

edited

Loading

vercel bot commented Mar 18, 2026 •

edited

Loading

github-actions bot commented Mar 18, 2026 •

edited

Loading

codecov bot commented Mar 18, 2026 •

edited

Loading

coderabbitai bot commented Mar 18, 2026 •

edited

Loading