fix(mobile): treat the feed width as a bound and let the decoded size win

A list item or blockquote indents its column below the feed width, so
the measured width takes over once the row has laid out. The decoded
size wins over the server's header hint so a wrong hint cannot stick.
The padding constants use the mobile 14px rem.

Co-Authored-By: Claude Code <noreply@anthropic.com>

Author: juliusmarminge

apps/mobile/src/features/threads/ThreadFeed.tsx

@@ -207,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,
@@ -1455,7 +1459,9 @@ function renderFeedEntry(
             }}
           >
             {message.text.trim().length > 0 ? (
-              <MarkdownImageAvailableWidthContext value={props.userBubbleMaxWidth - 28}>
+              <MarkdownImageAvailableWidthContext
+                value={props.userBubbleMaxWidth - USER_BUBBLE_HORIZONTAL_PADDING * 2}
+              >
                 <UserMessageContent
                   text={renderedText}
                   markdownStyles={styles}
@@ -1949,8 +1955,7 @@ export const ThreadFeed = memo(function ThreadFeed(props: ThreadFeedProps) {
   });
   const contentWidth = Math.max(0, viewportWidth - contentHorizontalPadding * 2);
   const userBubbleMaxWidth = contentWidth * 0.85;
-  // Assistant rows sit inside px-1.
-  const markdownContentWidth = Math.max(0, contentWidth - 8);
+  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;

apps/mobile/src/features/threads/ThreadMarkdownImage.tsx

@@ -25,7 +25,9 @@ import {
  * 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.
+ * 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);
 
@@ -43,7 +45,10 @@ export function ThreadMarkdownImageView(props: {
   const mediaActions = useMediaActions(props.actionsSource);
   const contextWidth = useContext(MarkdownImageAvailableWidthContext);
   const [measuredWidth, setMeasuredWidth] = useState(0);
-  const availableWidth = contextWidth > 0 ? contextWidth : measuredWidth;
+  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);
 
@@ -55,7 +60,9 @@ export function ThreadMarkdownImageView(props: {
     setFailedUri(null);
   }, [props.uri]);
 
-  const sourceSize = props.knownSize ?? decodedSize;
+  // The decoded size is what the platform actually drew, so it wins over the
+  // server's header hint once it exists.
+  const sourceSize = decodedSize ?? props.knownSize ?? null;
   const displaySize: MarkdownImageDisplaySize | null =
     sourceSize === null || availableWidth <= 0
       ? null
@@ -71,9 +78,7 @@ export function ThreadMarkdownImageView(props: {
 
   return (
     <View
-      onLayout={
-        contextWidth > 0 ? undefined : (event) => setMeasuredWidth(event.nativeEvent.layout.width)
-      }
+      onLayout={(event) => setMeasuredWidth(event.nativeEvent.layout.width)}
       style={{ alignSelf: "stretch", gap: 6 }}
     >
       {props.uri === null || failed ? (