fix: 相册改用绝对定位百分比布局,彻底消除底部黑边

CSS grid + aspect-ratio 下 fr 行在部分浏览器不撑满,留出 bg-black。
改为 Telegram 同款:算法输出每块 {left,top,width,height} 百分比坐标,
图块绝对定位铺满容器。顺带修复竖主图在左时右侧堆叠图高度算错未填满列。

Co-Authored-By: Claude Opus 4.8 (1M context) <noreply@anthropic.com>

src/components/messageStream/bubbles/AlbumBubble.tsx

@@ -27,8 +27,9 @@ 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. */}
+      {/* aspect-ratio sets a definite box height; tiles are absolutely
+          positioned by percentage so the mosaic fills it exactly (no CSS-grid
+          `fr` quirks, no leftover black band). */}
       <div
         className="relative w-full overflow-hidden bg-black"
         style={{
@@ -36,61 +37,49 @@ export function AlbumBubble({ post }: { post: Post }) {
           maxHeight: ALBUM_MAX_HEIGHT,
         }}
       >
-        <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
+        {visible.map((att, i) => {
+          const isLastSlot = i === MAX_VISIBLE - 1 && extra > 0;
+          const tile = layout?.tiles[i];
+          if (!tile) return null;
+          return (
+            <div
+              key={att.id}
+              className="absolute overflow-hidden"
+              style={{
+                left: `${tile.left * 100}%`,
+                top: `${tile.top * 100}%`,
+                width: `calc(${tile.width * 100}% - ${ALBUM_GAP}px)`,
+                height: `calc(${tile.height * 100}% - ${ALBUM_GAP}px)`,
+              }}
+            >
+              <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"
                 }
               >
-                <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} />
+                <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}
-              </div>
-            );
-          })}
-        </div>
+              </button>
+              {!isLastSlot ? (
+                <AttachmentDownloadPill postId={post.id} attachment={att} />
+              ) : null}
+            </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">