daonanchao/vibe-kanban
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

fix: improve typeahead selected item visibility in light mode (Vibe Kanban) (#2036)

Browse Source 
* Done. I've updated both the Tags section and Files section in the typeahead plugin. The changes:

1. Added `border-l-2` to all items to create a left border
2. For selected items: `border-l-brand` (orange accent color) + `bg-muted` + `text-high`
3. For unselected items: `border-l-transparent` + `hover:bg-muted` + `text-muted-foreground`
4. Removed the redundant `text-foreground` class that was conflicting with `text-high`

The selected item now has a visible orange/brand-colored left border indicator that provides clear visual feedback in both light and dark modes.

* style
This commit is contained in:
Louis Knight-Webb
2026-01-14 12:12:55 +00:00
committed by GitHub
parent c861de8b29
commit 7cf83ef5ef
1 changed files with 6 additions and 6 deletions
Download Patch File Download Diff File Expand all files Collapse all files

12
frontend/src/components/ui/wysiwyg/plugins/file-tag-typeahead-plugin.tsx
View File

@@ -210,10 +210,10 @@ export function FileTagTypeaheadPlugin({
return (
<div
key={option.key}
className={`px-3 py-2 cursor-pointer text-sm ${
className={`px-3 py-2 cursor-pointer text-sm border-l-2 ${
index === selectedIndex
? 'bg-muted text-foreground text-high'
: 'hover:bg-muted text-muted-foreground'
? 'bg-muted bg-secondary border-l-brand text-high'
: 'hover:bg-muted border-l-transparent text-muted-foreground'
}`}
onMouseMove={(e) => {
const pos = { x: e.clientX, y: e.clientY };
@@ -254,10 +254,10 @@ export function FileTagTypeaheadPlugin({
return (
<div
key={option.key}
className={`px-3 py-2 cursor-pointer text-sm ${
className={`px-3 py-2 cursor-pointer text-sm border-l-2 ${
index === selectedIndex
? 'bg-muted text-foreground text-high'
: 'hover:bg-muted text-muted-foreground'
? 'bg-muted bg-secondary border-l-brand text-high'
: 'hover:bg-muted border-l-transparent text-muted-foreground'
}`}
onMouseMove={(e) => {
const pos = { x: e.clientX, y: e.clientY };