src/components/messageStream/bubbles/AlbumBubble.tsx

@@ -27,14 +27,21 @@ export function AlbumBubble({ post }: { post: Post }) {
 
   return (
     <div className="flex flex-col">
+      {/* aspect-ratio lives on the wrapper so the grid gets a *definite* height
+          (inset-0) and its fr rows stretch instead of collapsing to content. */}
       <div
-        className="grid overflow-hidden bg-black"
+        className="relative w-full overflow-hidden bg-black"
+        style={{
+          aspectRatio: layout?.aspectRatio,
+          maxHeight: ALBUM_MAX_HEIGHT,
+        }}
+      >
+        <div
+          className="absolute inset-0 grid"
           style={{
             gap: ALBUM_GAP,
             gridTemplateColumns: layout?.gridTemplateColumns,
             gridTemplateRows: layout?.gridTemplateRows,
-          aspectRatio: layout?.aspectRatio,
-          maxHeight: ALBUM_MAX_HEIGHT,
           }}
         >
           {visible.map((att, i) => {
@@ -58,7 +65,9 @@ export function AlbumBubble({ post }: { post: Post }) {
                   onClick={() => openLightbox(images, i, text, post.id)}
                   className="group block h-full w-full"
                   aria-label={
-                  isLastSlot ? `View all ${images.length} images` : "View image"
+                    isLastSlot
+                      ? `View all ${images.length} images`
+                      : "View image"
                   }
                 >
                   <BubbleImage
@@ -82,6 +91,7 @@ export function AlbumBubble({ post }: { post: Post }) {
             );
           })}
         </div>
+      </div>
       {text ? (
         <div className="message-stream-copyable-text select-text whitespace-pre-wrap break-words px-4 pt-3 text-[14px] leading-6 text-neutral-100">
           {autolink(text)}