From 565784b4bbe4423a10e3be850dc187bd9277dde0 Mon Sep 17 00:00:00 2001
From: TerryM <chiachintat10@gmail.com>
Date: Wed, 27 May 2026 12:58:35 +0800
Subject: [PATCH 1/2] Shrink non-media message bubbles to content

---
 src/components/messageStream/MessageBubble.tsx | 9 ++++++++-
 1 file changed, 8 insertions(+), 1 deletion(-)

diff --git a/src/components/messageStream/MessageBubble.tsx b/src/components/messageStream/MessageBubble.tsx
index 00fafad..0cb931f 100644
--- a/src/components/messageStream/MessageBubble.tsx
+++ b/src/components/messageStream/MessageBubble.tsx
@@ -27,11 +27,18 @@ export function MessageBubble({ post }: { post: Post }) {
   const { lang } = useI18n();
   const Bubble = pickBubble(post);
   const isTextOnly = post.attachments.length === 0;
+  const isVisual = post.attachments.some(
+    (a) => a.kind === "image" || a.kind === "video",
+  );
 
   return (
     <article
       id={`post-${post.id}`}
-      className={`relative mx-auto w-full max-w-[380px] rounded-2xl bg-ark-panel text-left shadow-sm md:max-w-[680px] lg:max-w-[900px] xl:max-w-[1120px] ${isTextOnly ? "px-3 py-2" : "p-2"}`}
+      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"}`}
     >
       <Bubble post={post} />
       <time
-- 
2.49.1


From a6fda3cd03c398b4da50ab1f7bda981b95465ffb Mon Sep 17 00:00:00 2001
From: TerryM <chiachintat10@gmail.com>
Date: Wed, 27 May 2026 13:16:40 +0800
Subject: [PATCH 2/2] Align compact message bubbles within media column

---
 .../messageStream/MessageBubble.tsx           | 30 +++++----
 .../messageStream/utils/downloadFile.ts       | 67 +------------------
 2 files changed, 17 insertions(+), 80 deletions(-)

diff --git a/src/components/messageStream/MessageBubble.tsx b/src/components/messageStream/MessageBubble.tsx
index 0cb931f..5e1fb73 100644
--- a/src/components/messageStream/MessageBubble.tsx
+++ b/src/components/messageStream/MessageBubble.tsx
@@ -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>
   );
 }
diff --git a/src/components/messageStream/utils/downloadFile.ts b/src/components/messageStream/utils/downloadFile.ts
index 99d2fdf..c9050a4 100644
--- a/src/components/messageStream/utils/downloadFile.ts
+++ b/src/components/messageStream/utils/downloadFile.ts
@@ -1,27 +1,5 @@
 import { assetUrl } from "../../../api";
 
-type SaveFilePicker = (options?: {
-  suggestedName?: string;
-  types?: Array<{
-    description?: string;
-    accept: Record<string, string[]>;
-  }>;
-}) => Promise<{
-  createWritable: () => Promise<{
-    write: (data: Blob) => Promise<void>;
-    close: () => Promise<void>;
-  }>;
-}>;
-
-type NavigatorWithFileShare = Navigator & {
-  canShare?: (data: { files?: File[] }) => boolean;
-  share?: (data: { files?: File[]; title?: string }) => Promise<void>;
-};
-
-type WindowWithSavePicker = Window & {
-  showSaveFilePicker?: SaveFilePicker;
-};
-
 export function attachmentDownloadUrl(postId: string, attachmentId: string) {
   return assetUrl(
     `/api/posts/${encodeURIComponent(postId)}/attachments/${encodeURIComponent(
@@ -39,45 +17,7 @@ export async function downloadAttachment(
 }
 
 export async function downloadFile(url: string, filename: string) {
-  const res = await fetch(url, { credentials: "include" });
-  if (!res.ok) throw new Error(await res.text());
-
-  const blob = await res.blob();
-  const safeName = filename || "download";
-
-  if (window.isSecureContext) {
-    const picker = (window as WindowWithSavePicker).showSaveFilePicker;
-    if (picker) {
-      const handle = await picker({
-        suggestedName: safeName,
-        types: blob.type
-          ? [
-              {
-                description: "File",
-                accept: { [blob.type]: [extensionFromName(safeName)] },
-              },
-            ]
-          : undefined,
-      });
-      const writable = await handle.createWritable();
-      await writable.write(blob);
-      await writable.close();
-      return;
-    }
-  }
-
-  const file = new File([blob], safeName, {
-    type: blob.type || "application/octet-stream",
-  });
-  const nav = navigator as NavigatorWithFileShare;
-  if (nav.canShare?.({ files: [file] }) && nav.share) {
-    await nav.share({ files: [file], title: safeName });
-    return;
-  }
-
-  const objectUrl = URL.createObjectURL(blob);
-  triggerDownload(objectUrl, safeName);
-  window.setTimeout(() => URL.revokeObjectURL(objectUrl), 30_000);
+  triggerDownload(url, filename || "download");
 }
 
 function triggerDownload(url: string, filename: string) {
@@ -89,8 +29,3 @@ function triggerDownload(url: string, filename: string) {
   a.click();
   a.remove();
 }
-
-function extensionFromName(filename: string) {
-  const match = /\.[^.]+$/.exec(filename);
-  return match?.[0] || ".bin";
-}
-- 
2.49.1