617735 - Search field width in Media Gallery is too long in non en-US locales

Status: RESOLVED FIXED

(support.mozilla.org :: Knowledge Base Software, task, P4)

Description

[Rebecca Billings [:rbillings]]

Attachment: FR search

The FR media gallery search button has wrapped beneath the search field due to text length. It is displayed with no space between the field and the button. See attachment.

Comment 1

[Scoobidiver (away)]

It's still applicable after the redesign (similar to bug 792465).

Comment 2

[Joshua Smith [:joshua-s]]

Attachment: Use a placeholder instead of the current button.

Since the form submits on enter, couldn't we do away with the button (which is an eyesore, and not really needed), and use the placeholder attribute in the textbox.

Comment 3

[Joshua Smith [:joshua-s]]

It would be a very minor change, and I don't think it would cause any problems.

Comment 4

[Kadir Topal [:atopal]]

Thanks, Josha! That seems like an elegant solution.

Comment 5

[Tobias (:Tobbi) Markus]

Assigning to Michael. Have fun with it ;)

Comment 6

[Rehan Dalal (Inactive)]

:atopal removing the button may solve the layout issue, but it causes a problem for accessibility. Screen readers would never have a submit button to tab over to prompt the user to submit. One solution to this might be to hide the button using some creative CSS. Thoughts?

Comment 7

[Joshua Smith [:joshua-s]]

We could keep the button and make it a search icon instead of text that has to be localized.  We could show/hide the button for specific devices with media queries, or it could always be visible.

Comment 8

[Kadir Topal [:atopal]]

Either solution sounds good to me. And now that I'm looking at it, we do have that search icon in the search bar in the header already. Looks to me like we could reuse that.

Comment 9

[Joshua Smith [:joshua-s]]

I have created a pull request to address this issue: https://github.com/mozilla/kitsune/pull/1146/

Comment 10

[Ricky Rosario [:rrosario, :r1cky]]

Assigning to Joshua since he filed the PR already.

Comment 11

[Ricky Rosario [:rrosario, :r1cky]]

Landed on master:
https://github.com/mozilla/kitsune/commit/46ea26976f30e1282b1a22e114cac6bc8d927adf

Thanks Joshua!

Comment 12

[Ricky Rosario [:rrosario, :r1cky]]

Landed on prod now.

Comment 13

[Ricky Rosario [:rrosario, :r1cky]]

updating the the sprint it landed in.