1366143 - Fix alignment of select boxes

Status: RESOLVED WONTFIX

(bugzilla.mozilla.org Graveyard :: Sandstone/Mozilla Skin, defect, P1)

Description

[Dylan Hardison [:dylan] (he/him)]

Smaug reported that the Mozilla Skin has a glitch in the height of select and input items which is particularly notable when setting review flags. This is partly due to padding added to input items (which I think is unattractive anyway), and different font sizes.

Comment 1

[Dylan Hardison [:dylan] (he/him)]

Attachment: 1366143_1.patch

Comment 2

[Dylan Hardison [:dylan] (he/him)]

Pushing this change up to dev for a review across browsers. I think it looks better in all browsers on OSX and Windows, but not better in Linux. I think possibly we might want to use a CSS reset but that is probably more work. :-/

Comment 3

[Dylan Hardison [:dylan] (he/him)]

After a lot of looking, I think it's better on linux. It's just not perfect there.

Comment 4

[:glob ✱]

Comment on attachment 8869300 [details] [diff] [review]
1366143_1.patch

Review of attachment 8869300 [details] [diff] [review]:
-----------------------------------------------------------------

if you're asking if i think it looks better, my answer is no.
i think because of the styling (box-shadow, border-radius, etc) there is a need for extra padding, and it looks way too tight without it.

2px padding is the smallest value where it feels right to me.
will attach comparison screenshots.

Comment 5

[:glob ✱]

Attachment: padding-current.png

Comment 6

[:glob ✱]

Attachment: padding-2.png

Comment 7

[:glob ✱]

Attachment: padding-0.png

Comment 8

[:glob ✱]

Attachment: padding-2.png

oops, padding-2 didn't have box-shadows.

Comment 9

[Dylan Hardison [:dylan] (he/him)]

Attachment: details_page.png

The padding is problematic when trying to make select and input boxes the same height. The real issue is the different font sizes.

Comment 10

[Dylan Hardison [:dylan] (he/him)]

Attachment: 1366143_8.patch

The focus of this patch is alignment, so I have not shrunk the size of inputs. I have enlarged the padding on select elements and changed their box-sizing and font-size to be consistent (the existing CSS inconsistently styles select and select[multiple]. The biggest change is 
the removal of vertical-align: top

Comment 11

[Dylan Hardison [:dylan] (he/him)]

Attachment: PR

Comment 12

[Kohei Yoshino [:kohei]]

Attachment: screenshot w/ appearance:none technique, advanced search page

So as mentioned in the PR, I tried the CSS appearance:none solution. Tested with various browsers including Firefox, Firefox ESR, Chrome, Safari, IE, Edge on Windows, macOS, Ubuntu and it all looks good. Attaching a screenshot on Firefox. PR coming shortly.

Comment 13

[Kohei Yoshino [:kohei]]

Attachment: PR2

Comment 14

[Kohei Yoshino [:kohei]]

Attachment: screenshot w/ appearance:none technique, bug detail page

Comment 15

[Kohei Yoshino [:kohei]]

The long term solution I believe is using custom elements (Bug 889230) to provide a better, consistent UX. For example, the product and component dropdown list should have a filtering option like GitHub issue's reviewer/assignee selector. Firefox will be implementing this natively (Bug 1309935) but other browsers don't have it for now.

Comment 16

[Dylan Hardison [:dylan] (he/him)]

This is a clear improvement in most cases.

Comment 17

[Dylan Hardison [:dylan] (he/him)]

This caused breakage on enter_bug.cgi (and some others)

Comment 18

[Kohei Yoshino [:kohei]]

I'm bulk-closing the remaining Sandstone skin bugs. Sandstone is no longer Mozilla's default style, and I'll be creating a new style guide for Bugzilla soon in Bug 1377977.