fix: position of icon in readme callouts

[whitep4nth3r]

Fixes #1415

After:

[vercel]

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

Project	Deployment	Actions	Updated (UTC)
npmx.dev	Ready	Preview, Comment	Feb 12, 2026 10:36am

2 Skipped Deployments

Project	Deployment	Actions	Updated (UTC)
docs.npmx.dev	Ignored		Feb 12, 2026 10:36am
npmx-lunaria	Ignored		Feb 12, 2026 10:36am

[codecov]

Codecov Report

✅ All modified and coverable lines are covered by tests.
✅ All tests successful. No failed tests found.

📢 Thoughts on this report? Let us know!

[coderabbitai]

📝 Walkthrough

Walkthrough

This pull request modifies the styling of callout elements in the Readme component. A left positioning property is added to the .readme :deep(blockquote[data-callout]::after) selector to adjust the horizontal placement of callout arrow or icon elements. The change complements the existing top positioning and addresses the misalignment of icons displayed within callout alerts.

Suggested reviewers

• danielroe
• trueberryless

🚥 Pre-merge checks | ✅ 3

✅ Passed checks (3 passed)

Check name	Status	Explanation
Description check	✅ Passed	The PR description references the linked issue (#1415) and explains the purpose of fixing icon positioning in readme callouts, directly addressing the changeset.
Linked Issues check	✅ Passed	The code change adds left positioning to the blockquote callout element, directly addressing the icon positioning issue reported in #1415.
Out of Scope Changes check	✅ Passed	The single CSS modification is entirely scoped to fixing the callout icon positioning issue; no unrelated or out-of-scope changes are present.

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

✨ Finishing touches

🧪 Generate unit tests (beta)

• Create PR with unit tests
• Post copyable unit tests in a comment
• Commit unit tests in branch fix-tip

Tip

Issue Planner is now in beta. Read the docs and try it out! Share your feedback on Discord.

---

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

[coderabbitai]

Caution

Some comments are outside the diff and can’t be posted inline due to platform limitations.

⚠️ Outside diff range comments (1)

app/components/Readme.vue (1)

288-295: ⚠️ Potential issue | 🟡 Minor

Use logical inset for RTL-safe positioning (Line 294).
left: 1rem uses physical positioning that will misalign the icon in RTL layouts. Use inset-inline-start: 1rem to maintain consistency with other logical properties in this component and ensure proper alignment across text directions. This property is supported in all modern browsers.

Proposed diff

 .readme :deep(blockquote[data-callout]::after) {
   content: '';
   width: 1.25rem;
   height: 1.25rem;
   position: absolute;
   top: 1rem;
-  left: 1rem;
+  inset-inline-start: 1rem;
 }

[serhalp]

💡