From 657408b77fbc32a4b8b977b938d721d856a82ee6 Mon Sep 17 00:00:00 2001
From: Peter Dave Hello <hsu@peterdavehello.org>
Date: Mon, 13 Jul 2026 22:02:09 +0800
Subject: [PATCH] Align custom provider editor action buttons

Apply equal flex sizing to the provider editor actions and the wrapped
delete button so all controls render at the same width while preserving
the disabled-state tooltip.
---
 src/popup/sections/ApiModes.jsx | 7 ++++---
 1 file changed, 4 insertions(+), 3 deletions(-)

diff --git a/src/popup/sections/ApiModes.jsx b/src/popup/sections/ApiModes.jsx
index db25ad7a3..25adb83d6 100644
--- a/src/popup/sections/ApiModes.jsx
+++ b/src/popup/sections/ApiModes.jsx
@@ -645,21 +645,22 @@ export function ApiModes({ config, updateConfig }) {
             </div>
           )}
           <div style={{ display: 'flex', gap: '12px' }}>
-            <button type="button" onClick={closeProviderEditor}>
+            <button type="button" onClick={closeProviderEditor} style={{ flex: 1 }}>
               {t('Cancel')}
             </button>
-            <button type="button" onClick={onSaveProviderEditing}>
+            <button type="button" onClick={onSaveProviderEditing} style={{ flex: 1 }}>
               {t('Save')}
             </button>
             {providerEditingId && (
               <span
                 title={providerDeleteDisabledReasonKey ? t(providerDeleteDisabledReasonKey) : ''}
-                style={{ display: 'inline-block' }}
+                style={{ display: 'flex', flex: 1 }}
               >
                 <button
                   type="button"
                   onClick={onDeleteProviderEditing}
                   disabled={isDeleteProviderDisabled}
+                  style={{ flex: 1 }}
                 >
                   {t('Delete')}
                 </button>