From 2ed05987dbece84756c06d00ffbfdc5e32dcaf7b Mon Sep 17 00:00:00 2001
From: Jay Wu <jay.wu@konghq.com>
Date: Wed, 22 Jul 2026 16:34:24 +0800
Subject: [PATCH] fix button alignment

---
 .../insomnia/src/ui/components/settings/general.tsx  |  2 +-
 .../src/ui/components/settings/vault-key-panel.tsx   | 12 +++++-------
 2 files changed, 6 insertions(+), 8 deletions(-)

diff --git a/packages/insomnia/src/ui/components/settings/general.tsx b/packages/insomnia/src/ui/components/settings/general.tsx
index e5488629d5..3471872ec7 100644
--- a/packages/insomnia/src/ui/components/settings/general.tsx
+++ b/packages/insomnia/src/ui/components/settings/general.tsx
@@ -217,7 +217,7 @@ export const General: FC = () => {
           help="If checked, clears the OAuth session every time Insomnia is relaunched."
         />
         <button
-          className="pointer h-(--line-height-xs) rounded-md border border-solid border-(--hl-lg) px-(--padding-sm) hover:bg-(--hl-xs)"
+          className="pointer flex h-(--line-height-xs) items-center justify-center rounded-md border border-solid border-(--hl-lg) px-(--padding-sm) hover:bg-(--hl-xs)"
           onClick={clearOAuthWindowSessionId}
         >
           Clear OAuth 2 session
diff --git a/packages/insomnia/src/ui/components/settings/vault-key-panel.tsx b/packages/insomnia/src/ui/components/settings/vault-key-panel.tsx
index ce98a51624..3cebe9ec10 100644
--- a/packages/insomnia/src/ui/components/settings/vault-key-panel.tsx
+++ b/packages/insomnia/src/ui/components/settings/vault-key-panel.tsx
@@ -155,16 +155,14 @@ export const VaultKeyPanel = () => {
     <div>
       {/* Show Gen Vault button when vault salt does not exist */}
       {!vaultSaltExists && (
-        <div className="form-row pad-top-sm justify-start">
+        <div className="form-row form-row--start pad-top-sm justify-start">
           <Button
-            className={`btn btn--outlined btn--super-compact flex items-center ${isGenerating ? 'w-56' : 'w-48'}`}
+            className="btn btn--outlined btn--super-compact width-auto flex items-center justify-center gap-2"
             onPress={generateVaultKey}
             isDisabled={isGenerating}
             aria-label="Generate Vault Key"
           >
-            {isGenerating && (
-              <Icon icon="spinner" className="m-auto mr-2 inline-block animate-spin text-(--color-font)" />
-            )}
+            {isGenerating && <Icon icon="spinner" className="inline-block animate-spin text-(--color-font)" />}
             Generate Vault Key
             <HelpTooltip className="space-left">
               Generate an encryption key to save secrets in private environment. This ensures all secrets are securely
@@ -205,9 +203,9 @@ export const VaultKeyPanel = () => {
       )}
       {/* User has not input vault key after re-login */}
       {vaultSaltExists && !vaultKeyExists && (
-        <div className="form-row pad-top-sm justify-start">
+        <div className="form-row form-row--start pad-top-sm justify-start">
           <Button
-            className="btn btn--outlined btn--super-compact flex w-48 items-center"
+            className="btn btn--outlined btn--super-compact width-auto flex items-center justify-center gap-2"
             onPress={() => setShowModal(true)}
           >
             Enter Vault Key