From 6a76419c4244a2fd4dd87862f520adfc3b612d27 Mon Sep 17 00:00:00 2001
From: Eivind Jonassen <eivind.jonassen@gmail.com>
Date: Tue, 29 Sep 2026 00:10:01 +0200
Subject: [PATCH] Fix prompt bubble sizing and improve contrast

Measure prompt text width on iOS so native selectable text cannot collapse its bubble. Fit prompts to their content with an 80 percent maximum width, use a lighter grey background, and remove the YOU label. Preserve full-width accommodation for large text.
---
 .../mobile/src/screens/session-transcript.tsx | 30 +++++++++++++------
 apps/mobile/src/theme.ts                      |  1 +
 2 files changed, 22 insertions(+), 9 deletions(-)

diff --git a/apps/mobile/src/screens/session-transcript.tsx b/apps/mobile/src/screens/session-transcript.tsx
index 372ccc5..b8b165c 100644
--- a/apps/mobile/src/screens/session-transcript.tsx
+++ b/apps/mobile/src/screens/session-transcript.tsx
@@ -1,6 +1,6 @@
 import type { SessionMessageInfo } from "@opencode2-mobile/opencode-adapter";
 import { memo, useEffect, useState } from "react";
-import { Alert, Linking, Pressable, StyleSheet, Text, View } from "react-native";
+import { Alert, Linking, Platform, Pressable, StyleSheet, Text, View } from "react-native";
 
 import { applicationName } from "../application-name";
 import { CopyTextButton } from "../components/copy-text-button";
@@ -194,10 +194,7 @@ export const SessionTranscriptRow = memo(function SessionTranscriptRow({
       return (
         <View style={styles.userRow}>
           <View style={[styles.userBubble, largeText && styles.userBubbleLargeText]}>
-            <Text dynamicTypeRamp={typeRamp.caption} style={styles.userLabel}>
-              YOU
-            </Text>
-            <ExpandableText style={styles.userText} text={message.text} />
+            <ExpandableText measureWidth style={styles.userText} text={message.text} />
             <AttachmentLabels largeText={largeText} message={message} />
           </View>
         </View>
@@ -983,11 +980,13 @@ function Notice({
 function ExpandableText({
   error,
   markdown = false,
+  measureWidth = false,
   style,
   text,
 }: {
   error?: boolean;
   markdown?: boolean;
+  measureWidth?: boolean;
   style: object;
   text: string;
 }) {
@@ -1003,6 +1002,18 @@ function ExpandableText({
 
   return (
     <View>
+      {measureWidth && Platform.OS === "ios" ? (
+        <View
+          accessibilityElementsHidden
+          importantForAccessibility="no-hide-descendants"
+          pointerEvents="none"
+          style={styles.textWidthMeasurement}
+        >
+          <Text dynamicTypeRamp={typeRamp.body} style={style}>
+            {visibleText}
+          </Text>
+        </View>
+      ) : null}
       {markdown ? (
         <MarkdownText style={style} text={visibleText} />
       ) : (
@@ -1606,13 +1617,14 @@ const styles = StyleSheet.create({
   textAction: { alignSelf: "flex-start", minHeight: 44, paddingVertical: 10 },
   textActionLabel: { color: palette.signal, fontSize: 12, fontWeight: "700" },
   userBubble: {
-    backgroundColor: palette.card,
+    backgroundColor: palette.prompt,
     borderRadius: 28,
-    maxWidth: "92%",
+    maxWidth: "80%",
     padding: 20,
   },
   userBubbleLargeText: { maxWidth: "100%" },
-  userLabel: { ...typography.label, color: palette.dim },
+  // Supply intrinsic text width to Yoga; the native selection view supplies height.
+  textWidthMeasurement: { height: 0, overflow: "hidden", opacity: 0 },
   userRow: { alignItems: "flex-end", paddingHorizontal: space.lg, paddingVertical: space.sm },
-  userText: { color: palette.ink, fontSize: 17, lineHeight: 25, marginTop: 7 },
+  userText: { color: palette.ink, fontSize: 17, lineHeight: 25 },
 });
diff --git a/apps/mobile/src/theme.ts b/apps/mobile/src/theme.ts
index d1b25e8..827b8fb 100644
--- a/apps/mobile/src/theme.ts
+++ b/apps/mobile/src/theme.ts
@@ -13,6 +13,7 @@ export const palette = {
   info: "#8ab4f8",
   ink: "#eeeeee",
   raised: "#242424",
+  prompt: "#3a3a3a",
   signal: "#ffffff",
   signalDark: "#242424",
   success: "#7bd88f",