From c39c164d51fac8616b994f87ba8bc027a4bf0726 Mon Sep 17 00:00:00 2001
From: c0mrade <killmy666@gmail.com>
Date: Thu, 4 Jun 2026 22:53:51 +0300
Subject: [PATCH] fix(connected-accounts): keep status/unlink inside the card
 on long IDs
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

A long Google sub (numeric, ~21 digits) pushed 'Привязан' and 'Отвязать'
past the right edge of the account card on mobile. Classic flex overflow:
the left identifier column had no min-w-0, the identifier <p> no truncate,
and the right actions no shrink-0. Add min-w-0 + truncate to the text column
and shrink-0 to the actions so the id ellipsizes and the controls stay put.
---
 src/pages/ConnectedAccounts.tsx | 12 ++++++------
 1 file changed, 6 insertions(+), 6 deletions(-)

diff --git a/src/pages/ConnectedAccounts.tsx b/src/pages/ConnectedAccounts.tsx
index 78c3456..f3ec7e5 100644
--- a/src/pages/ConnectedAccounts.tsx
+++ b/src/pages/ConnectedAccounts.tsx
@@ -671,19 +671,19 @@ export default function ConnectedAccounts() {
       {data?.providers.map((provider) => (
         <motion.div key={provider.provider} variants={staggerItem}>
           <Card>
-            <div className="flex items-center justify-between">
-              <div className="flex items-center gap-3">
+            <div className="flex items-center justify-between gap-3">
+              <div className="flex min-w-0 items-center gap-3">
                 <ProviderIcon provider={provider.provider} />
-                <div>
-                  <p className="font-medium text-dark-100">
+                <div className="min-w-0">
+                  <p className="truncate font-medium text-dark-100">
                     {t(`profile.accounts.providers.${provider.provider}`)}
                   </p>
                   {provider.identifier && (
-                    <p className="text-sm text-dark-400">{provider.identifier}</p>
+                    <p className="truncate text-sm text-dark-400">{provider.identifier}</p>
                   )}
                 </div>
               </div>
-              <div className="flex items-center gap-2">
+              <div className="flex shrink-0 items-center gap-2">
                 {provider.linked ? (
                   <>
                     <span className="text-sm text-success-500">{t('profile.accounts.linked')}</span>