Steps to reproduce:
- *You are on the results page (kagi.com/search) and the search box is already focused*
- Type a long query into the search box (copy-paste works too, but typing might give a better idea), such as:
this is a really long query that requires many words and is somehow going to overflow the search box
- Observe that the end of the query is obscured and you don't see where your cursor is*1
Likewise,
- *You end up on the results page from a previous search,
kagi.com/search?q=this+is+a+really+long+query+that+requires+many+words+and+is+somehow+going+to+overflow+the+search+box for example*
- Focus the search box
- Go to the end of its input (
Cmd+→, End, or whatever)
- Observe that the end of the query is obscured and you don't see where your cursor is*1
Same thing happens on mobile, but looks different (third image).
Expected behavior:
The cursor should "stop" before the search-form-icons and further typing should make the previous text "scroll" to the left. In other words, standard <input> behavior when text overflows the <input>'s visual length.
*1: The search box does actually behave as it should, it will overflow and "scroll" just fine and the cursor "stops" at the end. You can actually notice the cursor at the very end in the first picture.
Basically, the problem is that search-form-icons hover on top of the search <textarea>, so they obscure anything that is at the end of the <textarea> (or, "the <textarea> is not aware of something obscuring it because search-form-icons are not 'inline'").
A fix might be along the lines of having search-input-container draw the search box, but have the <textarea> not extend past search-form-icons. The second picture shows the expected behavior.
Debug info:
Orion Version 0.99.125-beta (WebKit 616.1.22), but same thing in Firefox 117.0.1 and anywhere else, I'd think.
macOS 12.6.9
Connected to: EUROPE-WEST
Image/Video:
