fix: add clear button in search field (mobile view)

[SahulKola]

🔗 Linked issue

Resolves #1881

🧭 Context

📚 Description

[vercel]

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

Project	Deployment	Actions	Updated (UTC)
npmx.dev	Ready	Preview, Comment	Mar 3, 2026 7:26pm

2 Skipped Deployments

Project	Deployment	Actions	Updated (UTC)
docs.npmx.dev	Ignored	Preview	Mar 3, 2026 7:26pm
npmx-lunaria	Ignored		Mar 3, 2026 7:26pm

[coderabbitai]

No actionable comments were generated in the recent review. 🎉

ℹ️ Recent review info

Configuration used: Organization UI

Review profile: CHILL

Plan: Pro

📥 Commits

Reviewing files that changed from the base of the PR and between 747a1dd and 8bcbeed.

📒 Files selected for processing (1)

• app/components/Header/SearchBox.vue

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

• app/components/Header/SearchBox.vue

---

📝 Walkthrough

Walkthrough

The Header SearchBox component adds a computed hasSearchQuery to detect a non-empty searchQuery, and a clearSearch method that resets searchQuery and focuses the input. A close button (circle-x icon with an aria-label) is conditionally rendered via v-if="hasSearchQuery" and triggers clearSearch on click. InputBase styling receives additional end padding (pe-8) to accommodate the button. Focus exposure and existing focus behaviour remain unchanged.

🚥 Pre-merge checks | ✅ 1 | ❌ 2

❌ Failed checks (1 warning, 1 inconclusive)

Check name	Status	Explanation	Resolution
Linked Issues check	⚠️ Warning	The PR adds a clear button to the SearchBox component, but the linked issue #1881 requests the ability to close the search input by clicking outside it, which are different mechanisms.	Implement click-outside detection to close the search input when users click outside the search field, as specified in issue #1881, rather than relying solely on a manual clear button.
Description check	❓ Inconclusive	The PR description is largely empty, containing only scaffolded sections without substantive details about the implementation, changes, or how the clear button addresses the linked issue.	Provide a meaningful description explaining how the clear button implementation resolves the issue of dismissing mobile search input, including context and implementation details.

✅ Passed checks (1 passed)

Check name	Status	Explanation
Out of Scope Changes check	✅ Passed	All changes are confined to SearchBox.vue and directly support the addition of a clear button feature, which is related to the search input functionality requested in the linked issue.

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

[codecov]

Codecov Report

❌ Patch coverage is 25.00000% 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/Header/SearchBox.vue	25.00%	3 Missing ⚠️

📢 Thoughts on this report? Let us know!

[coderabbitai]

Actionable comments posted: 1

---

ℹ️ Review info

Configuration used: Organization UI

Review profile: CHILL

Plan: Pro

📥 Commits

Reviewing files that changed from the base of the PR and between 4d70dd8 and 2b9581d.

📒 Files selected for processing (1)

• app/components/Header/SearchBox.vue

[coderabbitai]

⚠️ Potential issue | 🟡 Minor

Use the global focus-visible rule for this button.

This button currently adds inline focus-visible:* utilities, which conflicts with the repo-wide button focus strategy and can create inconsistent focus treatment.

Suggested change

-            class="absolute inset-ie-2 inline-flex h-6 w-6 items-center justify-center rounded text-fg-muted hover:text-fg focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-accent"
+            class="absolute inset-ie-2 inline-flex h-6 w-6 items-center justify-center rounded text-fg-muted hover:text-fg"

Based on learnings: focus-visible styling for button/select must be handled globally in app/assets/main.css, and per-element inline focus-visible utility classes should be avoided.