nesquena/hermes-webui

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

开放

#6,725 创建于 2026年8月3日

 (1 条评论) (0 个反应) (0 位负责人)Python (2,309 个派生)github user discovery
bughelp wantedux

仓库指标

星标
 (16,904 个星标)
PR 合并指标
 (平均合并 14小时 31分钟) (30 天内合并 314 个 PR)

描述

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.

贡献者指南