From 130532581307df50122be464894be78ab42a8926 Mon Sep 17 00:00:00 2001
From: Abhimanyu Yadav <122007096+Abhi1992002@users.noreply.github.com>
Date: Tue, 9 Dec 2025 20:56:22 +0530
Subject: [PATCH] fix(frontend): preserve button shape in credential select
 when content is long (#11577)
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

<!-- Clearly explain the need for these changes: -->

When the content inside the credential select dropdown becomes too long,
the adjacent link buttons lose their rounded shape and appear squarish.
This happens when the text stretches the container or affects the layout
of the buttons.

The issue occurs because the button's width can shrink below its
intended size when the flex container is stretched by long credential
names. By adding an explicit minimum width constraint with `!min-w-8`,
we ensure the button maintains its proper dimensions and rounded
appearance regardless of the select dropdown's content length.

### Changes 🏗️

<!-- Concisely describe all of the changes made in this pull request:
-->

- Added `!min-w-8` to the external link button's className in
`SelectCredential` component to enforce a minimum width of 2rem (8 *
0.25rem)
- This ensures the button maintains its rounded shape even when the
adjacent select dropdown contains long credential names

### Checklist 📋

#### For code changes:

- [x] I have clearly listed my changes in the PR description
- [x] I have made a test plan
- [x] I have tested my changes according to the test plan:
- [x] Tested credential select with short credential names - button
should maintain rounded shape
- [x] Tested credential select with very long credential names (e.g.,
long provider names, usernames, and hosts) - button should maintain
rounded shape
---
 .../input-renderer/fields/CredentialField/SelectCredential.tsx  | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/autogpt_platform/frontend/src/components/renderers/input-renderer/fields/CredentialField/SelectCredential.tsx b/autogpt_platform/frontend/src/components/renderers/input-renderer/fields/CredentialField/SelectCredential.tsx
index 602c9b0e2d..55081332aa 100644
--- a/autogpt_platform/frontend/src/components/renderers/input-renderer/fields/CredentialField/SelectCredential.tsx
+++ b/autogpt_platform/frontend/src/components/renderers/input-renderer/fields/CredentialField/SelectCredential.tsx
@@ -84,7 +84,7 @@ export const SelectCredential: React.FC<SelectCredentialProps> = ({
         rel="noopener noreferrer"
         variant="outline"
         size="icon"
-        className="h-8 w-8 border-zinc-300 p-0"
+        className="h-8 w-8 !min-w-8 border-zinc-300 p-0"
       >
         <ArrowSquareOutIcon className="h-4 w-4 text-zinc-600" />
       </Button>