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} />