Skip to content

bug: Visual artifact on Agents list row hover in light theme #960

Description

@vybe

Summary

On the Agents list page in the light theme, hovering a row produces a dark-blue/black band that covers the row and obscures the row contents (name, status, controls). The hovered row becomes unreadable until the cursor moves away.

Context

Reported during a UI/UX review session — flagged as one of several "visual artifacts on the white theme". This is the most reproducible one: hover any row in the agents list, the row turns dark and the text/controls are no longer legible against it.

Likely cause: a hover-state CSS rule that was authored for the dark theme is leaking into the light theme, or a bg-* class is being applied unconditionally.

Acceptance Criteria

  • Reproduce the artifact in a browser on the light theme
  • Identify the offending CSS rule / component class
  • Fix so the hover state is a subtle row highlight that preserves text contrast in both themes
  • Verify the same row in dark theme still looks correct after the fix
  • Spot-check other list views (templates, schedules, executions) for the same regression

Technical Notes

  • Agents list view: src/frontend/src/views/Agents.vue (or similar)
  • Tailwind classes applied at the <tr> / row level are the most likely place to look
  • This is one of several "white theme artifacts" reported — fixing this one shouldn't preclude opening follow-up issues if more surface during regression testing

Activity

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Metadata

Metadata

Assignees

Type

No type

Projects

No projects

    Milestone

    No milestone

    Relationships

    None yet

    Development

    No branches or pull requests

    Issue actions