Drop down menu from icon is trucated in to a slot for Chrome.

[wildthingsan]

For users within Japan and need to change regions, the drop down has become truncated, this has occured on recent Chrome 94 update, the other plugins I use do not have this issue. Drop down menu is displayed fine on Firefox. (Only just realised for overseas users, they don't ever need to change regions I guess as they are classified out of Japan already.)

[jackyzy823]

Thanks for reporting, I'll try to fix this.

[andykamezou]

https://github.com/jackyzy823/rajiko/blob/ca03ba5dc864af2baebb169d368c4137cd868c77/popup.html#L40

Removing "display: inline-grid" should fix the issue.

[jackyzy823]

Removing "display: inline-grid" should fix the issue.

And will make firefox display different.

I'm poor at css and html. I add min-width:120px it work , but i don't know how compatible it is.

[andykamezou]

Removing "display: inline-grid" should fix the issue.

And will make firefox display different.

Oh, my bad. Previously I tried to inspect the popup on Firefox, but the html looked different. So I though you code it differently for Firefox. But now I have figured out how to inspect popup properly on Firefox. Apparently it is not as straightforward as any Chromium-based browser..

I'm poor at css and html. I add min-width:120px it work , but i don't know how compatible it is.

Another approach is to use flex (because I'm not familiar with grid). So, in <style> tag :

body {
    display: flex;
    flex-direction: column;
}

And perhaps some cleanup & remove these because it won't work with anything :

.select-style select {
    ...
}

.select-style select:focus {
    ...
}

But this is my suggestion for the <style> . Tested on Edge & Firefox, but let me know if there's any problem. It's 4.30+am here and I haven't sleep yet, so I might missed something.. :

body {
    display: flex;
    flex-direction: column;
}

select, button {
    padding: 5px 8px;
    border: none;
    width: 120px;
    min-height: 25px;
    border-radius: 3px;
    background: #e73c64;
    color: #ddd;
}

/* Remove black outline on Chrome */
select:focus-visible {
    outline: none;
}

/* Color for selected item, only works on Chrome */
option:checked { 
    background: #b41e41;
}

.select-style:not(:last-child){
    margin-bottom: 5px;
}

[jackyzy823]

@andykamezou Thanks for your css! I made an update v0.2.9.

[andykamezou]

No problem. I'm just glad I can contribute a little for this useful extension. Maybe I should fork & create pull request, but I haven't learn much about that process... 🙃

Some notes on :focus-visible :

1. I forgot to include button (for consistency). You can just change from select:focus-visible { } to :focus-visible { } to apply to all elements.
2. The focus indicator (default black outline on Chromium-based, blue on Firefox) might look ugly and not so useful for mouse user because they know where they are clicking. But if you try to navigate with keyboard using Tab key, you will not see your current location because of outline: none .
3. :focus-visible is good for accessibility, but to be honest, I'm not sure if people actually use keyboard to navigate through the extension 🤷‍♂️. So if you want to set every outline to none, it's up to you~

So, here's some update for your consideration in the future :

:focus {
    /* Fallback for browsers that don't support :focus-visible */
    outline: 2px solid #00a7e9; /* Radiko's blue */
}

:focus:not(:focus-visible) { 
    /* Remove default user agent focus styling if :focus-visible is supported */
    outline: none;
}

:focus-visible {
    /* Keyboard-focus on browsers that do support :focus-visible */
    outline: 2px solid #00a7e9; /* Radiko's blue */
}

This css is working as intended on Firefox. But Chromium-based browser showing a different behaviour. It seems to always show the outline based on :focus-visible { } even when you're using mouse. It might be a bug, or just how Chromium-based browser decide on how to use :focus-visible.

https://www.w3.org/TR/selectors-4/#focus-visible-pseudo https://developer.mozilla.org/en-US/docs/Web/CSS/:focus-visible

[wildthingsan]

Thanks guys its working nicely now has been pushed out to Chrome plugin store, keep up the good work!