fix(frontend): preserve button shape in credential select when content is long (#11577)

<!-- 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
This commit is contained in:
Abhimanyu Yadav
2025-12-09 20:56:22 +05:30
committed by GitHub
parent 4f349281bd
commit 1305325813

View File

@@ -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>