## Problem
In compact link preview cards with an image, the thumbnail's corners
looked inconsistent — the flush left side and the interior right side
read as different shapes.
## Cause
The `Attachment` shell rounds its corners with a **smooth-corner
(squircle) clip path** via `useSmoothCorners`, not a plain
`border-radius`. In compact image mode the shell has `p-0`, so the
thumbnail sits flush against its left, top, and bottom edges.
That means:
- **Left corners** are carved by the shell's smoothed clip path.
- **Right corners** are drawn by the thumbnail's own plain
`border-radius`.
A circular arc and a smoothed corner of the *same* radius are different
shapes (at 16px the smoothed curve starts 25.6px along the edge instead
of 16px). So the two sides could never match by picking a radius value —
the thumbnail's class has no effect on its left corners at all.
## Fix
Give the thumbnail the same `useSmoothCorners` treatment as the shell,
so both sides share one curve.
- Radius token unchanged: `rounded-2xl` (16px).
- The shell and the shared `Attachment` component are untouched, so no
other `Attachment` consumer changes.
Verified on a rendered card — thumbnail vs shell now agree on all three:
arc radius (16), smoothing (0.6), and curve start (25.6px).
## Hardening
The underlying issue is an invariant that lived nowhere: **a child flush
against a smooth-cornered parent must share its corner treatment.** This
is why the bug was easy to introduce and hard to diagnose.
- Documented the invariant in `smoothCorners.ts`, where anyone reaching
for the hook will see it.
- Added an `expectSmoothCorners()` guard to the existing compact-preview
e2e test. Confirmed it **fails** when the fix is reverted, so it
genuinely bites.
Note: this cannot be a lint rule — "flush" is a runtime layout fact, not
visible in the source.
## Known follow-up (not in this PR)
The composer link preview (`useComposerLinkPreviews.tsx`) has the same
latent issue: a flush thumbnail with a hand-copied `rounded-l-2xl` that
happens to match the shell's current 16px. It is correct today only by
coincidence of two literals agreeing. Left for a separate PR rather than
expanding scope here.
## Screenshots
The same compact card and content before and after the change.
| Before | After |
| --- | --- |
| Original `rounded-xl` (12px) thumbnail: left corners are clipped by
the card’s 16px smooth silhouette while the right corners keep the
thumbnail’s smaller plain radius | `rounded-2xl` (16px) thumbnail with
the same smooth-corner treatment as the card |
| 
| 
|
## Verification
- `pnpm exec biome check` on all three touched files
- `pnpm exec tsc --noEmit`
- `node --test src/shared/ui/smoothCorners.test.mjs` — 3 passed
- All 18 link-preview e2e tests pass
- Guard verified to fail without the fix, then pass with it
Signed-off-by: morgmart <98432065+morgmart@users.noreply.github.com>
