fix: show download buttons on image albums

src/components/messageStream/bubbles/AlbumBubble.tsx

@@ -3,6 +3,7 @@ import { useEffect, useState } from "react";
 import { createPortal } from "react-dom";
 import { useI18n } from "../../../i18n";
 import type { Attachment, Post } from "../../../types/post";
+import { AttachmentDownloadPill } from "../AttachmentDownloadPill";
 import { useLightbox } from "../overlays/ImageLightbox";
 import { autolink } from "../utils/autolink";
 import { downloadAttachment } from "../utils/downloadFile";
@@ -147,11 +148,14 @@ export function AlbumBubble({ post }: { post: Post }) {
     return (
       <div className="flex flex-col gap-1.5">
         {images.map((att, i) => (
-          <button
+          <div
             key={att.id}
+            className="relative max-h-[180px] w-full overflow-hidden rounded-xl min-[440px]:max-h-[200px] md:max-h-[240px] lg:max-h-[280px]"
+          >
+            <button
               type="button"
               onClick={() => openLightbox(images, i, text, post.id)}
-            className="relative block max-h-[180px] w-full overflow-hidden rounded-xl min-[440px]:max-h-[200px] md:max-h-[240px] lg:max-h-[280px]"
+              className="block w-full"
               aria-label={att.filename}
             >
               <img
@@ -162,6 +166,8 @@ export function AlbumBubble({ post }: { post: Post }) {
                 style={{ aspectRatio: imageRatio(att) }}
               />
             </button>
+            <AttachmentDownloadPill postId={post.id} attachment={att} />
+          </div>
         ))}
         {text ? (
           <div className="message-stream-copyable-text select-text whitespace-pre-wrap break-words text-[14px] leading-snug text-neutral-100">
@@ -181,14 +187,17 @@ export function AlbumBubble({ post }: { post: Post }) {
         {visible.map((att, i) => {
           const isLastSlot = i === MAX_VISIBLE - 1 && extra > 0;
           return (
-            <button
+            <div
               key={att.id}
+              className="relative h-full w-full overflow-hidden"
+            >
+              <button
                 type="button"
                 onClick={() => {
                   if (isLastSlot) setListOpen(true);
                   else openLightbox(images, i, text, post.id);
                 }}
-              className="relative block h-full w-full overflow-hidden"
+                className="block h-full w-full"
                 aria-label={isLastSlot ? "Open image list" : att.filename}
               >
                 <img
@@ -205,6 +214,10 @@ export function AlbumBubble({ post }: { post: Post }) {
                   </div>
                 ) : null}
               </button>
+              {!isLastSlot ? (
+                <AttachmentDownloadPill postId={post.id} attachment={att} />
+              ) : null}
+            </div>
           );
         })}
       </div>