Fleet UI: Fix empty button boxes in batch run script modal - #49997
Merged
Conversation
Resolves #49879. #49292 swapped the row's Run script button from the transparent `inverse` variant to the bordered `secondary` variant, but the local hover-reveal CSS only faded `.children-wrapper` — leaving the new border + off-white fill visible on every row. Reworked the reveal to use a shared `.row-hover-button` class in `PaginatedList/_styles.scss` (mirrors the `TableContainer` pattern for `tr`), added a comment on `Button`'s `.children-wrapper` warning against the anti-pattern, and documented the convention in `.claude/rules/fleet-frontend.md`.
Contributor
There was a problem hiding this comment.
Pull request overview
Fixes the “empty button box” hover artifact in the batch Run script modal by switching the row-hover reveal behavior to fade the entire button (including border/fill), and centralizing the pattern in shared list/table styling.
Changes:
- Add
className="row-hover-button"to the batch run script row action button. - Remove the local hover CSS that only faded
Button’s.children-wrapper, and add shared.row-hover-buttonhover/focus-visible rules underPaginatedListrows. - Document the anti-pattern in
Buttonstyles and codify the canonical approach in.claude/rules/fleet-frontend.md.
Reviewed changes
Copilot reviewed 5 out of 5 changed files in this pull request and generated 1 comment.
Show a summary per file
| File | Description |
|---|---|
| frontend/pages/hosts/ManageHostsPage/components/RunScriptBatchPaginatedList/RunScriptBatchPaginatedList.tsx | Applies the shared hover-reveal utility class to the per-row Run script button. |
| frontend/pages/hosts/ManageHostsPage/components/RunScriptBatchPaginatedList/_styles.scss | Removes the local hover/fade implementation that only affected .children-wrapper. |
| frontend/components/PaginatedList/_styles.scss | Introduces the shared .row-hover-button fade + reveal behavior for paginated list rows. |
| frontend/components/buttons/Button/_styles.scss | Adds guidance discouraging fading .children-wrapper for hover-reveal actions. |
| .claude/rules/fleet-frontend.md | Documents .row-hover-button as the canonical row hover-reveal pattern for tables and paginated lists. |
💡 Add Copilot custom instructions for smarter, more guided reviews. Learn how to get started.
Comment on lines
+75
to
+86
| // Fade the entire button (border + fill + children), not just its children, | ||
| // so bordered/filled variants like `secondary` don't leave an empty box behind. | ||
| .row-hover-button { | ||
| opacity: 0; | ||
| transition: opacity 250ms; | ||
|
|
||
| // Reveal on the button's own keyboard focus, not just row hover — | ||
| // otherwise tabbing to a hidden row-hover button never shows it. | ||
| &:focus-visible { | ||
| opacity: 1; | ||
| } | ||
| } |
Codecov Report✅ All modified and coverable lines are covered by tests. Additional details and impacted files@@ Coverage Diff @@
## main #49997 +/- ##
=======================================
Coverage 67.95% 67.95%
=======================================
Files 3922 3922
Lines 250011 250012 +1
Branches 13336 13337 +1
=======================================
+ Hits 169888 169894 +6
+ Misses 64829 64824 -5
Partials 15294 15294
Flags with carried forward coverage won't be shown. Click here to find out more. ☔ View full report in Codecov by Harness. 🚀 New features to boost your workflow:
|
`.row-hover-button` fades via `opacity: 0`, but the hidden button still receives pointer events and can intercept row clicks (a real hazard on touch devices where there is no `:hover`). Set `pointer-events: none` while hidden and restore `auto` on row `:hover` / button `:focus-visible`; tab navigation is unaffected because pointer-events only gates mouse/touch, not keyboard focus. Kept `.actions-dropdown` hit-testable so react-select's keyboard-nav bookkeeping still works.
RachelElysia
marked this pull request as ready for review
July 27, 2026 19:48
RachelElysia
requested review from
a team,
JordanMontgomery,
cdcme,
getvictor and
lucasmrod
as code owners
July 27, 2026 19:48
Contributor
|
No actionable comments were generated in the recent review. 🎉 ℹ️ Recent review info⚙️ Run configurationConfiguration used: Path: .coderabbit.yaml Review profile: CHILL Plan: Pro Plus Run ID: ⛔ Files ignored due to path filters (1)
📒 Files selected for processing (5)
💤 Files with no reviewable changes (1)
WalkthroughAdded shared styling that hides row action buttons by default, disables pointer interaction while hidden, and reveals them on row hover or keyboard focus. Table dropdown actions remain pointer-interactive. Batch script row buttons now use the shared styling class, replacing component-specific opacity rules. Added documentation comments for button child-wrapper behavior. 🚥 Pre-merge checks | ✅ 5✅ Passed checks (5 passed)
✨ Finishing Touches📝 Generate docstrings
🧪 Generate unit tests (beta)
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. Comment |
cdcme
approved these changes
Jul 27, 2026
2 tasks
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
Add this suggestion to a batch that can be applied as a single commit.This suggestion is invalid because no changes were made to the code.Suggestions cannot be applied while the pull request is closed.Suggestions cannot be applied while viewing a subset of changes.Only one suggestion per line can be applied in a batch.Add this suggestion to a batch that can be applied as a single commit.Applying suggestions on deleted lines is not supported.You must change the existing code in this line in order to create a valid suggestion.Outdated suggestions cannot be applied.This suggestion has been applied or marked resolved.Suggestions cannot be applied from pending reviews.Suggestions cannot be applied on multi-line comments.Suggestions cannot be applied while the pull request is queued to merge.Suggestion cannot be applied right now. Please check back later.
Issue
Resolves #49879
Description
variant="inverse"(transparent) tovariant="secondary"(bordered + off-white fill), but the local hover-reveal CSS only faded.children-wrapper. The new border/fill stayed fully visible → empty button box on every row..row-hover-buttonclass scoped under.paginated-list__rowinPaginatedList/_styles.scss— mirrors thetr .row-hover-buttonpattern already used inTableContainer/_styles.scss. Fades the whole button (border + fill + children) and reveals on row hover + button:focus-visible.RunScriptBatchPaginatedList/_styles.scss.Button's.children-wrapperwarning against the anti-pattern, and documented.row-hover-buttonas the canonical hover-reveal in.claude/rules/fleet-frontend.md.Screenrecording
Screen.Recording.2026-07-27.at.10.02.39.AM.mov
Testing
yarn lint— 0 errors in touched filesnpx prettier --check— cleanSummary by CodeRabbit
New Features
Bug Fixes