Sign up
View stargazers13Sign up

fix(web): size the chat image slot from server-reported dimensions#10200

merged3
media-dims/mobile
media-dims/web
openedSep 5, 2026byJJulius Marminge
3 files changed
View on GitHubTwo-way sync enabledPR last imported 4d ago
1 unresolved thread · Jump to file
Selected thread: apps/web/src/components/ChatMarkdown.tsx:1549 — 🟡 **Medium** `components/ChatMarkdown.tsx:1549` The viewed-image `{ maxHeight: "16rem" }` override leaves `width`/`maxWidth` sized for `authoredImageSizeStyle`'s `30rem` cap, so portrait images reserve a box with excess horizontal space instead of preserving their aspect ratio. Recompute the width constraint from the effective height cap, or use sizing that preserves the ratio under both limits. <details> <summary>🚀 Reply "<strong>fix it for me</strong>" or copy this <strong>AI Prompt</strong> for your agent:</summary> ```text In file @apps/web/src/components/ChatMarkdown.tsx around line 1549: The viewed-image `{ maxHeight: "16rem" }` override leaves `width`/`maxWidth` sized for `authoredImageSizeStyle`'s `30rem` cap, so portrait images reserve a box with excess horizontal space instead of preserving their aspect ratio. Recompute the width constraint from the effective height cap, or use sizing that preserves the ratio under both limits. ``` </details> <!-- macroscope-meta: {"kind":"code_review","variant":"195358a06841b2d4d03feb0d212d1ca7"} -->
0 / 3 viewed3 files changedLine totals unavailable

apps/web/src/components/ChatMarkdown.tsx · Earlier revision f3bcde21 · right 1549

Original diff
@@ -1538,6 +1538,17 @@ export const ChatMarkdownAssetImage = memo(function ChatMarkdownAssetImage(props
   const reference = path ? mediaFileReference(path, props.workspaceRoot) : undefined;
   const relativePath = reference?.relativePath;
   const src = assetUrl._tag === "Success" ? assetUrl.url + (props.srcFragment ?? "") : null;
+  // The server reads the pixel size from the file header, so the slot can be
+  // the image's final box instead of a 16:9 guess. An authored size, or a
+  // caller's cap such as the viewed-image row's max height, layers on top.
+  const knownSize = assetUrl._tag === "Success" ? assetUrl.imageDimensions : undefined;
+  const knownSizeStyle = knownSize
+    ? authoredImageSizeStyle(knownSize.width, knownSize.height)
+    : undefined;
+  const style =
+    knownSizeStyle && props.style
M
macroscopeappBotSep 5, 2026

🟡 Medium components/ChatMarkdown.tsx:1549

The viewed-image { maxHeight: "16rem" } override leaves width/maxWidth sized for authoredImageSizeStyle's 30rem cap, so portrait images reserve a box with excess horizontal space instead of preserving their aspect ratio. Recompute the width constraint from the effective height cap, or use sizing that preserves the ratio under both limits.

🚀 Reply "fix it for me" or copy this AI Prompt for your agent:
text
1In file @apps/web/src/components/ChatMarkdown.tsx around line 1549:
2
3The viewed-image `{ maxHeight: "16rem" }` override leaves `width`/`maxWidth` sized for `authoredImageSizeStyle`'s `30rem` cap, so portrait images reserve a box with excess horizontal space instead of preserving their aspect ratio. Recompute the width constraint from the effective height cap, or use sizing that preserves the ratio under both limits.
J
Julius MarmingeSep 5, 2026

Fixed in b1c674214b. The cap is passed as maxHeightRem and folded into the width bound (max-width: min(100%, 30rem, 16·w/h rem)), so a 720×1400 image capped at 16rem gets a 132px-wide box rather than a 30rem-wide one. Test added.