fix: 修复相册底部黑边(grid 用 aspect-ratio 时 fr 行不撑满)
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>
This commit is contained in:
@@ -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)}
|
||||
|
||||
Reference in New Issue
Block a user