fix(ui): fix button alignment

[notjaywu]

before	after

[github-actions]

✅ Circular References Report

Generated at: 2026-07-22T09:49:36.899Z
Status: ✅ NO CHANGE

Summary

Metric	Base (develop)	PR	Change
Total Circular References	9	9	0 (0.00%)

Click to view all circular references in PR (9)

insomnia-inso/src/db/models/types.ts -> insomnia-inso/src/db/types.ts
insomnia/src/main/prompt-bridge.ts -> insomnia/src/main/window-utils.ts -> insomnia/src/main/plugin-window.ts
insomnia/src/main/window-utils.ts -> insomnia/src/main/plugin-window.ts
insomnia/src/network/network.ts -> insomnia-scripting-environment/src/objects/index.ts -> insomnia-scripting-environment/src/objects/collection.ts -> insomnia-scripting-environment/src/objects/response.ts
insomnia/src/network/network.ts -> insomnia/src/common/render.ts
insomnia/src/ui/components/settings/import-export.tsx -> insomnia/src/ui/components/modals/export-requests-modal.tsx
insomnia/src/ui/components/tabs/tab-list.tsx -> insomnia/src/ui/components/tabs/tab.tsx
insomnia/src/ui/components/templating/tag-editor-arg-sub-form.tsx -> insomnia/src/ui/components/templating/external-vault/external-vault-form.tsx
insomnia/src/ui/components/viewers/response-viewer.tsx -> insomnia/src/ui/components/viewers/response-multipart-viewer.tsx

Click to view all circular references in base branch (9)

insomnia-inso/src/db/models/types.ts -> insomnia-inso/src/db/types.ts
insomnia/src/main/prompt-bridge.ts -> insomnia/src/main/window-utils.ts -> insomnia/src/main/plugin-window.ts
insomnia/src/main/window-utils.ts -> insomnia/src/main/plugin-window.ts
insomnia/src/network/network.ts -> insomnia-scripting-environment/src/objects/index.ts -> insomnia-scripting-environment/src/objects/collection.ts -> insomnia-scripting-environment/src/objects/response.ts
insomnia/src/network/network.ts -> insomnia/src/common/render.ts
insomnia/src/ui/components/settings/import-export.tsx -> insomnia/src/ui/components/modals/export-requests-modal.tsx
insomnia/src/ui/components/tabs/tab-list.tsx -> insomnia/src/ui/components/tabs/tab.tsx
insomnia/src/ui/components/templating/tag-editor-arg-sub-form.tsx -> insomnia/src/ui/components/templating/external-vault/external-vault-form.tsx
insomnia/src/ui/components/viewers/response-viewer.tsx -> insomnia/src/ui/components/viewers/response-multipart-viewer.tsx

Analysis

✅ No Change: This PR does not introduce or remove any circular references.

---

This report was generated automatically by comparing against the develop branch.

[Copilot]

⚠️ Not ready to approve

The new gap-2 spacing on vault buttons conflicts with existing space-left tooltip margin, likely causing unintended extra spacing and undermining the alignment fix.

Pull request overview

This PR adjusts settings-page button layout to improve vertical/horizontal alignment, primarily by switching certain rows/buttons to size-to-content and using flex alignment utilities.

Changes:

• Update Vault Key settings CTAs to use form-row--start and width-auto so the buttons size to content rather than stretching full width.
• Normalize Vault Key button inner layout with flex justify-center and gap-2, including a simplified loading spinner element.
• Align the “Clear OAuth 2 session” button contents by making the button a flex container with centered alignment.

File summaries

File	Description
packages/insomnia/src/ui/components/settings/vault-key-panel.tsx	Updates vault CTA row and button classes to size-to-content and align spinner/text/tooltip consistently.
packages/insomnia/src/ui/components/settings/general.tsx	Adjusts the “Clear OAuth 2 session” button to use flex centering for better alignment in the Security settings row.

Review details

Comments suppressed due to low confidence (1)

packages/insomnia/src/ui/components/settings/vault-key-panel.tsx:212

• This Button also uses gap-2, so HelpTooltip className="space-left" will double-apply spacing (gap + margin-left). Dropping space-left should keep consistent spacing handled solely by the flex gap.

            className="btn btn--outlined btn--super-compact width-auto flex items-center justify-center gap-2"
            onPress={() => setShowModal(true)}
          >
            Enter Vault Key
            <HelpTooltip className="space-left">Enter your vault key to unlock all local secrets.</HelpTooltip>

• Files reviewed: 2/2 changed files
• Comments generated: 1
• Review effort level: Low

Note

Your feedback helps us improve the quality of this feature.
Please use 👍 or 👎 to tell us whether this assessment is correct.

---

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