From 789920d2b94de192d6b5af37977bd90c6f059fc6 Mon Sep 17 00:00:00 2001
From: TerryM <chiachintat10@gmail.com>
Date: Fri, 29 May 2026 22:37:16 +0800
Subject: [PATCH] =?UTF-8?q?fix:=20=E4=BF=AE=E5=A4=8D=E7=9B=B8=E5=86=8C?=
 =?UTF-8?q?=E5=BA=95=E9=83=A8=E9=BB=91=E8=BE=B9(grid=20=E7=94=A8=20aspect-?=
 =?UTF-8?q?ratio=20=E6=97=B6=20fr=20=E8=A1=8C=E4=B8=8D=E6=92=91=E6=BB=A1)?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

aspect-ratio 单独作用在 grid 上时,容器高度对 fr 行属"非确定高度",
fr 退化为 max-content,行被压成内容高度,容器底部露出 bg-black。
改为:aspect-ratio + maxHeight 放外层 wrapper,内层 grid 用 absolute
inset-0 撑满,获得确定高度,fr 行正常拉伸,黑边消除。

Co-Authored-By: Claude Opus 4.8 (1M context) <noreply@anthropic.com>
---
 .../messageStream/bubbles/AlbumBubble.tsx     | 100 ++++++++++--------
 1 file changed, 55 insertions(+), 45 deletions(-)

diff --git a/src/components/messageStream/bubbles/AlbumBubble.tsx b/src/components/messageStream/bubbles/AlbumBubble.tsx
index 13f4619..a238382 100644
--- a/src/components/messageStream/bubbles/AlbumBubble.tsx
+++ b/src/components/messageStream/bubbles/AlbumBubble.tsx
@@ -27,60 +27,70 @@ 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={{
-          gap: ALBUM_GAP,
-          gridTemplateColumns: layout?.gridTemplateColumns,
-          gridTemplateRows: layout?.gridTemplateRows,
           aspectRatio: layout?.aspectRatio,
           maxHeight: ALBUM_MAX_HEIGHT,
         }}
       >
-        {visible.map((att, i) => {
-          const isLastSlot = i === MAX_VISIBLE - 1 && extra > 0;
-          const tile = layout?.tiles[i];
-          return (
-            <div
-              key={att.id}
-              className="relative overflow-hidden"
-              style={
-                tile
-                  ? {
-                      gridColumn: `${tile.colStart} / ${tile.colEnd}`,
-                      gridRow: `${tile.rowStart} / ${tile.rowEnd}`,
-                    }
-                  : undefined
-              }
-            >
-              <button
-                type="button"
-                onClick={() => openLightbox(images, i, text, post.id)}
-                className="group block h-full w-full"
-                aria-label={
-                  isLastSlot ? `View all ${images.length} images` : "View image"
+        <div
+          className="absolute inset-0 grid"
+          style={{
+            gap: ALBUM_GAP,
+            gridTemplateColumns: layout?.gridTemplateColumns,
+            gridTemplateRows: layout?.gridTemplateRows,
+          }}
+        >
+          {visible.map((att, i) => {
+            const isLastSlot = i === MAX_VISIBLE - 1 && extra > 0;
+            const tile = layout?.tiles[i];
+            return (
+              <div
+                key={att.id}
+                className="relative overflow-hidden"
+                style={
+                  tile
+                    ? {
+                        gridColumn: `${tile.colStart} / ${tile.colEnd}`,
+                        gridRow: `${tile.rowStart} / ${tile.rowEnd}`,
+                      }
+                    : undefined
                 }
               >
-                <BubbleImage
-                  src={sources[i]}
-                  fallbackSrc={[att.thumbUrl, att.url]}
-                  loading="lazy"
-                  className="h-full w-full object-cover transition duration-300 group-hover:scale-[1.03]"
-                />
-                {isLastSlot ? (
-                  <div className="absolute inset-0 flex flex-col items-center justify-center gap-0.5 bg-black/60 text-white backdrop-blur-[1px] transition group-hover:bg-black/50">
-                    <span className="text-3xl font-bold leading-none md:text-4xl">
-                      +{extra}
-                    </span>
-                  </div>
+                <button
+                  type="button"
+                  onClick={() => openLightbox(images, i, text, post.id)}
+                  className="group block h-full w-full"
+                  aria-label={
+                    isLastSlot
+                      ? `View all ${images.length} images`
+                      : "View image"
+                  }
+                >
+                  <BubbleImage
+                    src={sources[i]}
+                    fallbackSrc={[att.thumbUrl, att.url]}
+                    loading="lazy"
+                    className="h-full w-full object-cover transition duration-300 group-hover:scale-[1.03]"
+                  />
+                  {isLastSlot ? (
+                    <div className="absolute inset-0 flex flex-col items-center justify-center gap-0.5 bg-black/60 text-white backdrop-blur-[1px] transition group-hover:bg-black/50">
+                      <span className="text-3xl font-bold leading-none md:text-4xl">
+                        +{extra}
+                      </span>
+                    </div>
+                  ) : null}
+                </button>
+                {!isLastSlot ? (
+                  <AttachmentDownloadPill postId={post.id} attachment={att} />
                 ) : null}
-              </button>
-              {!isLastSlot ? (
-                <AttachmentDownloadPill postId={post.id} attachment={att} />
-              ) : null}
-            </div>
-          );
-        })}
+              </div>
+            );
+          })}
+        </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">