fix(table): cap kebab trigger layout height to keep 40px row rhythm - #2259
fix(table): cap kebab trigger layout height to keep 40px row rhythm#2259Fiona2016 wants to merge 1 commit into
Conversation
The row-action kebab button is 28x28 for a comfortable hit area, but as the tallest element in every row it stretched EnhancedTable rows to 45px instead of the intended 40px (8px padding + 24px content + 1px border). Give it -2px vertical margins so its layout footprint is 24px, matching sort buttons and inline icon buttons, while keeping the 28px paint/hit area unchanged.
📝 WalkthroughWalkthroughThe EnhancedTable kebab action trigger now uses negative vertical margins. Its 28px visual and hit area remains, while its layout footprint is reduced to 24px to prevent table row expansion. ChangesEnhancedTable layout
Estimated code review effort: 1 (Trivial) | ~2 minutes 🚥 Pre-merge checks | ✅ 5✅ Passed checks (5 passed)
✨ Finishing Touches🧪 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 |
![coderabbitai[bot]](https://avatars.githubusercontent.com/in/347564?s=60&v=4){kind=small}
There was a problem hiding this comment.
Actionable comments posted: 1
🤖 Prompt for all review comments with AI agents
Verify each finding against current code. Fix only still-valid issues, skip the
rest with a brief reason, keep changes minimal, and validate.
Inline comments:
In `@src/components/EnhancedTable/style.less`:
- Line 88: Insert a blank line between the `padding: 0;` declaration and the
following layout-footprint comment in the relevant style rule, satisfying the
`scss/double-slash-comment-empty-line-before` requirement.
🪄 Autofix
Fix all unresolved CodeRabbit comments on this PR:
- Push a commit to this branch (recommended)
- Create a new PR with the fixes
ℹ️ Review info
⚙️ Run configuration
Configuration used: defaults
Review profile: CHILL
Plan: Pro Plus
Run ID: 718fec81-11b8-423b-bf6f-436684cad652
📒 Files selected for processing (1)
src/components/EnhancedTable/style.less
| width: 28px; | ||
| height: 28px; | ||
| padding: 0; | ||
| // Cap layout footprint at 24px (same as sort buttons / inline icons) so rows keep the |
There was a problem hiding this comment.
📐 Maintainability & Code Quality | 🟡 Minor | ⚡ Quick win
Add the required empty line before the comment.
Insert an empty line between padding: 0; on Line 87 and the comment on Line 88. Stylelint reports scss/double-slash-comment-empty-line-before.
Proposed fix
padding: 0;
+
// Cap layout footprint at 24px (same as sort buttons / inline icons) so rows keep the🧰 Tools
🪛 Stylelint (17.14.0)
[error] 88-88: Expected empty line before comment (scss/double-slash-comment-empty-line-before)
(scss/double-slash-comment-empty-line-before)
🤖 Prompt for AI Agents
Verify each finding against current code. Fix only still-valid issues, skip the
rest with a brief reason, keep changes minimal, and validate.
In `@src/components/EnhancedTable/style.less` at line 88, Insert a blank line
between the `padding: 0;` declaration and the following layout-footprint comment
in the relevant style rule, satisfying the
`scss/double-slash-comment-empty-line-before` requirement.
Source: Linters/SAST tools
1 participant
Changes
The row-action kebab trigger in EnhancedTable is sized 28x28 for a comfortable click target. Being the tallest element in a row, it stretched every row that renders the kebab to 45px (8px vertical padding + 28px button + 1px border) instead of the intended 40px row height (8px padding + 24px content).
This adds -2px vertical margins to the trigger so its layout footprint becomes 24px — the same as sort buttons and inline icon action buttons — while the 28px paint and hit area stays unchanged, overflowing into the existing cell padding.
Effect
Summary by CodeRabbit