terry/Arkie-Library-Frontend
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Align compact message bubbles within media column

Browse Source
This commit is contained in:
TerryM
2026-05-27 13:16:40 +08:00
parent 565784b4bb
commit a6fda3cd03
2 changed files with 17 additions and 80 deletions
Download Patch File Download Diff File Expand all files Collapse all files

30
src/components/messageStream/MessageBubble.tsx
View File

@@ -32,22 +32,24 @@ export function MessageBubble({ post }: { post: Post }) {
);
return (
<article
<div
id={`post-${post.id}`}
className={`relative rounded-2xl bg-ark-panel text-left shadow-sm ${
isVisual
? "mx-auto w-full max-w-[380px] md:max-w-[680px] lg:max-w-[900px] xl:max-w-[1120px]"
: "self-start w-fit max-w-[92%] md:max-w-[680px] lg:max-w-[760px] xl:max-w-[820px]"
} ${isTextOnly ? "px-3 py-2" : "p-2"}`}
className="mx-auto w-full max-w-[380px] md:max-w-[680px] lg:max-w-[900px] xl:max-w-[1120px]"
>
<Bubble post={post} />
<time
dateTime={post.publishedAt}
className="ml-2 mt-1 inline-block float-right text-[10.5px] leading-none text-neutral-500"
<article
className={`relative rounded-2xl bg-ark-panel text-left shadow-sm ${
isVisual ? "w-full" : "w-fit max-w-full"
} ${isTextOnly ? "px-3 py-2" : "p-2"}`}
>
{formatDateTime(post.publishedAt, lang)}
</time>
<span className="block clear-both" />
</article>
<Bubble post={post} />
<time
dateTime={post.publishedAt}
className="ml-2 mt-1 inline-block float-right text-[10.5px] leading-none text-neutral-500"
>
{formatDateTime(post.publishedAt, lang)}
</time>
<span className="block clear-both" />
</article>
</div>
);
}