monoadmin/the-other-dude
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

feat(ui): add list-item-interactive class, update table row hover

Browse Source 
- Add .list-item-interactive CSS class: 2px left border on hover/focus,
  bg-elevated on active press, 50ms transitions
- FleetTable: update hover to bg-elevated/30 with 50ms transition
- Class available for div-based list rows (alerts, events, nav items)

Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>
This commit is contained in:
Jason Staack
2026-03-21 13:42:54 -05:00
parent 17037e4936
commit 996ce37a19
2 changed files with 19 additions and 3 deletions
Download Patch File Download Diff File Expand all files Collapse all files

6
frontend/src/components/fleet/FleetTable.tsx
View File

@@ -92,7 +92,7 @@ function SortHeader({ column, label, currentSort, currentDir, onSort, className
function DeviceCard({ device, tenantId }: { device: DeviceResponse; tenantId: string }) { function DeviceCard({ device, tenantId }: { device: DeviceResponse; tenantId: string }) {
return ( return (
<div <div
className="w-full text-left rounded-lg border border-border bg-panel p-3 hover:bg-elevated/50 transition-colors min-h-[44px]" className="w-full text-left rounded-lg border border-border bg-panel p-3 hover:bg-elevated/30 transition-[background-color] duration-[50ms] min-h-[44px]"
data-testid={`device-card-${device.hostname}`} data-testid={`device-card-${device.hostname}`}
> >
<div className="flex items-start justify-between gap-2"> <div className="flex items-start justify-between gap-2">
@@ -402,7 +402,7 @@ export function FleetTable({
data-index={virtualRow.index} data-index={virtualRow.index}
ref={virtualizer.measureElement} ref={virtualizer.measureElement}
className={cn( className={cn(
'border-b border-border/50 hover:bg-elevated/50 transition-colors', 'border-b border-border/50 hover:bg-elevated/30 transition-[background-color] duration-[50ms]',
selectedIndex === virtualRow.index && 'bg-elevated/50', selectedIndex === virtualRow.index && 'bg-elevated/50',
)} )}
style={{ style={{
@@ -460,7 +460,7 @@ export function FleetTable({
key={device.id} key={device.id}
data-testid={`device-row-${device.hostname}`} data-testid={`device-row-${device.hostname}`}
className={cn( className={cn(
'border-b border-border/50 hover:bg-elevated/50 transition-colors', 'border-b border-border/50 hover:bg-elevated/30 transition-[background-color] duration-[50ms]',
selectedIndex === idx && 'bg-elevated/50', selectedIndex === idx && 'bg-elevated/50',
)} )}
> >

16
frontend/src/index.css
View File

@@ -207,3 +207,19 @@
font-variant-numeric: tabular-nums; font-variant-numeric: tabular-nums;
} }
} }
/* ── Interaction classes ── */
@layer components {
.list-item-interactive {
border-left: 2px solid transparent;
transition: border-color 50ms linear, background-color 50ms linear;
}
.list-item-interactive:hover,
.list-item-interactive:focus-visible {
border-left-color: hsl(var(--accent));
outline: none;
}
.list-item-interactive:active {
background-color: hsl(var(--elevated));
}
}