style(client): put the preview invite over the thumbnail, not in the card facts

The invite as an extra meta row read as clutter and grew the card on hover.
It now covers the attachment's 64px thumbnail (a dimmed mask with the label
centered), so the facts beside it never move, a long English label wraps
inside the tile, and keyboard focus shows it too.

src/client/components/attachments.tsx

@@ -127,24 +127,26 @@ function AttachmentCard(props: {
       data-state={state}
       onClick={props.onOpen}
     >
-      {image
-        ? (
-          <span className="lc-att-thumb">
-            {thumb.src !== null
-              ? <img src={thumb.src} alt={name} />
-              : (
-                <span className={thumb.failed ? 'lc-att-err' : 'lc-att-ph'}>
-                  {thumb.failed ? '⚠' : load === undefined ? '🖼' : t('attach.loading')}
-                </span>
-              )}
-          </span>
-        )
-        : (
-          <span className="lc-att-thumb lc-att-thumb-file">
-            <FileTypeGlyph path={name} size={28} />
-            <span className="lc-att-ext">{typeOf(attachment, t)}</span>
-          </span>
-        )}
+      <span className={'lc-att-thumb' + (image ? '' : ' lc-att-thumb-file')}>
+        {image
+          ? thumb.src !== null
+            ? <img src={thumb.src} alt={name} />
+            : (
+              <span className={thumb.failed ? 'lc-att-err' : 'lc-att-ph'}>
+                {thumb.failed ? '⚠' : load === undefined ? '🖼' : t('attach.loading')}
+              </span>
+            )
+          : (
+            <>
+              <FileTypeGlyph path={name} size={28} />
+              <span className="lc-att-ext">{typeOf(attachment, t)}</span>
+            </>
+          )}
+        {/* The invite rides the thumbnail: the facts below never move, and nothing wraps around it. */}
+        <span className={'lc-att-hint' + (state === 'opening' ? ' lc-att-hint-on' : '')}>
+          {state === 'opening' ? t('attach.loading') : hint}
+        </span>
+      </span>
       <span className="lc-att-meta">
         <span className="lc-att-name" title={name}>{name}</span>
         <span className="lc-att-row"><b className="lc-att-row-label">{t('attach.type')}</b>{typeOf(attachment, t)}</span>
@@ -154,11 +156,6 @@ function AttachmentCard(props: {
           </span>
         ))}
         {state === 'failed' ? <span className="lc-att-fail">{t('attach.unavailable')}</span> : null}
-        {state === 'failed' ? null : (
-          <span className={'lc-att-hint' + (state === 'opening' ? ' lc-att-hint-on' : '')}>
-            {state === 'opening' ? t('attach.loading') : hint}
-          </span>
-        )}
       </span>
     </button>
   )

src/client/styles/attachments.css

@@ -17,9 +17,9 @@
 .lc-att-row-label { display: inline-block; min-width: 3.2em; font-weight: 400; }
 /* A refused open reports on its own card — the click never lands anywhere else. */
 .lc-att-fail { font-size: 11px; color: var(--dsw-alias-state-error-primary, var(--dsw-alias-label-secondary)); }
-/* The preview invite is a normal meta row: it fades in on hover/focus, so it never paints over the
-   name and the card never changes height when it appears. */
-.lc-att-hint { font-size: 11px; color: var(--dsw-alias-label-secondary); opacity: 0; transition: opacity var(--ds-transition-duration, 0.2s) var(--ds-ease-in-out, ease-in-out); }
+/* The preview invite covers the thumbnail on hover/focus: the facts beside it never move, and the
+   label wraps inside the 64px tile instead of widening the card. */
+.lc-att-hint { position: absolute; inset: 0; z-index: 1; display: grid; place-items: center; padding: 2px; box-sizing: border-box; background: var(--dsw-alias-bg-mask-1, rgba(0, 0, 0, 0.45)); color: var(--dsw-alias-label-primary-foreground, #fff); font-size: 10px; line-height: 1.25; text-align: center; overflow-wrap: anywhere; opacity: 0; transition: opacity var(--ds-transition-duration, 0.2s) var(--ds-ease-in-out, ease-in-out); pointer-events: none; }
 .lc-att-item:hover .lc-att-hint, .lc-att-item:focus-visible .lc-att-hint, .lc-att-hint-on { opacity: 1; }
 
 /* Under width pressure the two-column grid folds to one column (a thumbnail plus its facts needs ~240px). */