nesquena/hermes-webui

bug(insights): period selector loses its dropdown chevron to an inline background shorthand

Aberta

#6.725 aberto em 3 de ago. de 2026

 (1 comentário) (0 reação) (0 responsável)Python (2.309 forks)github user discovery
bughelp wantedux

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:

  1. background: is a shorthand — it resets background-image to none, erasing the chevron.
  2. padding:4px 8px drops the 28px right 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.

Guia do colaborador