From aeda6a88a88ca0963e92ff1d81b5924f59bd6736 Mon Sep 17 00:00:00 2001
From: Vaibhav <117663341+7ttp@users.noreply.github.com>
Date: Sat, 2 May 2026 00:53:00 +0530
Subject: [PATCH] fix: third-party auth layout (#45470)

## before
<img width="1278" height="397" alt="image"
src="https://github.com/user-attachments/assets/ba57eca0-81cc-4fa4-929a-8d42933e66e1"
/>

## after
<img width="1265" height="492" alt="image"
src="https://github.com/user-attachments/assets/c09e081e-bcfd-43ea-960a-eedef0494c7d"
/>


<!-- This is an auto-generated comment: release notes by coderabbit.ai
-->

## Summary by CodeRabbit

## Release Notes

* **Style**
* Improved the integration card layout for better content visibility and
status badge positioning.

<!-- end of auto-generated comment: release notes by coderabbit.ai -->
---
 .../interfaces/Auth/ThirdPartyAuthForm/IntegrationCard.tsx    | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/apps/studio/components/interfaces/Auth/ThirdPartyAuthForm/IntegrationCard.tsx b/apps/studio/components/interfaces/Auth/ThirdPartyAuthForm/IntegrationCard.tsx
index a204f411b5..42973f7e8c 100644
--- a/apps/studio/components/interfaces/Auth/ThirdPartyAuthForm/IntegrationCard.tsx
+++ b/apps/studio/components/interfaces/Auth/ThirdPartyAuthForm/IntegrationCard.tsx
@@ -191,7 +191,7 @@ export const IntegrationCard = ({
         <div className="py-1">
           <Image src={getIntegrationTypeIcon(type)} width={21} height={21} alt={`${type} icon`} />
         </div>
-        <div className="flex flex-col flex-0 overflow-y-auto w-full gap-y-4">
+        <div className="flex min-w-0 flex-1 flex-col gap-y-4 overflow-y-auto">
           <div className="text-sm flex flex-col">
             <span className="text-foreground">{getIntegrationTypeLabel(type)}</span>
             <div className="text-foreground-lighter">{getIntegrationTypeDescription(type)}</div>
@@ -206,7 +206,7 @@ export const IntegrationCard = ({
             </Button>
           </div>
         </div>
-        <div className="flex-1">
+        <div className="shrink-0">
           {true ? (
             <Badge className="space-x-1" variant="success">
               <div className="h-3.5 w-3.5 bg-brand rounded-full flex justify-center items-center">