From cfc5433ff3652eb244a0bbea119141d283cbb3a4 Mon Sep 17 00:00:00 2001
From: Leonid Pershin <lpershin@syntellect.ru>
Date: Thu, 2 Jul 2026 19:58:30 +0300
Subject: [PATCH] Refactor ConfigCard and SubscriptionCard for improved layout
 consistency

- Updated code elements in ConfigCard and SubscriptionCard to use `min-w-0` for better handling of long text and preventing overflow.
- Enhanced the layout of both components to ensure a more uniform appearance and improved user experience when displaying connection strings and subscription URLs.
---
 frontend/src/features/configs/ConfigCard.tsx       | 4 ++--
 frontend/src/features/configs/SubscriptionCard.tsx | 2 +-
 2 files changed, 3 insertions(+), 3 deletions(-)

diff --git a/frontend/src/features/configs/ConfigCard.tsx b/frontend/src/features/configs/ConfigCard.tsx
index 1f092aa..30a684b 100644
--- a/frontend/src/features/configs/ConfigCard.tsx
+++ b/frontend/src/features/configs/ConfigCard.tsx
@@ -121,7 +121,7 @@ export function ConfigCard({ config }: { config: VpnConfigDto }) {
             <div className="flex flex-col items-center gap-4">
               <QRCodeSVG value={linkQuery.data.connectionString} size={200} />
               <div className="flex w-full items-center gap-2">
-                <code className="flex-1 truncate rounded-md bg-muted px-2 py-1.5 text-xs">
+                <code className="min-w-0 flex-1 truncate rounded-md bg-muted px-2 py-1.5 text-xs">
                   {linkQuery.data.connectionString}
                 </code>
                 <Button size="icon" variant="outline" onClick={() => void copy(linkQuery.data!.connectionString)}>
@@ -130,7 +130,7 @@ export function ConfigCard({ config }: { config: VpnConfigDto }) {
               </div>
               <p className="text-xs text-muted-foreground">{t('configs.subscriptionLink')}</p>
               <div className="flex w-full items-center gap-2">
-                <code className="flex-1 truncate rounded-md bg-muted px-2 py-1.5 text-xs">
+                <code className="min-w-0 flex-1 truncate rounded-md bg-muted px-2 py-1.5 text-xs">
                   {linkQuery.data.subscriptionUrl}
                 </code>
                 <Button size="icon" variant="outline" onClick={() => void copy(linkQuery.data!.subscriptionUrl)}>
diff --git a/frontend/src/features/configs/SubscriptionCard.tsx b/frontend/src/features/configs/SubscriptionCard.tsx
index 116267a..a07c5b5 100644
--- a/frontend/src/features/configs/SubscriptionCard.tsx
+++ b/frontend/src/features/configs/SubscriptionCard.tsx
@@ -31,7 +31,7 @@ export function SubscriptionCard() {
       </CardHeader>
       <CardContent className="flex items-center gap-4">
         <QRCodeSVG value={data.subscriptionUrl} size={96} />
-        <div className="flex flex-1 flex-col gap-2">
+        <div className="flex min-w-0 flex-1 flex-col gap-2">
           <code className="truncate rounded-md bg-muted px-2 py-1.5 text-xs">{data.subscriptionUrl}</code>
           <Button size="sm" variant="outline" className="self-start" onClick={() => void copy()}>
             <Copy className="h-4 w-4" />