[2.x] Icon overlap in search bar and cancel button always open search modal

[huoxin233]

Current Behavior

Two related issues with the global search bar in the header:

1. Search icon and clear button overlap in tablet mode

In tablet mode, the search input collapses to width: 1px when not focused. However, if the search state has a value (e.g. after performing a search), the clear button is still rendered and overlaps with the search icon. (Can be seen in the first vid below)

2. Clicking the clear button always open the search modal

Clicking the clear button in the search bar clears the search value as expected, but also opens the search modal. Not sure if this is intended, but to me it will make more sense to clear the content only when clicking the clear button.

Steps to Reproduce

Can be seen from the vid below, reproducible on discuss
For tablet mode, I use dimension of 768x1024

Expected Behavior

1. Clear button should not show when closing the search modal in tablet mode
2. Clicking clear button will only clear the content in the search bar

Screenshots

1. Search icon and clear button overlap in tablet mode

PixPin_2026-04-20_23-17-29.mp4

2. Clicking the clear button always open the search modal

PixPin_2026-04-20_23-21-23.mp4

Environment

• Flarum version: 2.0.0-rc.1
• Website URL: http://example.com
• Webserver: [e.g. apache, nginx]
• Hosting environment: [e.g. shared, vps]
• PHP version: x.y.z
• Browser: [e.g. chrome 67, safari 11]

Output of php flarum info

Output of "php flarum info", run this in terminal in your Flarum directory.

Possible Solution

1. Add CSS rule to hide the clear button when the input is collapsed (in tablet) [2.x] style: hide search clear button when collapsed in tablet mode #4594
2. Add e.stopPropagation() inside the clear button's onclick handler [2.x] fix: prevent search modal from opening when clear button is clicked #4595 (Opened this as a separated PR as I am not sure if the original behavior is intended)

Additional Context

No response