[FIX] Fix tiny action buttons in Prompt Studio modals#1879
Merged
chandrasekharan-zipstack merged 2 commits intoMar 31, 2026
Conversation
…modals The Vite migration bumped antd from 5.13.2 to 5.29.3. Newer antd no longer sizes icon-only buttons correctly when icons are passed as children instead of using the `icon` prop. Also fixes `classID` (invalid React prop) that was used instead of `className` since initial commit. - Use antd `icon` prop for all icon-only buttons in ManageLlmProfiles and ManageDocsModal - Merge delete button into Actions column in ManageDocsModal (was a separate unlabeled column) - Add "Select Default" header to document selection column - Constrain Actions and Select Default column widths so document names take most space - Remove unused `.manage-llm-pro-icon` CSS class (10px font-size) Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>
Contributor
Summary by CodeRabbit
WalkthroughRefactored Ant Design Button components across six component files to use the Changes
Estimated code review effort🎯 2 (Simple) | ⏱️ ~12 minutes 🚥 Pre-merge checks | ✅ 2 | ❌ 1❌ Failed checks (1 warning)
✅ Passed checks (2 passed)
✏️ Tip: You can configure your own custom pre-merge checks in the settings. ✨ 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 |
Contributor
|
| Filename | Overview |
|---|---|
| frontend/src/components/custom-tools/manage-docs-modal/ManageDocsModal.jsx | Consolidated delete button into the Actions column Space, switched to icon prop for the delete Button, removed the standalone delete column definition, added "Select Default" title with align/width, and reduced Actions column width from 200 to 120. |
| frontend/src/components/custom-tools/manage-llm-profiles/ManageLlmProfiles.jsx | Replaced child icon pattern with the antd icon prop for copy, edit, and delete buttons; removed invalid classID prop and display-flex-align-center className from all three buttons. |
| frontend/src/components/custom-tools/manage-llm-profiles/ManageLlmProfiles.css | Removed .manage-llm-pro-icon CSS rule (font-size: 10px) that was responsible for the shrunk icon buttons; class was also never applied due to the invalid classID prop. |
| frontend/src/components/agency/prompt/Prompt.jsx | Converted MinusOutlined and EditOutlined from button children to the icon prop on their respective Buttons; no logic changes. |
| frontend/src/components/custom-tools/header-title/HeaderTitle.jsx | Moved EditOutlined icon from button children to the icon prop; simplified to a self-closing Button element. |
| frontend/src/components/pipelines-or-deployments/notification-modal/DisplayNotifications.jsx | Moved EditOutlined and DeleteOutlined icons from button children to the icon prop; no logic changes. |
| frontend/src/components/settings/platform/PlatformSettings.jsx | Moved DeleteOutlined icon from button children to the icon prop; no logic changes. |
Flowchart
%%{init: {'theme': 'neutral'}}%%
flowchart TD
A["antd Button (icon-only)"] --> B{How is icon passed?}
B -->|"Old: children\n<Button><Icon/></Button>"| C["antd 5.29+ renders\ntiny / invisible button"]
B -->|"New: icon prop\n<Button icon=<Icon/> />"| D["antd renders\ncorrectly-sized button"]
E["classID prop on Icon"] --> F["Invalid React prop — silently ignored\nCSS class never applied\n(font-size: 10px never set)"]
E --> G["Removed in this PR"]
H["ManageDocsModal table"] --> I["Before: 3 columns\n(Actions | Delete | Select)"]
H --> J["After: 2 columns\n(Actions w/ delete merged | Select Default)"]
Reviews (2): Last reviewed commit: "[FIX] Fix icon-only buttons across remai..." | Re-trigger Greptile
Same antd 5.29.3 regression — use `icon` prop instead of children for icon-only buttons in PlatformSettings, HeaderTitle, Prompt, and DisplayNotifications. Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>
|
Contributor
Frontend Lint Report (Biome)✅ All checks passed! No linting or formatting issues found. |
chandrasekharan-zipstack
requested review from
athul-rs,
jaseemjaskp and
vishnuszipstack
![coderabbitai[bot]](https://avatars.githubusercontent.com/in/347564?s=60&v=4){kind=small}
Contributor
There was a problem hiding this comment.
🧹 Nitpick comments (1)
frontend/src/components/custom-tools/manage-llm-profiles/ManageLlmProfiles.jsx (1)
123-127: Add accessible names for icon-only action buttons.Line 123, Line 129, and Line 145 render icon-only buttons without explicit labels. Add
aria-labelso screen readers can announce the actions.♿ Suggested update
<Tooltip title="Copy Profile ID"> <Button size="small" icon={<CopyOutlined />} + aria-label="Copy profile ID" onClick={() => copyProfileId(item?.profile_id)} /> </Tooltip> <Button size="small" icon={<EditOutlined />} + aria-label="Edit profile" disabled={isPublicSource} onClick={() => handleEdit(item?.profile_id)} /> @@ <Button size="small" icon={<DeleteOutlined />} + aria-label="Delete profile" disabled={ isPublicSource || defaultLlmProfile === item?.profile_id } />Also applies to: 129-134, 145-151
🤖 Prompt for AI Agents
Verify each finding against the current code and only fix it if needed. In `@frontend/src/components/custom-tools/manage-llm-profiles/ManageLlmProfiles.jsx` around lines 123 - 127, The icon-only <Button> elements need accessible names: for each icon-only Button (the one calling copyProfileId(item?.profile_id) and the buttons that call editProfile(...) and deleteProfile(...)) add an aria-label with a concise descriptive phrase (e.g., "Copy profile ID", "Edit profile", "Delete profile") so screen readers can announce the action; locate the Button components rendering the CopyOutlined, Edit (or pencil) and Delete icons and add the appropriate aria-label attribute to each.
🤖 Prompt for all review comments with AI agents
Verify each finding against the current code and only fix it if needed.
Nitpick comments:
In
`@frontend/src/components/custom-tools/manage-llm-profiles/ManageLlmProfiles.jsx`:
- Around line 123-127: The icon-only <Button> elements need accessible names:
for each icon-only Button (the one calling copyProfileId(item?.profile_id) and
the buttons that call editProfile(...) and deleteProfile(...)) add an aria-label
with a concise descriptive phrase (e.g., "Copy profile ID", "Edit profile",
"Delete profile") so screen readers can announce the action; locate the Button
components rendering the CopyOutlined, Edit (or pencil) and Delete icons and add
the appropriate aria-label attribute to each.
ℹ️ Review info
⚙️ Run configuration
Configuration used: Organization UI
Review profile: CHILL
Plan: Pro
Run ID: 308df6ba-dd5c-484a-a999-d50407153ad4
📒 Files selected for processing (7)
frontend/src/components/agency/prompt/Prompt.jsxfrontend/src/components/custom-tools/header-title/HeaderTitle.jsxfrontend/src/components/custom-tools/manage-docs-modal/ManageDocsModal.jsxfrontend/src/components/custom-tools/manage-llm-profiles/ManageLlmProfiles.cssfrontend/src/components/custom-tools/manage-llm-profiles/ManageLlmProfiles.jsxfrontend/src/components/pipelines-or-deployments/notification-modal/DisplayNotifications.jsxfrontend/src/components/settings/platform/PlatformSettings.jsx
💤 Files with no reviewable changes (1)
- frontend/src/components/custom-tools/manage-llm-profiles/ManageLlmProfiles.css
vishnuszipstack
approved these changes
Mar 31, 2026
Contributor
Code reviewNo issues found. Checked for bugs and CLAUDE.md compliance. Notable observations (below threshold, not flagged as issues):
Lint Rule CandidatesPatterns spotted that could become automated lint rules if they recur:
🤖 Generated with Claude Code - If this code review was useful, please react with 👍. Otherwise, react with 👎. |
athul-rs
approved these changes
Mar 31, 2026
Contributor
Suggested addition: codify this pattern in CLAUDE.mdThis is the 3rd PR where these two patterns have been flagged in review (#1758, #1860, now this one). Worth adding them as explicit rules so they get caught automatically going forward. Consider adding this to ## Frontend Code Review Rules
These are patterns that have been flagged 3+ times in code review. Treat them as lint rules — flag them in reviews and fix them when writing new code.
1. **Icon-only buttons must use the `icon` prop**: In Ant Design v5, `<Button icon={<EditOutlined />} />` is correct. Do NOT pass icons as children (`<Button><EditOutlined /></Button>`) — this causes sizing/rendering bugs.
2. **Icon-only buttons must have `aria-label`**: Any `<Button>` that has only an icon and no text must include an `aria-label` describing its action (e.g., `aria-label="Delete profile"`).Also worth checking 🤖 Generated with Claude Code |
chandrasekharan-zipstack
deleted the
fix/prompt-studio-action-buttons-css
branch
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
3 participants
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.
What
Why
iconprop — buttons became tiny/barely visibleclassID(invalid React prop) was used instead ofclassNameon icon components since the initial commit, so the styling class was never appliedHow
iconprop for all icon-only<Button>components inManageLlmProfiles.jsxandManageDocsModal.jsx<Space>alongside the re-index button inManageDocsModal.jsxalign: "center"andwidth: 120to the select column.manage-llm-pro-iconCSS class (setfont-size: 10px)Can this PR break any existing features. If yes, please list possible items. If no, please explain why. (PS: Admins do not merge the PR without this section filled)
iconprop vs children) and column layout in the Manage Documents table. No logic, API, or data changes.Database Migrations
Env Config
Relevant Docs
Related Issues or PRs
Dependencies Versions
Notes on Testing
Screenshots
Checklist
I have read and understood the Contribution Guidelines.