From d16137bb2ad11eda2384a531ae8ee47668ebc05c Mon Sep 17 00:00:00 2001
From: Paul Nothaft <paul@MacStudio-von-Paul.local>
Date: Tue, 1 Sep 2026 16:48:24 +0200
Subject: [PATCH] fix(contracts): add tooltips to the ellipsized block-library
 names

The Blocks list column ellipsizes names to ~4-6 characters ("Vertr...",
"Bildr...") with no title attribute, so the list is unscannable without
clicking into each block. Add title on the name and description, plus min-w-0
so the name shrinks instead of pushing the badges out.

Did not widen the column: the file carries an explicit design-intent comment
that its two-column grid "intentionally mirrors EmailConfigPage's Templates
tab", and changing the span would break that deliberate parity. The tooltip
resolves the reported unscannability on its own.

Refs testplan REPORT.md #21 (Part 8, S13).
---
 .../pages/admin/contracts/BlockLibraryPage.tsx  | 17 +++++++++++++++--
 1 file changed, 15 insertions(+), 2 deletions(-)

diff --git a/frontend/src/pages/admin/contracts/BlockLibraryPage.tsx b/frontend/src/pages/admin/contracts/BlockLibraryPage.tsx
index ede1a4c2..a684cb74 100644
--- a/frontend/src/pages/admin/contracts/BlockLibraryPage.tsx
+++ b/frontend/src/pages/admin/contracts/BlockLibraryPage.tsx
@@ -309,7 +309,17 @@ export const BlockLibraryPage: React.FC = () => {
                             } ${!b.isActive ? 'opacity-50' : ''}`}
                           >
                             <div className="flex items-center justify-between gap-2">
-                              <p className="font-medium text-neutral-900 dark:text-neutral-100 truncate">
+                              {/* `title` is the only way to read a long block
+                                  name here — the column is narrow enough that
+                                  CSS truncation can cut names to a few
+                                  characters ("Vertr…"), which made the list
+                                  unscannable without clicking each block (QA
+                                  S13). `min-w-0` lets the name shrink instead
+                                  of pushing the badges out of the row. */}
+                              <p
+                                className="font-medium text-neutral-900 dark:text-neutral-100 truncate min-w-0"
+                                title={b.name}
+                              >
                                 {b.name}
                               </p>
                               <div className="flex items-center gap-1.5 flex-shrink-0">
@@ -327,7 +337,10 @@ export const BlockLibraryPage: React.FC = () => {
                               </div>
                             </div>
                             {b.description && (
-                              <p className="text-sm text-neutral-500 dark:text-neutral-400 mt-1 truncate">
+                              <p
+                                className="text-sm text-neutral-500 dark:text-neutral-400 mt-1 truncate"
+                                title={b.description}
+                              >
                                 {b.description}
                               </p>
                             )}