Commit 7451d17a69ff7585f302933beeae1037d2c708a8 | the-knife

author	Julius Marminge <julius0216@outlook.com> 2026-09-05 15:51:08-07:00
committer	GitHub <noreply@github.com> 2026-09-05 15:51:08-07:00
log	7451d17a69ff7585f302933beeae1037d2c708a8
tree	1f97c3b4bf74b44b123b56be3064f3f41d154b55
parent	e2e6ce6a29451e9fac612ab83f7a104b6d6475a3
signature	Signed by PGP key B5690EEEBB952194

fix(mobile): size a chat image's frame before its bytes arrive (#10199)

Co-authored-by: Claude Code <noreply@anthropic.com>

2 files changed, 67 insertions(+), 28 deletions(-)

apps
- mobile
  - src
    features
    threads
    ThreadFeed.tsx
    ThreadMarkdownImage.tsx

apps/mobile/src/features/threads/ThreadFeed.tsx+32-16

 @@ -177,6 +177,7 @@ import {
 } from "../files/filePath";
 import { fileChipMenu, resolveFileChipTarget, type FileChipAction } from "./fileChipMenu";
 import {
+  MarkdownImageAvailableWidthContext,
   ThreadMarkdownImage,
   ThreadMarkdownImageUnavailable,
   ThreadMarkdownImageView,
 @@ -206,6 +207,10 @@ function formatMessageTime(input: string): string {
 // text fits at the current font settings. Larger accessibility text is measured.
 const TURN_FOLD_HEIGHT = 42; // min-h-11 (38.5) + mb-1 (3.5), with the mobile 14px rem
 const THREAD_FEED_LAYOUT_TRANSITION = LinearTransition.duration(THREAD_DISCLOSURE_TRANSITION_MS);
+// Tailwind spacing on the mobile 14px rem: px-3.5 on the user bubble, px-1 on
+// assistant rows. Images size their frame from these before their own layout.
+const USER_BUBBLE_HORIZONTAL_PADDING = 3.5 * 3.5;
+const ASSISTANT_ROW_HORIZONTAL_PADDING = 3.5;
 // Let neighboring rows move out of the new rows' space before showing their text.
 const THREAD_FEED_DISCLOSURE_ENTER_TRANSITION = FadeIn.delay(
   THREAD_DISCLOSURE_TRANSITION_MS,
 @@ -1331,6 +1336,8 @@ function renderFeedEntry(
     readonly reviewCommentBubbleWidth: number;
     readonly themeAppearance: "light" | "dark";
     readonly userBubbleMaxWidth: number;
+    /** Width assistant markdown lays out in, so images can size their frame before layout. */
+    readonly markdownContentWidth: number;
   },
 ) {
   const entry = info.item;
 @@ -1452,14 +1459,18 @@ function renderFeedEntry(
             }}
           >
             {message.text.trim().length > 0 ? (
-              <UserMessageContent
+              <MarkdownImageAvailableWidthContext
-                text={renderedText}
+                value={props.userBubbleMaxWidth - USER_BUBBLE_HORIZONTAL_PADDING * 2}
-                markdownStyles={styles}
+              >
-                reviewCommentColors={props.reviewCommentColors}
+                <UserMessageContent
-                skills={props.skills}
+                  text={renderedText}
-                linkHandlers={props.markdownLinkHandlers}
+                  markdownStyles={styles}
-                renderImage={props.renderMarkdownImage}
+                  reviewCommentColors={props.reviewCommentColors}
-              />
+                  skills={props.skills}
+                  linkHandlers={props.markdownLinkHandlers}
+                  renderImage={props.renderMarkdownImage}
+                />
+              </MarkdownImageAvailableWidthContext>
             ) : null}
             {attachments.map((attachment) => {
               return isImageAttachment(attachment) ? (
 @@ -1516,14 +1527,16 @@ function renderFeedEntry(
         {...(enterAnimated ? { entering: FadeIn.duration(220) } : {})}
       >
         {renderedText.trim().length > 0 ? (
-          <AssistantMarkdownContent
+          <MarkdownImageAvailableWidthContext value={props.markdownContentWidth}>
-            markdown={renderedText}
+            <AssistantMarkdownContent
-            markdownStyles={styles}
+              markdown={renderedText}
-            linkHandlers={props.markdownLinkHandlers}
+              markdownStyles={styles}
-            onUseArtifactTemplate={props.onUseArtifactTemplate}
+              linkHandlers={props.markdownLinkHandlers}
-            renderImage={props.renderMarkdownImage}
+              onUseArtifactTemplate={props.onUseArtifactTemplate}
-            skills={props.skills}
+              renderImage={props.renderMarkdownImage}
-          />
+              skills={props.skills}
+            />
+          </MarkdownImageAvailableWidthContext>
         ) : null}
         {attachments.map((attachment) => {
           return isImageAttachment(attachment) ? (
 @@ -1942,6 +1955,7 @@ export const ThreadFeed = memo(function ThreadFeed(props: ThreadFeedProps) {
   });
   const contentWidth = Math.max(0, viewportWidth - contentHorizontalPadding * 2);
   const userBubbleMaxWidth = contentWidth * 0.85;
+  const markdownContentWidth = Math.max(0, contentWidth - ASSISTANT_ROW_HORIZONTAL_PADDING * 2);
   const reviewCommentBubbleWidth = Math.min(Math.max(280, contentWidth * 0.85), contentWidth);
   const insets = useSafeAreaInsets();
   const topContentInset = props.contentTopInset ?? insets.top + IOS_NAV_BAR_HEIGHT;
 @@ -2620,6 +2634,7 @@ export const ThreadFeed = memo(function ThreadFeed(props: ThreadFeedProps) {
             reviewCommentBubbleWidth,
             themeAppearance,
             userBubbleMaxWidth,
+            markdownContentWidth,
             skills: props.skills,
             onUseArtifactTemplate: props.onUseArtifactTemplate,
           })}
 @@ -2641,6 +2656,7 @@ export const ThreadFeed = memo(function ThreadFeed(props: ThreadFeedProps) {
       reviewCommentBubbleWidth,
       themeAppearance,
       userBubbleMaxWidth,
+      markdownContentWidth,
       onCopyWorkRow,
       markdownLinkHandlers,
       onPressPreview,

apps/mobile/src/features/threads/ThreadMarkdownImage.tsx+35-12

 @@ -1,5 +1,5 @@
 import type { AssetResource, EnvironmentId } from "@t3tools/contracts";
-import { useEffect, useId, useState } from "react";
+import { createContext, useContext, useEffect, useId, useState } from "react";
 import {
   ActivityIndicator,
   Image,
 @@ -15,32 +15,56 @@ import { MediaActionsMenu } from "../../components/MediaActionsMenu";
 import { PresentationSource } from "../../components/NativePresentation";
 import { useMediaActions, type MediaActionsSource } from "../../lib/mediaActions";
 import { useAssetUrlState } from "../../state/assets";
-import { MARKDOWN_IMAGE_MAX_WIDTH, resolveMarkdownImageDisplaySize } from "./markdownImageSize";
+import {
+  MARKDOWN_IMAGE_MAX_WIDTH,
+  type MarkdownImageDisplaySize,
+  resolveMarkdownImageDisplaySize,
+} from "./markdownImageSize";
+/**
+ * Width the feed lays markdown out in. The feed already knows this from its
+ * viewport, so an image can size its frame on the first render instead of
+ * waiting for its own onLayout, which would change the row's height once
+ * more after the list has positioned the rows below it. It is an upper
+ * bound: a list item or blockquote indents its column, and the measured
+ * width takes over once it is known.
+ */
+export const MarkdownImageAvailableWidthContext = createContext(0);
 export function ThreadMarkdownImageView(props: {
   readonly uri: string | null;
   readonly sourceKey: string;
   readonly unavailable: boolean;
   readonly alt: string | null;
+  /** Pixel size from the server, when it could read the header; the frame is final from the first render. */
+  readonly knownSize?: { readonly width: number; readonly height: number } | undefined;
   readonly actionsSource?: MediaActionsSource;
   readonly onPressPreview: (source: FilePreviewSource) => void;
 }) {
   const sourceIdentifier = useId();
   const mediaActions = useMediaActions(props.actionsSource);
-  const [availableWidth, setAvailableWidth] = useState(0);
+  const contextWidth = useContext(MarkdownImageAvailableWidthContext);
-  const [sourceSize, setSourceSize] = useState<{ width: number; height: number } | null>(null);
+  const [measuredWidth, setMeasuredWidth] = useState(0);
+  const availableWidth =
+    measuredWidth > 0 && contextWidth > 0
+      ? Math.min(contextWidth, measuredWidth)
+      : contextWidth || measuredWidth;
+  const [decodedSize, setDecodedSize] = useState<{ width: number; height: number } | null>(null);
   const [failedUri, setFailedUri] = useState<string | null>(null);
   useEffect(() => {
-    setSourceSize(null);
+    setDecodedSize(null);
   }, [props.sourceKey]);
   useEffect(() => {
     setFailedUri(null);
   }, [props.uri]);
-  const displaySize =
+  // The decoded size is what the platform actually drew, so it wins over the
-    sourceSize === null
+  // server's header hint once it exists.
+  const sourceSize = decodedSize ?? props.knownSize ?? null;
+  const displaySize: MarkdownImageDisplaySize | null =
+    sourceSize === null || availableWidth <= 0
       ? null
       : resolveMarkdownImageDisplaySize({
           sourceWidth: sourceSize.width,
 @@ -54,7 +78,7 @@ export function ThreadMarkdownImageView(props: {
   return (
     <View
-      onLayout={(event) => setAvailableWidth(event.nativeEvent.layout.width)}
+      onLayout={(event) => setMeasuredWidth(event.nativeEvent.layout.width)}
       style={{ alignSelf: "stretch", gap: 6 }}
     >
       {props.uri === null || failed ? (
 @@ -97,14 +121,12 @@ export function ThreadMarkdownImageView(props: {
             >
               <View
                 className="items-center justify-center overflow-hidden rounded-[10px] bg-md-code-bg"
-                style={{
+                style={frameStyle}
-                  ...frameStyle,
-                }}
               >
                 <ThreadMarkdownImageRequest
                   key={props.uri}
                   uri={props.uri}
-                  onLoad={setSourceSize}
+                  onLoad={setDecodedSize}
                   onError={() => setFailedUri(props.uri)}
                 />
               </View>
 @@ -173,6 +195,7 @@ export function ThreadMarkdownImage(props: {
           : `workspace:${props.resource.path}`
       }
       unavailable={assetUrl._tag === "Failure"}
+      knownSize={assetUrl._tag === "Success" ? assetUrl.imageDimensions : undefined}
       alt={props.alt}
       actionsSource={props.actionsSource}
       onPressPreview={props.onPressPreview}