1266417 - Add some left padding to the items in the device selector

Status: RESOLVED FIXED

(DevTools :: Responsive Design Mode, defect, P1)

Description

[Gabriel Luong [:gl] (ΦωΦ)]

Extracted from https://bugzilla.mozilla.org/show_bug.cgi?id=1241720#c13:
> For the <select>: can we do somewhere between 3-5px left-padding on the items? They hug the left side really tightly, looks like they need breathing room.

Comment 1

[Helen V. Holmes (:helenvholmes) (:✨)]

Attachment: left-padding.patch

I also adjusted the padding on the select box itself with this patch since it was a quick change (just wanted it to appear more centered when expanded).

Comment 2

[Matteo Ferretti [:zer0] [:matteo]]

Comment on attachment 8749660 [details] [diff] [review]
left-padding.patch

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

My apologies for the delay, I got sick and I still didn't recover, but I wanted at least to avoid this patch to be blocked by me.

::: devtools/client/responsive.html/index.css
@@ +188,4 @@
>    background-color: var(--theme-toolbar-background);
>    color: var(--viewport-active-color);
>    text-align: left;
> +  padding: 5px 10px 5px 10px;

I think you can use the shorter form `5px 10px` here.

Comment 3

[Helen V. Holmes (:helenvholmes) (:✨)]

Attachment: left-padding.patch

Switched to the shorter syntax and rebased with fx-team.

Comment 4

[Pulsebot]

https://hg.mozilla.org/integration/fx-team/rev/6fbaa6adef34

Comment 5

[Carsten Book [:Tomcat]]

https://hg.mozilla.org/mozilla-central/rev/6fbaa6adef34