fix(chat): keep large tables responsive on iOS

Selectable table cells each installed a window-level gesture recognizer, causing every touch to fan out across the entire table. Keep prose selectable while rendering iOS table text without selection.

packages/app/src/components/markdown-text-selection.test.ts

@@ -0,0 +1,14 @@
+import { describe, expect, it } from "vitest";
+import { iosMarkdownTextIsSelectable } from "./markdown-text-selection";
+
+describe("markdown text selection", () => {
+  it("uses plain text only for iOS table cells", () => {
+    expect({
+      tableCell: iosMarkdownTextIsSelectable("table-cell"),
+      prose: iosMarkdownTextIsSelectable("prose"),
+    }).toEqual({
+      tableCell: false,
+      prose: true,
+    });
+  });
+});

packages/app/src/components/markdown-text-selection.tsx

@@ -0,0 +1,17 @@
+import { createContext, type ReactNode, useContext } from "react";
+
+export type MarkdownTextSurface = "prose" | "table-cell";
+
+const MarkdownTextSurfaceContext = createContext<MarkdownTextSurface>("prose");
+
+export function MarkdownTableCellText({ children }: { children: ReactNode }) {
+  return <MarkdownTextSurfaceContext value="table-cell">{children}</MarkdownTextSurfaceContext>;
+}
+
+export function useMarkdownTextSurface(): MarkdownTextSurface {
+  return useContext(MarkdownTextSurfaceContext);
+}
+
+export function iosMarkdownTextIsSelectable(surface: MarkdownTextSurface): boolean {
+  return surface !== "table-cell";
+}

packages/app/src/components/markdown-text.ios.tsx

@@ -1,7 +1,18 @@
 import { useMemo, type ReactNode } from "react";
-import { View, type StyleProp, type TextProps, type TextStyle, type ViewStyle } from "react-native";
+import {
+  Text,
+  View,
+  type StyleProp,
+  type TextProps,
+  type TextStyle,
+  type ViewStyle,
+} from "react-native";
 import { UITextView } from "react-native-uitextview";
 import { resolvePlainMarkdownTextStyle } from "@/components/markdown-text-style";
+import {
+  iosMarkdownTextIsSelectable,
+  useMarkdownTextSurface,
+} from "@/components/markdown-text-selection";
 
 interface MarkdownTextSpanProps {
   style?: StyleProp<TextStyle>;
@@ -29,6 +40,22 @@ export function MarkdownTextSpan({
   accessibilityRole,
 }: MarkdownTextSpanProps) {
   const plainStyle = useMemo(() => resolvePlainMarkdownTextStyle(style), [style]);
+  const surface = useMarkdownTextSurface();
+
+  // Each selectable span creates a UIKit UITextView with a window-level tap recognizer.
+  // A large table would create one per cell and make every app touch fan out across them.
+  if (!iosMarkdownTextIsSelectable(surface)) {
+    return (
+      <Text
+        selectable={false}
+        style={plainStyle}
+        onPress={onPress}
+        accessibilityRole={accessibilityRole}
+      >
+        {children}
+      </Text>
+    );
+  }
 
   return (
     <UITextView

packages/app/src/components/markdown/renderer.tsx

@@ -25,6 +25,7 @@ import { StyleSheet, withUnistyles } from "react-native-unistyles";
 import { AppearanceStyleBoundary } from "@/components/appearance-style-boundary";
 import { HighlightedCodeBlock } from "@/components/highlighted-code-block";
 import { MarkdownParagraphView, MarkdownTextSpan } from "@/components/markdown-text";
+import { MarkdownTableCellText } from "@/components/markdown-text-selection";
 import { getMarkdownListMarker, getMarkdownListSpacing } from "@/utils/markdown-list";
 import { markdownNodeContainsType } from "@/utils/markdown-ast";
 import { createCompactMarkdownStyles, createMarkdownStyles } from "@/styles/markdown-styles";
@@ -661,6 +662,16 @@ export function createSharedMarkdownRules(): RenderRules {
         </View>
       );
     },
+    th: (node: ASTNode, children: ReactNode[], _parent: ASTNode[], styles: MarkdownStyles) => (
+      <MarkdownTableCellText key={node.key}>
+        <View style={styles._VIEW_SAFE_th}>{children}</View>
+      </MarkdownTableCellText>
+    ),
+    td: (node: ASTNode, children: ReactNode[], _parent: ASTNode[], styles: MarkdownStyles) => (
+      <MarkdownTableCellText key={node.key}>
+        <View style={styles._VIEW_SAFE_td}>{children}</View>
+      </MarkdownTableCellText>
+    ),
     paragraph: (
       node: ASTNode,
       children: ReactNode[],

packages/app/src/components/message.tsx

@@ -12,6 +12,7 @@ import {
 } from "react-native";
 import { useTranslation } from "react-i18next";
 import { MarkdownParagraphView, MarkdownTextSpan } from "@/components/markdown-text";
+import { MarkdownTableCellText } from "@/components/markdown-text-selection";
 import * as React from "react";
 import {
   useState,
@@ -1825,6 +1826,16 @@ export const AssistantMessage = memo(function AssistantMessage({
           </View>
         );
       },
+      th: (node: ASTNode, children: ReactNode[], _parent: ASTNode[], styles: MarkdownStyles) => (
+        <MarkdownTableCellText key={node.key}>
+          <View style={styles._VIEW_SAFE_th}>{children}</View>
+        </MarkdownTableCellText>
+      ),
+      td: (node: ASTNode, children: ReactNode[], _parent: ASTNode[], styles: MarkdownStyles) => (
+        <MarkdownTableCellText key={node.key}>
+          <View style={styles._VIEW_SAFE_td}>{children}</View>
+        </MarkdownTableCellText>
+      ),
       paragraph: (
         node: ASTNode,
         children: ReactNode[],