style: scroll area adjustments

This commit is contained in:
zhom
2025-08-19 09:48:46 +04:00
parent ce0627030d
commit d0fea2fec1
2 changed files with 72 additions and 69 deletions
+1 -1
View File
@@ -107,7 +107,7 @@ export function CamoufoxConfigDialog({
</DialogTitle> </DialogTitle>
</DialogHeader> </DialogHeader>
<ScrollArea className="flex-1 h-[400px]"> <ScrollArea className="flex-1 h-[320px]">
<div className="py-4"> <div className="py-4">
<SharedCamoufoxConfigForm <SharedCamoufoxConfigForm
config={config} config={config}
+71 -68
View File
@@ -16,6 +16,7 @@ import {
DialogHeader, DialogHeader,
DialogTitle, DialogTitle,
} from "@/components/ui/dialog"; } from "@/components/ui/dialog";
import { ScrollArea } from "@/components/ui/scroll-area";
import { import {
Tooltip, Tooltip,
TooltipContent, TooltipContent,
@@ -130,82 +131,84 @@ export function ProxyManagementDialog({
</RippleButton> </RippleButton>
</div> </div>
) : ( ) : (
<div className="overflow-y-auto pr-2 space-y-2 h-full"> <ScrollArea className="h-[320px] pr-2">
{storedProxies.map((proxy) => ( <div className="space-y-2">
<div {storedProxies.map((proxy) => (
key={proxy.id} <div
className="flex justify-between items-center p-1 rounded border bg-card" key={proxy.id}
> className="flex justify-between items-center p-1 rounded border bg-card"
<div className="flex-1 ml-2 min-w-0"> >
{proxy.name.length > 30 ? ( <div className="flex-1 ml-2 min-w-0">
{proxy.name.length > 30 ? (
<Tooltip>
<TooltipTrigger asChild>
<span className="block font-medium truncate text-card-foreground">
{trimName(proxy.name)}
</span>
</TooltipTrigger>
<TooltipContent>
<span className="text-sm font-medium text-card-foreground">
{proxy.name}
</span>
</TooltipContent>
</Tooltip>
) : (
<span className="text-sm font-medium text-card-foreground">
{proxy.name}
</span>
)}
</div>
<div className="mr-2">
<Badge variant="secondary">
{proxyUsage[proxy.id] ?? 0}
</Badge>
</div>
<div className="flex flex-shrink-0 gap-1 items-center">
<Tooltip> <Tooltip>
<TooltipTrigger asChild> <TooltipTrigger asChild>
<span className="block font-medium truncate text-card-foreground">
{trimName(proxy.name)}
</span>
</TooltipTrigger>
<TooltipContent>
<span className="text-sm font-medium text-card-foreground">
{proxy.name}
</span>
</TooltipContent>
</Tooltip>
) : (
<span className="text-sm font-medium text-card-foreground">
{proxy.name}
</span>
)}
</div>
<div className="mr-2">
<Badge variant="secondary">
{proxyUsage[proxy.id] ?? 0}
</Badge>
</div>
<div className="flex flex-shrink-0 gap-1 items-center">
<Tooltip>
<TooltipTrigger asChild>
<Button
variant="ghost"
size="sm"
onClick={() => handleEditProxy(proxy)}
>
<FiEdit2 className="w-4 h-4" />
</Button>
</TooltipTrigger>
<TooltipContent>
<p>Edit proxy</p>
</TooltipContent>
</Tooltip>
<Tooltip>
<TooltipTrigger asChild>
<span>
<Button <Button
variant="ghost" variant="ghost"
size="sm" size="sm"
onClick={() => handleDeleteProxy(proxy)} onClick={() => handleEditProxy(proxy)}
className="text-destructive hover:text-destructive"
disabled={(proxyUsage[proxy.id] ?? 0) > 0}
> >
<FiTrash2 className="w-4 h-4" /> <FiEdit2 className="w-4 h-4" />
</Button> </Button>
</span> </TooltipTrigger>
</TooltipTrigger> <TooltipContent>
<TooltipContent> <p>Edit proxy</p>
{(proxyUsage[proxy.id] ?? 0) > 0 ? ( </TooltipContent>
<p> </Tooltip>
Cannot delete: in use by {proxyUsage[proxy.id]}{" "} <Tooltip>
profile <TooltipTrigger asChild>
{proxyUsage[proxy.id] > 1 ? "s" : ""} <span>
</p> <Button
) : ( variant="ghost"
<p>Delete proxy</p> size="sm"
)} onClick={() => handleDeleteProxy(proxy)}
</TooltipContent> className="text-destructive hover:text-destructive"
</Tooltip> disabled={(proxyUsage[proxy.id] ?? 0) > 0}
>
<FiTrash2 className="w-4 h-4" />
</Button>
</span>
</TooltipTrigger>
<TooltipContent>
{(proxyUsage[proxy.id] ?? 0) > 0 ? (
<p>
Cannot delete: in use by{" "}
{proxyUsage[proxy.id]} profile
{proxyUsage[proxy.id] > 1 ? "s" : ""}
</p>
) : (
<p>Delete proxy</p>
)}
</TooltipContent>
</Tooltip>
</div>
</div> </div>
</div> ))}
))} </div>
</div> </ScrollArea>
)} )}
</div> </div>
</div> </div>