mrleo1nid/PnvPanel
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Refactor ConfigCard and SubscriptionCard for improved layout consistency
CI / Backend (build + test) (push) Successful in 1m18s
Details
CI / Frontend (lint + typecheck + build) (push) Successful in 36s
Details

Browse Source 
- 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.
This commit is contained in:
Leonid Pershin
2026-07-02 19:58:30 +03:00
parent 5b398f9c59
commit cfc5433ff3
2 changed files with 3 additions and 3 deletions
Download Patch File Download Diff File Expand all files Collapse all files
frontend/src/features/configs/ConfigCard.tsx
+2 -2
View File
@@ -121,7 +121,7 @@ export function ConfigCard({ config }: { config: VpnConfigDto }) {
<div className="flex flex-col items-center gap-4"> <div className="flex flex-col items-center gap-4">
<QRCodeSVG value={linkQuery.data.connectionString} size={200} /> <QRCodeSVG value={linkQuery.data.connectionString} size={200} />
<div className="flex w-full items-center gap-2"> <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} {linkQuery.data.connectionString}
</code> </code>
<Button size="icon" variant="outline" onClick={() => void copy(linkQuery.data!.connectionString)}> <Button size="icon" variant="outline" onClick={() => void copy(linkQuery.data!.connectionString)}>
@@ -130,7 +130,7 @@ export function ConfigCard({ config }: { config: VpnConfigDto }) {
</div> </div>
<p className="text-xs text-muted-foreground">{t('configs.subscriptionLink')}</p> <p className="text-xs text-muted-foreground">{t('configs.subscriptionLink')}</p>
<div className="flex w-full items-center gap-2"> <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} {linkQuery.data.subscriptionUrl}
</code> </code>
<Button size="icon" variant="outline" onClick={() => void copy(linkQuery.data!.subscriptionUrl)}> <Button size="icon" variant="outline" onClick={() => void copy(linkQuery.data!.subscriptionUrl)}>
frontend/src/features/configs/SubscriptionCard.tsx
+1 -1
View File
@@ -31,7 +31,7 @@ export function SubscriptionCard() {
</CardHeader> </CardHeader>
<CardContent className="flex items-center gap-4"> <CardContent className="flex items-center gap-4">
<QRCodeSVG value={data.subscriptionUrl} size={96} /> <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> <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()}> <Button size="sm" variant="outline" className="self-start" onClick={() => void copy()}>
<Copy className="h-4 w-4" /> <Copy className="h-4 w-4" />