etkr4k/bedolaga-cabinet
1
0
Fork 0
mirror of https://github.com/chillpadclub/bedolaga-cabinet.git synced 2026-07-28 09:33:46 +00:00
Code Issues Packages Projects Releases Wiki Activity

fix(connected-accounts): keep status/unlink inside the card on long IDs

Browse Source 
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.
This commit is contained in:
c0mrade
2026-06-04 22:53:51 +03:00
parent e4b3c8640b
commit c39c164d51
1 changed files with 6 additions and 6 deletions
Download Patch File Download Diff File Expand all files Collapse all files

12
src/pages/ConnectedAccounts.tsx
View File

@@ -671,19 +671,19 @@ export default function ConnectedAccounts() {
{data?.providers.map((provider) => ( {data?.providers.map((provider) => (
<motion.div key={provider.provider} variants={staggerItem}> <motion.div key={provider.provider} variants={staggerItem}>
<Card> <Card>
<div className="flex items-center justify-between"> <div className="flex items-center justify-between gap-3">
<div className="flex items-center gap-3"> <div className="flex min-w-0 items-center gap-3">
<ProviderIcon provider={provider.provider} /> <ProviderIcon provider={provider.provider} />
<div> <div className="min-w-0">
<p className="font-medium text-dark-100"> <p className="truncate font-medium text-dark-100">
{t(`profile.accounts.providers.${provider.provider}`)} {t(`profile.accounts.providers.${provider.provider}`)}
</p> </p>
{provider.identifier && ( {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> </div>
<div className="flex items-center gap-2"> <div className="flex shrink-0 items-center gap-2">
{provider.linked ? ( {provider.linked ? (
<> <>
<span className="text-sm text-success-500">{t('profile.accounts.linked')}</span> <span className="text-sm text-success-500">{t('profile.accounts.linked')}</span>