src/components/messageStream/AttachmentDownloadPill.tsx

@@ -12,6 +12,14 @@ type AttachmentDownloadPillProps = {
   attachment: Attachment;
   leadingLabel?: string;
   className?: string;
+  /**
+   * When true, the pill scales with its container's width via container-query
+   * units (clamped to a min/max). The host element must establish a query
+   * container (e.g. `style={{ containerType: "inline-size" }}`). Use this on
+   * album tiles so the pill shrinks on small thumbnails. Defaults to a fixed
+   * size 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();
@@ -38,28 +47,42 @@ export function AttachmentDownloadPill({
     }
   };
 
+  // Fixed default vs. container-query-driven adaptive sizing (clamped).
+  const fontCls = adaptive ? "text-[clamp(10px,5cqw,12px)]" : "text-[12px]";
+  const squareCls = adaptive
+    ? "h-[clamp(22px,11cqw,30px)] w-[clamp(22px,11cqw,30px)]"
+    : "h-[30px] w-[30px]";
+  const iconCls = adaptive
+    ? "h-[clamp(13px,6.5cqw,18px)] w-[clamp(13px,6.5cqw,18px)]"
+    : "h-[18px] w-[18px]";
+  const textBoxCls = adaptive
+    ? "h-[clamp(22px,11cqw,30px)] px-[clamp(6px,3cqw,10px)]"
+    : "h-[30px] px-2.5";
+
   return (
     <button
       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 ${fontCls} 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 ${squareCls} items-center justify-center bg-[#545454]/50 transition group-hover:bg-[#545454]/70`}
+      >
         {isDownloading ? (
           <LoaderCircle
-            className="h-[18px] w-[18px] animate-spin"
+            className={`${iconCls} animate-spin`}
             strokeWidth={2.3}
           />
         ) : (
-          <DownloadCloudIcon className="h-[18px] w-[18px]" />
+          <DownloadCloudIcon className={iconCls} />
         )}
       </span>
-      <span className="flex h-[30px] items-center gap-0.5 px-2.5">
+      <span className={`flex ${textBoxCls} items-center gap-0.5`}>
         {isDownloading ? (
           t("downloading")
         ) : (

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>
           );