Skip to content

Fleet UI: Remove blue click flash on clickable table rows#49228

Merged
RachelElysia merged 2 commits into
mainfrom
47530-my-device-policy-blue-highlight
Jul 14, 2026
Merged

Fleet UI: Remove blue click flash on clickable table rows#49228
RachelElysia merged 2 commits into
mainfrom
47530-my-device-policy-blue-highlight

Conversation

@RachelElysia

@RachelElysia RachelElysia commented Jul 13, 2026

Copy link
Copy Markdown
Member

Issue

Closes #47530

Description

  • Bug fix (root cause): .single-row:active set background-color: $ui-vibrant-blue-10, so clicking a row (e.g., a policy on My device > Policies) briefly flashed a pale purple/blue background in light mode and a dark navy in dark mode. It read as a stuck default/un-themed selected state.
  • Dropped the :active rule. Hover still shows cursor: pointer and the off-white row background, so click affordance is preserved without the mis-themed flash.
  • Thinned the row :focus-visible outline from 2px to 1px so keyboard focus on clickable rows matches the outline width used elsewhere (link mixin's :focus-visible).

Screenrecording

  • Clicking a policy on My device > Policies in light and dark mode.
Screen.Recording.2026-07-13.at.11.17.10.AM.mov
Screen.Recording.2026-07-13.at.11.18.20.AM.mov

Testing

  • QA'd all new/changed functionality manually

Summary by CodeRabbit

  • Bug Fixes
    • Removed the blue active-state “flash” when clicking a row in single-select data tables (e.g., My device > Policies).
    • Kept the existing hover behavior and pointer cursor for clickable rows.
    • Reduced the table row focus-visible outline thickness for a subtler focus indicator.

Removed the .single-row:active blue background that briefly highlighted
a row on mouse-down, making clicked rows look like a stuck default/un-
themed selected state.
Copilot AI review requested due to automatic review settings July 13, 2026 18:15
@RachelElysia RachelElysia requested a review from a team as a code owner July 13, 2026 18:15

Copilot AI left a comment

Copy link
Copy Markdown
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Warning

  • Copilot's review of this pull request may be incomplete because some of the changed files are excluded by your Copilot content exclusion settings. See Excluding content from Copilot for details.

Pull request overview

Removes the unintended “blue flash” active-state styling when clicking clickable rows in Fleet’s shared DataTable, aligning click feedback with the intended theming on My device > Policies (and any other surfaces using the same row styling).

Changes:

  • Removed the .single-row:active background color override that caused the mis-themed highlight on click.
  • Preserved hover affordance (pointer cursor + hover background) and keyboard focus styling (:focus-visible outline).

Reviewed changes

Copilot reviewed 1 out of 2 changed files in this pull request and generated no comments.

File Description
frontend/components/TableContainer/DataTable/_styles.scss Drops the :active background override so clicked rows no longer flash the vibrant blue color.
changes/47530-my-device-policy-click-highlight Release note / changelog entry (content excluded by policy from review).
Files excluded by content exclusion policy (1)
  • changes/47530-my-device-policy-click-highlight

💡 Add Copilot custom instructions for smarter, more guided reviews. Learn how to get started.

Match the outline width used by the link mixin's focus-visible so
keyboard focus on clickable rows doesn't look heavier than focus on
other interactive elements.
@coderabbitai

coderabbitai Bot commented Jul 13, 2026

Copy link
Copy Markdown
Contributor

Review Change Stack

Walkthrough

Removed the blue active-state background from single-select data table rows and reduced the focus-visible outline thickness. Hover behavior remains unchanged, including the pointer cursor. This prevents the background flash when clicking rows such as policies on the My device page.

🚥 Pre-merge checks | ✅ 5
✅ Passed checks (5 passed)
Check name Status Explanation
Linked Issues check ✅ Passed The code fixes the reported blue highlight on policy clicks in light and dark mode as requested by #47530.
Out of Scope Changes check ✅ Passed The focus-visible outline tweak is a small related polish change and not clearly outside the issue scope.
Docstring Coverage ✅ Passed No functions found in the changed files to evaluate docstring coverage. Skipping docstring coverage check.
Title check ✅ Passed The title clearly matches the main change: removing the blue click flash from clickable table rows.
Description check ✅ Passed The description includes the linked issue, a clear change summary, screenrecordings, and manual testing notes.
✨ Finishing Touches
📝 Generate docstrings
  • Create stacked PR
  • Commit on current branch
🧪 Generate unit tests (beta)
  • Create PR with unit tests
  • Commit unit tests in branch 47530-my-device-policy-blue-highlight

Thanks for using CodeRabbit! It's free for OSS, and your support helps us grow. If you like it, consider giving us a shout-out.

❤️ Share

Comment @coderabbitai help to get the list of available commands.

@RachelElysia RachelElysia merged commit cee838b into main Jul 14, 2026
15 checks passed
@RachelElysia RachelElysia deleted the 47530-my-device-policy-blue-highlight branch July 14, 2026 14:47
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

None yet

Projects

None yet

Development

Successfully merging this pull request may close these issues.

My device page — clicking a policy on the Policies tab shows a blue highlight (light and dark mode)

3 participants