fix(ui): reduce size of link icon

[radosvet93]

Fixes: #1563

[vercel]

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

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

2 Skipped Deployments

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

[coderabbitai]

No actionable comments were generated in the recent review. 🎉

---

📝 Walkthrough

Walkthrough

Adds a single CSS property, font-size: 0.75em, to the a[href^='#']::after rule in the Readme component. The change affects the pseudo-element used for in-page anchor links; no JavaScript, event handling or control flow was modified.

Possibly related PRs

• fix(ui): fix missing icons #1484: Modifies the same selector (.readme :deep(a[href^='#']::after)) and swaps the icon class, touching the same anchor indicator styling.
• feat: add clickable anchor links to readme headings #1417: Updates the a[href^='#']::after styling for in-page anchor indicators, addressing icon sizing in the same component.

Suggested reviewers

• danielroe
• serhalp

🚥 Pre-merge checks | ✅ 3

✅ Passed checks (3 passed)

Check name	Status	Explanation
Description check	✅ Passed	The pull request description references the linked issue #1563 and includes an image showing the header with the link icon, clearly relating to the changeset.
Linked Issues check	✅ Passed	The pull request successfully implements the core requirement from issue #1563 by reducing the anchor icon size through adding font-size: 0.75em to the CSS rule.
Out of Scope Changes check	✅ Passed	The pull request contains only a single CSS property addition directly addressing the linked issue requirement, with no extraneous or unrelated changes.

_{✏️ 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

---

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.}

[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)

153-162: ⚠️ Potential issue | 🟡 Minor

Move font-size: 0.75em to the base ::after rule to prevent layout shift on hover.

The ::after pseudo-element is already display: inline with ms-1 margin, meaning it occupies inline space in the document flow even when invisible (opacity-0). Since UnoCSS preset-icons sizes icons via width: 1em; height: 1em, applying font-size only in the :hover state causes the reserved space to change size on hover, producing a visible text reflow/layout shift in the heading.

Moving the declaration to the base rule keeps the reserved space constant regardless of hover state.

🐛 Proposed fix

 .readme :deep(a[href^='#']::after) {
   /* I don't know what kind of sorcery this is, but it ensures this icon can't wrap to a new line on its own. */
   content: '__';
-  `@apply` inline i-lucide:link rtl-flip ms-1 opacity-0;
+  `@apply` inline i-lucide:link rtl-flip ms-1 opacity-0;
+  font-size: 0.75em;
 }

 .readme :deep(a[href^='#']:hover::after) {
-  `@apply` opacity-100;
-  font-size: 0.75em;
+  `@apply` opacity-100;
 }

[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!

[danielroe]

I think this should be set not just on hover, but in general on the ::after pseudo element

also a question: do we need to add some padding to increase tap target?

[radosvet93]

Ahh, yes, it should be on the ::after!

Hmm, the whole heading is the tap target, so I don't think it needs padding in that case, unless we want to add functionality to copy to clipboard only when the icon is clicked, then probably it's good to have a bigger tap target specifically for the icon

[danielroe]

good point!