fix(ui): remove glossy <select> effect in Safari

[SecondThundeR]

This small CSS fix removes the "glossy" effect of tags in Safari

[SecondThundeR]

Before:

After:

[aarthificial]

Can you check if just setting:

Suggested change

	-moz-appearance: none;
	-webkit-appearance: none;
	appearance: none;
	-webkit-appearance: caret;

wouldn't work?
Setting appearance to none removes the dropdown arrow from all browsers 😞

[SecondThundeR]

Unfortunately, option with caret returns that style, I'll try to see what I can do to keep dropdown arrow as well

[SecondThundeR]

I have currently found some solution that looks good. By using appearance: none only on the select tag and adding a custom dropdown icon via the background property (I took ChevronRight as a base and rotated it 90 degrees) it solves the original problem and makes the icon itself prettier than the standard browser icon.

The only thing is that there are still cross-browser problems (Now I believe why Safari is called the new IE). Since after appearance: none, the width of select becomes different (on Chrome and Safari the width isn't the same), the width of input in playback controls also breaks. As I understood from some "experiments", because of the grid layout, the min-content parameter in grid-template-columns takes the width of select (as I guess), which is smaller than input and because of this the text in input is cut off.

Of course, in theory, we could add a fixed width select in playback controls, which would eventually make it look almost the same in both browsers.

So I'd like to figure out if I should do such a "hack" for the sake of the great UI, or scrape this idea for now and leave the controls in Safari the way they are (Which of course I wouldn't want to, because the new dropdown icon looks more interesting after all)

Examples of change:

different sizes of select in both browsers

[aarthificial]

I think adding a fixed width, or at least a min-width on the selects in the playback controls is a good idea. Right now their size is not really well defined so it's not surprising that it varies between browsers.

[SecondThundeR]

After a little poking around, I was able to figure out that the cause of the weird width is also the size property of input, which (again) works differently in both browsers. So I removed it in the PlaybackControls component and added a fixed width for .controls select and input. Now the width looks great in both browsers

[aarthificial]

Awesome, thanks for the PR!