Fix select widget in Drupal Claro#14917
Conversation
|
Could you please screenshot the actual CSS background value of the icon? If it's SVG, it may be potentially fixed in the next release. |
|
Sure, here are screenshots that include the Inspector view of the CSS values:
|
|
Thanks, the issue was those SVGs with viewBox but no width and height were behaving differently to those the Dark Reader was making. Should be fixed in the next release. |
|
So... there is new version of Dark Reader released. @smokris can you check if your page works fine with it? If yes then this PR should be closed without merge. |
…le 'viewbox' capitalization variations, and handle double-quotes
|
Thanks for the info. I updated to Dark Reader 4.9.119 just now, but unfortunately the problem remains. Here's a simplified test case that reproduces the problem: test.html I think there are 2 separate problems here:
|
|
@alexanderby I am not that much experienced into code outside config folder. Maybe you can take a look here again. 😉 |
|
@smokris Thank you for providing a test case and for pointing out the single quotes and the URL encoding. Brilliant! This is fixed now, as well as overriding of the
|
| --darkreader-bg--white: 23, 23, 23 !important; | ||
| --darkreader-text--black: 228, 224, 218 !important; | ||
| } | ||
| body:has(> div[data-drupal-claro-processed-toolbar]) .form-element--type-select { |
There was a problem hiding this comment.
The static fix should be unnecessary now.
| else { | ||
| svgText = decodeURIComponent(svgText); | ||
| } | ||
| const svgOpeningMatch = svgText.match(/^<svg( .*?)?>/); |
There was a problem hiding this comment.
I improved the old solution based on indexOf, so the code changes are unnecessary now.
There was a problem hiding this comment.
If you could put expect(details.useViewBox).toBe(true); that would be awesome.
3 participants
The Drupal content management system's default admin theme styles
<select>elements, adding a custom arrow image. Dark Reader's adjustments cause the arrow image to be rendered too large. This PR adds a CSS override to improve the styling.In the "Dark Reader before" screenshot above, I added pink arrows pointing to the misrendered
<select>arrow.