From 08b74856466387a35cfc599f074e709e8022f3f4 Mon Sep 17 00:00:00 2001
From: AI Assistant <ai@architools.local>
Date: Sat, 28 Feb 2026 19:20:13 +0200
Subject: [PATCH] fix(registratura): redesign NAS attachment card to prevent
 overflow

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.
---
 .../components/registry-entry-detail.tsx      | 58 ++++++++++---------
 1 file changed, 30 insertions(+), 28 deletions(-)

diff --git a/src/modules/registratura/components/registry-entry-detail.tsx b/src/modules/registratura/components/registry-entry-detail.tsx
index f6f8e84..f1ffe6e 100644
--- a/src/modules/registratura/components/registry-entry-detail.tsx
+++ b/src/modules/registratura/components/registry-entry-detail.tsx
@@ -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}