Align custom provider editor action buttons

[PeterDaveHello]

Summary

Make the custom provider editor action buttons use equal flex sizing,
including the wrapped delete button.

Why

The delete button is wrapped so its disabled-state tooltip remains
available. That extra flex layer left the button narrower than Cancel
and Save even when all labels had the same length.

Summary by CodeRabbit

• Style
  • Improved alignment and sizing of provider editor action buttons.
  • Standardized action button behavior by explicitly setting button types to avoid unintended form submissions.
  • Updated the delete control layout to match the other actions while preserving existing disabled state and tooltip behavior.

[coderabbitai]

No actionable comments were generated in the recent review. 🎉

ℹ️ Recent review info

⚙️ Run configuration

Configuration used: defaults

Review profile: CHILL

Plan: Pro

Run ID: f89d9b7c-8edb-4efd-ba5c-eb9fca050a32

📥 Commits

Reviewing files that changed from the base of the PR and between c310dc5 and 657408b.

📒 Files selected for processing (1)

• src/popup/sections/ApiModes.jsx

🚧 Files skipped from review as they are similar to previous changes (1)

• src/popup/sections/ApiModes.jsx

---

📝 Walkthrough

Walkthrough

The provider editor footer now explicitly marks Cancel and Save as buttons and applies flex-based sizing to the Delete control and its container. Delete behavior, tooltip logic, and disabled state remain unchanged.

Changes

Provider editor controls

Layer / File(s)	Summary
Align provider editor actions src/popup/sections/ApiModes.jsx	Cancel and Save use type="button", while the Delete control uses flex-based sizing and retains its existing behavior.

Estimated code review effort: 1 (Trivial) | ~2 minutes

Suggested reviewers: copilot

🚥 Pre-merge checks | ✅ 5

✅ Passed checks (5 passed)

Check name	Status	Explanation
Description Check	✅ Passed	Check skipped - CodeRabbit’s high-level summary is enabled.
Title check	✅ Passed	The title clearly matches the main change: aligning the custom provider editor action buttons.
Docstring Coverage	✅ Passed	No functions found in the changed files to evaluate docstring coverage. Skipping docstring coverage check.
Linked Issues check	✅ Passed	Check skipped because no linked issues were found for this pull request.
Out of Scope Changes check	✅ Passed	Check skipped because no linked issues were found for this pull request.

✨ Finishing Touches

🧪 Generate unit tests (beta)

• Create PR with unit tests

---

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

• X
• Mastodon
• Reddit
• LinkedIn

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

[qodo-code-review]

PR Summary by Qodo

Equalize flex sizing for custom provider editor action buttons

🐞 Bug fix 🕐 Less than 10 minutes

AI Description

• Make Cancel/Save buttons use equal flex sizing in the provider editor actions.
• Apply the same sizing to the wrapped Delete button while preserving its disabled tooltip.

Diagram

graph TD
  A["ApiModes.jsx"] --> B["Provider editor actions"] --> C["Cancel"]
  B --> D["Save"]
  B --> E["Delete wrapper"] --> F["Delete"]

Loading

High-Level Assessment

The following are alternative approaches to this PR:

1. Move sizing to a shared CSS class

• ➕ Avoids inline styles and keeps styling consistent across components
• ➕ Easier to adjust button sizing rules globally (e.g., responsive tweaks)
• ➖ Requires touching stylesheet structure/naming conventions
• ➖ Slightly more overhead for a localized fix

2. Use a tooltip component that works on disabled buttons

• ➕ Eliminates the extra wrapper layer entirely
• ➕ More reusable and accessible tooltip behavior across the app
• ➖ May require adding/refactoring a tooltip implementation
• ➖ Higher scope than a targeted layout fix

Recommendation: The PR’s approach (applying consistent flex: '1 1 0' to Cancel/Save and to both the Delete wrapper and Delete button) is the best low-scope fix because it preserves the disabled tooltip behavior while ensuring equal widths. A shared CSS class could be cleaner stylistically, but isn’t necessary unless this pattern appears in multiple places.

Files changed (1) +4 / -3

Bug fix (1) +4 / -3

ApiModes.jsxEqualize flex widths for provider editor action buttons +4/-3

Equalize flex widths for provider editor action buttons

• Adds equal flex sizing to the Cancel and Save buttons. Updates the tooltip wrapper around Delete to be a flex container and applies the same flex sizing to the Delete button so all three actions render at the same width.

src/popup/sections/ApiModes.jsx

[kilo-code-bot]

Code Review Summary

Status: No Issues Found | Recommendation: Merge

Files Reviewed (1 files)

• src/popup/sections/ApiModes.jsx

Previous Review Summary (commit c310dc5)

Current summary above is authoritative. Previous snapshots are kept for context only.

Previous review (commit c310dc5)

Status: No Issues Found | Recommendation: Merge

Files Reviewed (1 files)

• src/popup/sections/ApiModes.jsx

---

_{Reviewed by hy3:free · Input: 26.4K · Output: 4.3K · Cached: 215.7K}

[gemini-code-assist]

Code Review

This pull request updates the styling of the Cancel, Save, and Delete buttons in the ApiModes section to distribute them evenly using flexbox. The reviewer suggests using the cleaner and more idiomatic flex: 1 shorthand in React inline styles instead of the explicit '1 1 0' string to improve readability and avoid potential cross-browser parsing issues.

Important

The consumer version of Gemini Code Assist on GitHub is being sunset. Starting June 18, 2026, new organization installations will be blocked, and all code review activity will officially cease on July 17, 2026.
For more details on the timeline and next steps, please review the Help Documentation.

[qodo-code-review]

Code Review by Qodo

🐞 Bugs (0) 📘 Rule violations (0) 📎 Requirement gaps (0)

Great, no issues found!

Qodo reviewed your code and found no material issues that require review

[gemini-code-assist]

Code Review

This pull request updates the styling of the action buttons (Cancel, Save, and Delete) in the ApiModes component to use flexbox properties (flex: '1 1 0'), ensuring they are sized and aligned consistently within their container. There are no review comments, and I have no additional feedback to provide.

Important

The consumer version of Gemini Code Assist on GitHub is being sunset. Starting June 18, 2026, new organization installations will be blocked, and all code review activity will officially cease on July 17, 2026.
For more details on the timeline and next steps, please review the Help Documentation.

[Copilot]

Pull request overview

This PR adjusts the layout of the custom provider editor’s action buttons in the popup so Cancel, Save, and the tooltip-wrapped Delete button share equal width via consistent flex sizing. This fits into the popup’s API mode configuration UI by improving visual consistency without changing behavior.

Changes:

• Applied flex: '1 1 0' to the Cancel and Save buttons so they size evenly within the action row.
• Updated the Delete button’s wrapper to participate in the same flex sizing, while preserving the wrapper needed for the disabled tooltip.
• Ensured the wrapped Delete button itself expands to fill the wrapper to match the other buttons’ widths.

---

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

[gemini-code-assist]

Code Review

This pull request updates the styling of the action buttons (Cancel, Save, and Delete) in the provider editor of the ApiModes component. Specifically, it applies flex: 1 to these buttons and adjusts their container styles to ensure they distribute and fill the available horizontal space evenly. There are no review comments, so I have no feedback to provide.

Important

The consumer version of Gemini Code Assist on GitHub is being sunset. Starting June 18, 2026, new organization installations will be blocked, and all code review activity will officially cease on July 17, 2026.
For more details on the timeline and next steps, please review the Help Documentation.

[qodo-code-review]

Code review by qodo was updated up to the latest commit 657408b

[PeterDaveHello]

Oops, I pushed the updated branch to the wrong remote, which resulted in the redundant PR #1008. Since #1008 has already been merged, I’m closing this PR. My bad.