mirror of
https://github.com/Significant-Gravitas/AutoGPT.git
synced 2026-01-06 22:03:59 -05:00
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:
@@ -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>
|
||||
|
||||
Reference in New Issue
Block a user