On mobile make media search full width

[karmatosed]

Visually this could be made full width.

Note: the header here full stop needs some work but that is something to iterate on, lets start with this.

[abhishekfdd]

Patch to fix the issue

[abhishekfdd]

Made media search full width

[adamsilverstein]

Looks good @abhishekfdd. At full width, the search box stays smaller and pinned to the right side of the screen:

At smaller sizes the width snaps to 100%:

[karmatosed]

Looks great to me. Are we good to get a commit? Thanks @abhishekfdd and @adamsilverstein.

[adamsilverstein]

In 40792:

Media: make search input full width on mobile.

Props abhishekfdd.
Fixes #40130.

[adamsilverstein]

In 40840:

Plugins: fix regression in search input field size.

Fix a formatting regression introduced in [40792] which attempted to resize the input for mobile, see #40130.

Props leemon, juhise, voldemortensen.
Fixes #40857.

[adamsilverstein]

@karmatosed & @abhishekfdd - We had to revert this change in [40840] because of unintended side effects. Reopening for 4.9, this still seems like a good idea if we can get the targeting right.

[karmatosed]

@adamsilverstein any information more on what this impacted so we can avoid that? Could we get an update on this ticket?

[adamsilverstein]

Replying to karmatosed:

@adamsilverstein any information more on what this impacted so we can avoid that? Could we get an update on this ticket?

@karmatosed The plugin search bar is mentioned on the other ticket- #40857, not sure if other areas were affected.

[m1tk00]

Attached the css for the form in the media query for mobile devices only.

[viralsampat]

Fixed

[adamsilverstein]

@viralsampat Why did you add a bottom border in your patch?

[adamsilverstein]

40130.2.patch​ works well in my testing, planning to commit that.

[adamsilverstein]

In 46207:

Media: make search input full width on mobile. Take two.

Props m1tk00.
Fixes #40130.

[johnbillion]

@adamsilverstein Can we get a screenshot of this change please?

[adamsilverstein]

@johnbillion added one: note the search box is full width.