feat: 媒体流图片自适应显示(单图/2图/Telegram式相册)

- 单图气泡按真实比例显示:横图限高260px、过高裁上下;竖图完整铺满宽度不裁、无黑边
- 2张同类相册:都竖图左右并排、都横图上下堆叠,按比例不裁
- 3+张相册:Telegram式马赛克拼贴(竖主图占左+其余堆右 / 横主图占顶+其余排底)
- 图片比例优先用后端width/height,缺失时从加载后的naturalWidth/Height读取
- 新增 constants/media.ts 统一尺寸规范;albumLayout 纯算法附单测

Co-Authored-By: Claude Opus 4.8 (1M context) <noreply@anthropic.com>

src/components/messageStream/bubbles/ImageWithTextBubble.tsx

@@ -1,34 +1,17 @@
 import { useI18n } from "../../../i18n";
 import type { Post } from "../../../types/post";
-import { useLightbox } from "../overlays/ImageLightbox";
-import { AttachmentDownloadPill } from "../AttachmentDownloadPill";
-import { BubbleImage } from "../BubbleImage";
 import { autolink } from "../utils/autolink";
 import { postDisplayText } from "../utils/postText";
+import { SingleImageFrame } from "./SingleImageFrame";
 
 export function ImageWithTextBubble({ post }: { post: Post }) {
-  const { openLightbox } = useLightbox();
   const { lang } = useI18n();
   const att = post.attachments[0];
   const text = postDisplayText(post, lang);
   if (!att) return null;
   return (
     <div className="flex flex-col">
-      <div className="relative h-[180px] w-full overflow-hidden bg-black min-[440px]:h-[210px] md:h-[260px] lg:h-[300px]">
-        <button
-          type="button"
-          onClick={() => openLightbox([att], 0, text, post.id)}
-          className="block h-full w-full"
-          aria-label="View image"
-        >
-          <BubbleImage
-            src={att.url}
-            loading="lazy"
-            className="h-full w-full object-cover"
-          />
-        </button>
-        <AttachmentDownloadPill postId={post.id} attachment={att} />
-      </div>
+      <SingleImageFrame postId={post.id} attachment={att} text={text} />
       {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)}