Olivero's input[type=color] has its width set to auto. This overrides the default user agent styling which has an explicit width. In addition, there is padding, which limits the visible color within the form item.

We need to set the width item to something wider. I recommend making the width and height equal. Then we need to remove padding.

This is visible on https://tugboat-aqrmztryfqsezpvnghut1cszck2wwasr.tugboat.qa/admin/appear...

CommentFileSizeAuthor
#3 Screenshot 2021-04-05 at 18.32.23.png27.72 KBgauravvvv
#2 Form_Style___Olivero.png40.49 KBmherchel
#2 3206948.patch831 bytesmherchel
Form_Style___Olivero.png236.34 KBmherchel

Issue fork drupal-3206948

Command icon Show commands

Start within a Git clone of the project using the version control instructions.

Or, if you do not have SSH keys set up on git.drupalcode.org:

About issue forks

Comments

mherchel created an issue. See original summary.

mherchel’s picture

mherchel
he/him
Primary language English
Location Gainesville, FL, US
commented
Issue summary: View changes
Status: Active » Needs review
StatusFileSize
new 3206948.patch831 bytes
new Form_Style___Olivero.png40.49 KB

Patch attached

gauravvvv’s picture

gauravvvv commented
StatusFileSize
new Screenshot 2021-04-05 at 18.32.23.png27.72 KB

I have attached an after-patch screenshot of mobile in Chrome. Seems fine to me.
RTBC +1.

gauravvvv’s picture

gauravvvv commented
Status: Needs review » Reviewed & tested by the community

  • lauriii committed ee5ee65 on 9.2.x 
    Issue #3206948 by mherchel, Gauravmahlawat: Olivero: input[type=color]...
lauriii’s picture

lauriii
he/him
Primary language Finnish
Location Finland
commented
Status: Reviewed & tested by the community » Fixed

Committed ee5ee65 and pushed to 9.2.x. Thanks!

Status: Fixed » Closed (fixed)

Automatically closed - issue fixed for 2 weeks with no activity.