From fd46359fd95f927a0f72d537e510dd35be5d6be6 Mon Sep 17 00:00:00 2001
From: TerryM <chiachintat10@gmail.com>
Date: Sat, 30 May 2026 01:27:02 +0800
Subject: [PATCH] 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).
---
 .../messageStream/AttachmentDownloadPill.tsx  | 43 ++++++++++++++++---
 .../messageStream/bubbles/AlbumBubble.tsx     |  8 +++-
 2 files changed, 45 insertions(+), 6 deletions(-)

diff --git a/src/components/messageStream/AttachmentDownloadPill.tsx b/src/components/messageStream/AttachmentDownloadPill.tsx
index 0487807..82b51d3 100644
--- a/src/components/messageStream/AttachmentDownloadPill.tsx
+++ b/src/components/messageStream/AttachmentDownloadPill.tsx
@@ -12,6 +12,14 @@ type AttachmentDownloadPillProps = {
   attachment: Attachment;
   leadingLabel?: string;
   className?: string;
+  /**
+   * When true, the pill scales with its host container's width via container-
+   * query units (clamped 22-30px). The host element must establish a query
+   * container with `style={{ containerType: "inline-size" }}`. Use this on
+   * album tiles so the pill shrinks on small thumbnails in mixed layouts.
+   * Defaults to false (fixed 30px) for standalone images/videos.
+   */
+  adaptive?: boolean;
 };
 
 export function AttachmentDownloadPill({
@@ -19,6 +27,7 @@ export function AttachmentDownloadPill({
   attachment,
   leadingLabel,
   className = "absolute left-2 top-2",
+  adaptive = false,
 }: AttachmentDownloadPillProps) {
   const { t } = useI18n();
   const { showToast } = useToast();
@@ -42,23 +51,47 @@ export function AttachmentDownloadPill({
       type="button"
       onClick={handleDownload}
       disabled={isDownloading}
-      className={`group z-10 inline-flex overflow-hidden rounded-full bg-black/80 text-[12px] text-white shadow-lg ring-1 ring-inset ring-white/20 backdrop-blur-md transition hover:bg-black/90 disabled:cursor-wait ${className}`}
+      className={`group z-10 inline-flex overflow-hidden rounded-full bg-black/80 ${
+        adaptive ? "text-[clamp(10px,7cqw,12px)]" : "text-[12px]"
+      } text-white shadow-lg ring-1 ring-inset ring-white/20 backdrop-blur-md transition hover:bg-black/90 disabled:cursor-wait ${className}`}
       aria-label={
         isDownloading ? t("downloading") : `Download ${attachment.filename}`
       }
       aria-busy={isDownloading}
     >
-      <span className="flex h-[30px] w-[30px] items-center justify-center bg-[#545454]/50 transition group-hover:bg-[#545454]/70">
+      <span
+        className={`flex items-center justify-center bg-[#545454]/50 transition group-hover:bg-[#545454]/70 ${
+          adaptive
+            ? "h-[clamp(22px,18cqw,30px)] w-[clamp(22px,18cqw,30px)]"
+            : "h-[30px] w-[30px]"
+        }`}
+      >
         {isDownloading ? (
           <LoaderCircle
-            className="h-[18px] w-[18px] animate-spin"
+            className={`${
+              adaptive
+                ? "h-[clamp(13px,11cqw,18px)] w-[clamp(13px,11cqw,18px)]"
+                : "h-[18px] w-[18px]"
+            } animate-spin`}
             strokeWidth={2.3}
           />
         ) : (
-          <DownloadCloudIcon className="h-[18px] w-[18px]" />
+          <DownloadCloudIcon
+            className={
+              adaptive
+                ? "h-[clamp(13px,11cqw,18px)] w-[clamp(13px,11cqw,18px)]"
+                : "h-[18px] w-[18px]"
+            }
+          />
         )}
       </span>
-      <span className="flex h-[30px] items-center gap-0.5 px-2.5">
+      <span
+        className={`flex items-center gap-0.5 ${
+          adaptive
+            ? "h-[clamp(22px,18cqw,30px)] px-[clamp(6px,6cqw,10px)]"
+            : "h-[30px] px-2.5"
+        }`}
+      >
         {isDownloading ? (
           t("downloading")
         ) : (
diff --git a/src/components/messageStream/bubbles/AlbumBubble.tsx b/src/components/messageStream/bubbles/AlbumBubble.tsx
index fe1c68d..6720d05 100644
--- a/src/components/messageStream/bubbles/AlbumBubble.tsx
+++ b/src/components/messageStream/bubbles/AlbumBubble.tsx
@@ -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>
           );