sorokin.oleg.edu/learnharness
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases 6 Wiki Activity

fix: model menu highlight matches quiz rows — filled accent tint, no clipped ring

Browse Source 
The walked row's ring-1 is a box-shadow painted OUTSIDE the border box;
the list's overflow-y-auto makes overflow-x clip at the padding box too
(CSS: a non-visible axis forces the other to auto), so the 1px halo was
shaved on both sides. Replaced with the quiz rows' bg-accent/40 filled
tint and added px-1 to the list so the highlight never touches the
edges (owner round 5).
This commit is contained in:
amosblomqvist
2026-09-18 08:57:10 +03:00
parent 61bd43282d
commit e14fad1709
1 changed files with 2 additions and 2 deletions
Download Patch File Download Diff File Expand all files Collapse all files
components/model-picker.tsx
+2 -2
View File
@@ -312,7 +312,7 @@ export function ModelControl({
{catalog && results.length === 0 && ( {catalog && results.length === 0 && (
<div className="px-2 py-3 text-center text-muted-foreground">No models match.</div> <div className="px-2 py-3 text-center text-muted-foreground">No models match.</div>
)} )}
<ul ref={listRef} data-testid="model-list" className="flex max-h-72 flex-col overflow-y-auto"> <ul ref={listRef} data-testid="model-list" className="flex max-h-72 flex-col overflow-y-auto px-1">
{results.map((m, i) => ( {results.map((m, i) => (
<li key={`${m.provider}/${m.id}`}> <li key={`${m.provider}/${m.id}`}>
<button <button
@@ -321,7 +321,7 @@ export function ModelControl({
data-idx={i} data-idx={i}
onClick={() => pickModel(m)} onClick={() => pickModel(m)}
className={`flex w-full flex-col gap-0.5 rounded-lg px-2 py-1.5 text-left outline-none transition-colors hover:bg-muted ${ className={`flex w-full flex-col gap-0.5 rounded-lg px-2 py-1.5 text-left outline-none transition-colors hover:bg-muted ${
i === menuIdx ? "bg-muted ring-1 ring-border" : "" i === menuIdx ? "bg-accent/40" : ""
}${m.id === effectiveId && i !== menuIdx ? " bg-muted/60" : ""}`} }${m.id === effectiveId && i !== menuIdx ? " bg-muted/60" : ""}`}
> >
<span className="flex items-center justify-between gap-2"> <span className="flex items-center justify-between gap-2">