Here's a small dump of search prototype things that I believe require (too much) hacking around what OOUI currently supports.
I don't know whether we want to adjust the design somehow, improve OOUI support to achieve what we have in the design, continue with hacks.
It's definitely not implausible that there **is** proper support in OOUI for what we want, but that I'm simply unaware of **how** to accomplish it, so it'd be great to have someone (@Jdforrester-WMF?) look over this first.
Meanwhile, a thorough review of [the entire patch]((https://gerrit.wikimedia.org/r/c/mediawiki/extensions/WikibaseMediaInfo/+/441040)) by someone with extensive OOUI experience would be most useful - there might be other issues or more room for improvement!
---
Soo... there are a few things in the [search prototype](https://wikimedia.invisionapp.com/share/PVKG6GXR3UE#/screens/304318622) that require a good amount of hacks to make them look the right way with the existing OOUI elements. At least to me, with my limited OOUI experience :)
The main thing would have to be making the search bar appear as 1 element:
{F27630974} vs {F27776351}
OOUI (at least to my knowledge) doesn't seem to have support to seamlessly blend its widgets together.
HorizontalLayout arranges widgets right next to one another, but there's still margins & borders to separate the elements.
We could override CSS, but if/once things change in OOUI, we'd get unexpected results...
{P7949}
//There are a few other places where we're dealing with similar things (e.g. borders between `keywords|depicts|other statements` tabs & the autocomplete results below) but those are minor compared to the above changes.//
---
While on the topic of the search bar: if we're going to have it top-right, replacing the existing search bar, we might want the OOUI elements to be slightly smaller than they are natively. They're currently quite big...
I'm not aware of any existing method of scaling back the size of OOUI elements, so we'd need some unstable CSS overrides if we'd like to accomplish that:
{P7950}
---
Another thing: how do we deal with longer `depicts` input?
By default, OOUI's `TagMultiselectWidget` element expands down. Are we ok with that? If not, what do we want? (and this will probably incur a lot of work...)
And when all elements are in a horizontal layout, this also causes the other elements (dropdown, search icon) to drop slightly since they're middle-aligned (fixing that so that the other elements remain at the top should be a pretty easy override, though)
{F27776465}
---
Lastly, it appears that the different kind of OOUI elements we're using there (`TextInputWidget` for keywords & statements input, `TagMultiselectWidget` for depicts) have minor visual differences that get annoying when they need to replace one another.
E.g. look at the differences in padding between `TextInputWidget`'s placeholder text & `TagMultiselectWidget` - if you switch input modes, this is a very noticeable difference.
{F27776417} vs {F27776416}