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).
This commit is contained in:
@@ -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>
|
||||
)}
|
||||
|
||||
Reference in New Issue
Block a user