From 7cd48f767e90fbc2105acf20132670ba9ebaf496 Mon Sep 17 00:00:00 2001
From: TerryM <chiachintat10@gmail.com>
Date: Wed, 27 May 2026 11:58:40 +0800
Subject: [PATCH] style: align and widen message stream cards

---
 src/components/messageStream/FilterChips.tsx   | 2 +-
 src/components/messageStream/MessageBubble.tsx | 6 +++---
 2 files changed, 4 insertions(+), 4 deletions(-)

diff --git a/src/components/messageStream/FilterChips.tsx b/src/components/messageStream/FilterChips.tsx
index 2477975..819a816 100644
--- a/src/components/messageStream/FilterChips.tsx
+++ b/src/components/messageStream/FilterChips.tsx
@@ -21,7 +21,7 @@ export type FilterChipsProps = {
 export function FilterChips({ type, onTypeChange }: FilterChipsProps) {
   const { t } = useI18n();
   return (
-    <div className="sticky top-0 z-10 -mx-3 border-b border-ark-line bg-ark-bg/90 px-3 py-2 backdrop-blur md:-mx-0 md:rounded-t-xl">
+    <div className="sticky top-0 z-10 border-b border-ark-line bg-ark-bg/90 py-2 backdrop-blur md:rounded-t-xl">
       <div className="flex gap-1.5 overflow-x-auto whitespace-nowrap [-ms-overflow-style:none] [scrollbar-width:none] [&::-webkit-scrollbar]:hidden">
         {TYPE_FILTERS.map((tp) => {
           const active = type === tp;
diff --git a/src/components/messageStream/MessageBubble.tsx b/src/components/messageStream/MessageBubble.tsx
index 4ba387a..be9c015 100644
--- a/src/components/messageStream/MessageBubble.tsx
+++ b/src/components/messageStream/MessageBubble.tsx
@@ -34,10 +34,10 @@ export function MessageBubble({ post }: { post: Post }) {
   return (
     <article
       id={`post-${post.id}`}
-      className={`relative self-start rounded-2xl bg-ark-panel text-left shadow-sm ${
+      className={`relative mx-auto rounded-2xl bg-ark-panel text-left shadow-sm ${
         isVisual
-          ? "w-[82vw] max-w-[320px] md:w-[52vw] md:max-w-[420px] lg:w-[46vw] lg:max-w-[520px]"
-          : "inline-block max-w-[92%] md:max-w-[680px]"
+          ? "w-[82vw] max-w-[320px] md:w-[52vw] md:max-w-[420px] lg:w-[52vw] lg:max-w-[680px] xl:w-[48vw] xl:max-w-[760px]"
+          : "inline-block max-w-[92%] md:max-w-[680px] lg:max-w-[760px] xl:max-w-[820px]"
       } ${isTextOnly ? "px-3 py-2" : "p-2"}`}
     >
       <Bubble post={post} />