bug(insights): period selector loses its dropdown chevron to an inline background shorthand
#6.725 aberto em 3 de ago. de 2026
Métricas do repositório
- Stars
- (16.904 estrelas)
- Métricas de merge de PR
- (Mesclagem média 14h 31m) (314 fundiu PRs em 30d)
Description
Problem
#insightsPeriod (the Insights period filter) is the only <select> in the app that does not look like a control. It renders as a flat full-width bar with no dropdown indicator, so it reads as a static label — "30 days" looks like a caption on the panel, not something you can change.
This is not cosmetic. I use the Insights panel regularly and was about to file a feature request asking for a "day range filter" for the usage charts — because I had never realized that bar was a dropdown. The filter has been there the whole time, with 7 / 30 / 90 / 365.
Cause
static/style.css gives every <select> an inline-SVG chevron and reserves room for it:
select{width:100%;background:var(--input-bg);border:1px solid var(--border2);border-radius:8px;color:var(--text);padding:8px 28px 8px 10px;font-size:12px;outline:none;appearance:none;margin-bottom:6px;cursor:pointer;background-image:url("data:image/svg+xml,...chevron...");background-repeat:no-repeat;background-position:right 10px center;}
static/index.html then overrides it with an inline style:
<select id="insightsPeriod" onchange="loadInsights()" style="width:100%;background:var(--input-bg);color:var(--text);border:1px solid var(--border);border-radius:6px;padding:4px 8px;font-size:12px">
Two independent things break:
background:is a shorthand — it resetsbackground-imagetonone, erasing the chevron.padding:4px 8pxdrops the28pxright padding that reserved space for it.
Inline styles win, so the stylesheet's chevron never renders. Meanwhile appearance:none does still apply (the inline style doesn't declare it, and background doesn't reset it), so the native arrow stays suppressed too. The element ends up with no affordance from either source — custom chevron erased, native one disabled.
This is the same on master today; the inline style is byte-identical there.
Suggested fix
Move the overrides to a class and use background-color instead of the background shorthand, so the base select rule's chevron survives:
.insights-period-select{border-radius:6px;padding:6px 28px 6px 10px;font-size:12px;margin-bottom:0;}
<select id="insightsPeriod" class="insights-period-select" onchange="loadInsights()">
The base rule already supplies width:100%, background, color, appearance, and cursor:pointer, so the class only needs the deltas this select actually wants (tighter radius/padding, no bottom margin).
Worth grepping for other style="...background:..." on form controls while in there — the same shorthand trap would silently strip the chevron anywhere else it appears.
Notes
Happy to send a PR with before/after screenshots if you want it.