gitadmin/ArchiTools
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

fix(registratura): redesign NAS attachment card to prevent overflow

Browse Source 
Replaced two-row layout (short path + full UNC path) with compact
single-row: filename only + NAS badge + Copiaza/Copiat badge.
Full path shown in native tooltip on hover, copied on click.
Uses <button> instead of <div> for proper block formatting.
Removed font-mono (caused no-break overflow), removed shortDisplayPath
import, added pathFileName import, removed unused FolderOpen icon.
This commit is contained in:
AI Assistant
2026-02-28 19:20:13 +02:00
parent ea4f245467
commit 08b7485646
1 changed files with 30 additions and 28 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/modules/registratura/components/registry-entry-detail.tsx
+30 -28
View File
@@ -9,7 +9,6 @@ import {
Copy,
ExternalLink,
FileText,
FolderOpen,
GitBranch,
HardDrive,
Link2,
@@ -34,7 +33,7 @@ import {
import type { RegistryEntry } from "../types";
import { DEFAULT_DOC_TYPE_LABELS } from "../types";
import { getOverdueDays } from "../services/registry-service";
import { shortDisplayPath, shareLabelFor } from "@/config/nas-paths";
import { pathFileName, shareLabelFor } from "@/config/nas-paths";
import { cn } from "@/shared/lib/utils";
import { useState, useCallback } from "react";
@@ -396,38 +395,41 @@ export function RegistryEntryDetail({
<div className="space-y-2">
{entry.attachments.map((att) =>
att.networkPath ? (
<div
<button
type="button"
key={att.id}
className="rounded-md border border-blue-200 dark:border-blue-800 bg-blue-50/50 dark:bg-blue-950/20 px-3 py-2 group cursor-pointer hover:bg-blue-100/50 dark:hover:bg-blue-900/30 transition-colors overflow-hidden"
className="w-full text-left rounded-md border border-blue-200 dark:border-blue-800 bg-blue-50/50 dark:bg-blue-950/20 px-3 py-2 group cursor-pointer hover:bg-blue-100/50 dark:hover:bg-blue-900/30 transition-colors"
onClick={() => copyPath(att.networkPath!)}
title="Click pentru a copia calea — lipește în Explorer"
title={att.networkPath}
>
<div className="flex items-center gap-2 min-w-0">
<div className="flex items-center gap-2">
<HardDrive className="h-4 w-4 text-blue-600 dark:text-blue-400 shrink-0" />
<div className="flex-1 min-w-0 truncate">
<span className="text-sm text-blue-700 dark:text-blue-300 font-mono">
<FolderOpen className="mr-1 inline h-3 w-3" />
{shortDisplayPath(att.networkPath)}
</span>
</div>
<Badge
variant="outline"
className="text-[10px] border-blue-300 dark:border-blue-700 text-blue-600 dark:text-blue-400 shrink-0"
>
{shareLabelFor(att.networkPath) ?? "NAS"}
</Badge>
{copiedPath === att.networkPath ? (
<Badge className="text-[10px] bg-green-600 text-white shrink-0 animate-in fade-in">
Copiat!
<span className="text-sm text-blue-700 dark:text-blue-300 truncate block">
{pathFileName(att.networkPath)}
</span>
<span className="ml-auto flex items-center gap-1.5 shrink-0">
<Badge
variant="outline"
className="text-[10px] border-blue-300 dark:border-blue-700 text-blue-600 dark:text-blue-400"
>
{shareLabelFor(att.networkPath) ?? "NAS"}
</Badge>
) : (
<Copy className="h-3.5 w-3.5 text-blue-400 shrink-0 opacity-0 group-hover:opacity-100 transition-opacity" />
)}
{copiedPath === att.networkPath ? (
<Badge className="text-[10px] bg-green-600 text-white animate-in fade-in">
Copiat!
</Badge>
) : (
<Badge
variant="outline"
className="text-[10px] border-blue-300 dark:border-blue-700 text-blue-600 dark:text-blue-400 opacity-60 group-hover:opacity-100"
>
<Copy className="mr-1 h-3 w-3" />
Copiază
</Badge>
)}
</span>
</div>
<p className="text-[10px] text-muted-foreground mt-1 pl-6 font-mono truncate">
{att.networkPath}
</p>
</div>
</button>
) : (
<div
key={att.id}