ui: re-introduce adaptive download pill sizing for album tiles

- AttachmentDownloadPill: bring back the optional adaptive sizing
  branch (default off). When the host sets containerType: inline-size,
  the pill scales 22-30px with the tile width using a steeper
  18cqw curve, so two-image tiles already reach 30px while tiny
  thumbs in mixed layouts stay at 22px.
- AlbumBubble: opt every tile into adaptive sizing and add the query
  container so the cqw units resolve against each tile's width.
- Single-image and video bubbles continue to render the pill at a
  fixed 30px (no host opt-in needed).
This commit is contained in:
TerryM
2026-05-30 01:27:02 +08:00
parent 4e5093cae0
commit fd46359fd9
2 changed files with 45 additions and 6 deletions

View File

@@ -51,6 +51,8 @@ export function AlbumBubble({ post }: { post: Post }) {
top: `${tile.top * 100}%`,
width: `calc(${tile.width * 100}% - ${ALBUM_GAP}px)`,
height: `calc(${tile.height * 100}% - ${ALBUM_GAP}px)`,
// Query container so the download pill scales with this tile.
containerType: "inline-size",
}}
>
<button
@@ -76,7 +78,11 @@ export function AlbumBubble({ post }: { post: Post }) {
) : null}
</button>
{!isLastSlot ? (
<AttachmentDownloadPill postId={post.id} attachment={att} />
<AttachmentDownloadPill
postId={post.id}
attachment={att}
adaptive
/>
) : null}
</div>
);