Steps to reproduce:

1. Visit https://en.wikipedia.org?useskinversion=2
2. Focus search input so that WVUI search loads and search button appears
3. Remove focus from the search input
4. Set browser viewport width to <= 500px

Expected results

• The placeholder text "Search Wikipedia" is not cut off on smaller screen sizes by the hidden search button

Actual results

• Because the search button is hidden with opacity: 0, the placeholder text looks incorrectly cut off in the middle of the input field.

Developer Notes

My initial impression is to use vue's <transition> component to apply display: none in addition to opacity.

However, this would mean the button is removed from the DOM when the user blurs from the search component. One example of how this would change the current experience is when the user tabs out of the search component from the search button, and then presses "shift-tab" to tab back in. Instead of landing back at the search button, the user would likely land on the search input field. While this behavior isn't necessarily worse, it might be worth doing more exploration on the ideal solution and how it would affect the current experience.