fix(ui): mobile search close 1881

[epifaniofrancisco]

🔗 Linked issue

Resolves #1881

🧭 Context

On mobile, when the search input was expanded on a subpage, there was no way to close it. Users were stuck with the search bar taking up the full header.

📚 Description

Added three ways to dismiss the mobile search:

• Click outside the header
• Press Escape key
• Click the X close button

Also fixed the search input height to match the header buttons for visual consistency.

[vercel]

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

Project	Deployment	Actions	Updated (UTC)
npmx.dev	Ready	Preview, Comment	Mar 10, 2026 9:34am

2 Skipped Deployments

Project	Deployment	Actions	Updated (UTC)
docs.npmx.dev	Ignored	Preview	Mar 10, 2026 9:34am
npmx-lunaria	Ignored		Mar 10, 2026 9:34am

[github-actions]

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/en.json	Source changed, localizations will be marked as outdated.

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]

Codecov Report

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

Files with missing lines	Patch %	Lines
app/components/AppHeader.vue	57.14%	5 Missing and 1 partial ⚠️

📢 Thoughts on this report? Let us know!

[coderabbitai]

📝 Walkthrough

Walkthrough

The pull request addresses mobile search usability by implementing click-outside and keyboard-escape behaviours to collapse the expanded mobile search interface. Changes include adding onClickOutside composable and onKeyStroke handler to AppHeader.vue, introducing a Close Search button to the UI, and adding responsive height styling to SearchBox.vue. A new i18n key nav.close_search with value "Close search" is introduced, along with corresponding schema updates to support the new navigational label.

Possibly related PRs

• feat: add clear button in search input #1895: Modifies search controls in SearchBox.vue and header search UX, adding clear button and search logic alongside this PR's close button and mobile collapse functionality.

Suggested labels

front

Suggested reviewers

• ghostdevv
• danielroe

🚥 Pre-merge checks | ✅ 3

✅ Passed checks (3 passed)

Check name	Status	Explanation
Description check	✅ Passed	The PR description directly addresses the changeset by explaining the problem (mobile search cannot be closed on subpages) and detailing the three implemented solutions.
Linked Issues check	✅ Passed	All coding requirements from issue #1881 are met: click-outside dismissal, Escape key handling, and close button UI added with height adjustments for visual consistency.
Out of Scope Changes check	✅ Passed	All changes are directly scoped to resolving #1881: mobile search dismissal mechanisms, close button UI, and height adjustments are all within the stated objectives.

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

Tip

Try Coding Plans. Let us write the prompt for your AI agent so you can ship faster (with fewer bugs).
Share your feedback on Discord.

---

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]

🧹 Nitpick comments (1)

app/components/AppHeader.vue (1)

287-288: Event listeners will never fire.

The @focus and @blur event listeners on HeaderSearchBox are effectively dead code since SearchBox.vue defines these emits but never calls them. The handleSearchFocus and handleSearchBlur handlers (which control showFullSearch) will never execute.

This is a pre-existing issue and doesn't block this PR, but the dead listeners should be cleaned up or the emits should be properly wired in SearchBox.vue.

---

ℹ️ Review info

⚙️ Run configuration

Configuration used: Organization UI

Review profile: CHILL

Plan: Pro

Run ID: 11d6ec66-3522-489f-9209-51168c9a2e93

📥 Commits

Reviewing files that changed from the base of the PR and between 87f3aaf and 99be7a4.

📒 Files selected for processing (4)

• app/components/AppHeader.vue
• app/components/Header/SearchBox.vue
• i18n/locales/en.json
• i18n/schema.json