@oxy.so/bloom 4.24.1 → 4.25.1

package/src/ai-chat/AiChatContainer.tsx

@@ -537,6 +537,16 @@ const ScrollThread = forwardRef<AiChatThreadHandle, AiChatThreadProps>(function
   const contentHeight = useRef(0);
   const offset = useRef(0);
   const viewport = useRef(0);
+  /**
+   * A scroll to the end is on its way and has not landed. `offset` is only
+   * what the LAST scroll event said, so two growths between a `scrollToEnd`
+   * and the event it causes measured the reader against the old offset, read
+   * them as far from the bottom and dropped the follow for good (Android,
+   * streaming). While this holds, growth follows whatever `offset` says; it
+   * clears when a scroll event lands at the end or moves UP — only a reader
+   * (or a host) scrolls up, the follow never does.
+   */
+  const following = useRef(false);
   /** An `onStartReached` is out and its page has not landed yet. */
   const pageOut = useRef(false);
   /** The reader has left the top zone, so the next approach may fire again. */
@@ -560,7 +570,10 @@ const ScrollThread = forwardRef<AiChatThreadHandle, AiChatThreadProps>(function
   useImperativeHandle(
     ref,
     (): AiChatThreadHandle => ({
-      scrollToEnd: (options) => scrollRef.current?.scrollToEnd({ animated: options?.animated ?? true }),
+      scrollToEnd: (options) => {
+        following.current = true;
+        scrollRef.current?.scrollToEnd({ animated: options?.animated ?? true });
+      },
       scrollToOffset: ({ offset: y, animated = false }) => scrollRef.current?.scrollTo({ y, animated }),
       getScrollView: () => scrollRef.current,
     }),
@@ -577,9 +590,13 @@ const ScrollThread = forwardRef<AiChatThreadHandle, AiChatThreadProps>(function
   const handleScroll = useCallback(
     (event: NativeSyntheticEvent<NativeScrollEvent>) => {
       const { contentOffset, layoutMeasurement, contentSize } = event.nativeEvent;
+      const movedUp = contentOffset.y < offset.current - 0.5;
       offset.current = contentOffset.y;
       viewport.current = layoutMeasurement.height;
       if (contentSize?.height) contentHeight.current = contentSize.height;
+      if (movedUp || contentHeight.current - contentOffset.y - layoutMeasurement.height <= EDGE_THRESHOLD) {
+        following.current = false;
+      }
       report();
       if (onStartReached) {
         if (contentOffset.y <= onStartReachedThreshold) {
@@ -624,7 +641,8 @@ const ScrollThread = forwardRef<AiChatThreadHandle, AiChatThreadProps>(function
       const chromeShift = shift.top + shift.bottom;
       if (chromeShift !== 0 && Math.abs(height - previous - chromeShift) < 1) {
         const fromBottom = previous - offset.current - viewport.current;
-        if (fromBottom <= EDGE_THRESHOLD) {
+        if (following.current || fromBottom <= EDGE_THRESHOLD) {
+          following.current = true;
           scrollRef.current?.scrollToEnd({ animated: false });
         } else if (offset.current > 0 && shift.top !== 0) {
           scrollRef.current?.scrollTo({ y: offset.current + shift.top, animated: false });
@@ -642,15 +660,23 @@ const ScrollThread = forwardRef<AiChatThreadHandle, AiChatThreadProps>(function
       pageOut.current = false;
 
       if (!autoFollow) return;
-      if (followThreshold !== undefined) {
+      if (followThreshold !== undefined && !following.current) {
         // Measured against the height BEFORE the growth: was the reader near
         // the bottom when this arrived?
         const fromBottom = previous - offset.current - viewport.current;
-        if (fromBottom > followThreshold) return;
+        if (fromBottom > followThreshold) {
+          // Staying put moves no scroll, so a host tracking the distance to
+          // the end from `onScroll` (a jump-to-latest button) would not hear
+          // that the end moved away. Tell it, as `DocumentThread` does on every
+          // growth.
+          onScroll?.(syntheticScroll(offset.current, viewport.current, height));
+          return;
+        }
       }
+      following.current = true;
       scrollRef.current?.scrollToEnd({ animated: followAnimated });
     },
-    [autoFollow, followAnimated, followThreshold, maintainStartPosition],
+    [autoFollow, followAnimated, followThreshold, maintainStartPosition, onScroll],
   );
 
   return (
@@ -682,6 +708,19 @@ const ScrollThread = forwardRef<AiChatThreadHandle, AiChatThreadProps>(function
   );
 });
 
+/** A scroll event for a position that did not change while the content did. */
+function syntheticScroll(offset: number, viewport: number, content: number): NativeSyntheticEvent<NativeScrollEvent> {
+  return {
+    nativeEvent: {
+      contentOffset: { x: 0, y: offset },
+      layoutMeasurement: { width: 0, height: viewport },
+      contentSize: { width: 0, height: content },
+      contentInset: { top: 0, left: 0, bottom: 0, right: 0 },
+      zoomScale: 1,
+    },
+  } as NativeSyntheticEvent<NativeScrollEvent>;
+}
+
 /** The window's scroll position and extent, px. */
 function readWindow() {
   const page = document.scrollingElement ?? document.documentElement;

package/src/ai-chat/AiChatShell.tsx

@@ -236,7 +236,7 @@ export function AiChatResizeHandle({
 // ---------------------------------------------------------------------------
 
 /**
- * The in-container header below `xl`: 48 tall, px 12 / pt 11. The menu
+ * The in-container header below `xl`: at least 48 tall, px 12 / pt 11. The menu
  * button (below `lg`, where the sidebar is a drawer) and the chat's name in
  * headline-medium on the left; the button opening the panel drawer on the right.
  * Both are 36px secondary icon buttons. Renders nothing outside an
@@ -251,7 +251,7 @@ export function AiChatMobileHeader({ title, style, testID }: AiChatMobileHeaderP
       testID={testID}
       style={[
         {
-          height: 48,
+          minHeight: 48,
           flexShrink: 0,
           flexDirection: 'row',
           alignItems: 'center',
@@ -738,7 +738,7 @@ export function AiChatShell({
               ]}>
               <View
                 style={{
-                  height: 40,
+                  minHeight: 40,
                   flexShrink: 0,
                   flexDirection: 'row',
                   alignItems: 'center',

package/src/ai-chat/use-panel-interaction.ts

@@ -1,5 +1,5 @@
 import { useEffect, useRef } from 'react';
-import { BackHandler, Platform, type View } from 'react-native';
+import { BackHandler, Keyboard, Platform, type View } from 'react-native';
 import { useAccessibilityFocus } from '../hooks/use-accessibility-focus';
 import { listenForEscape, tabbablesWithin, wrapTab } from '../overlay/modal-keyboard';
 import { hasActiveOverlays } from '../overlay/stack';
@@ -10,7 +10,11 @@ import { hasActiveOverlays } from '../overlay/stack';
  *
  *   open    Escape (web) and back (Android) close it
  *   modal   it covers the workspace: focus moves in on open, Tab is kept
- *           inside, and focus goes back to the opener on close
+ *           inside, and focus goes back to the opener on close (web); on
+ *           native the keyboard goes down as it opens — a composer that had
+ *           the focus (say, regained after a sheet closed) otherwise kept the
+ *           keyboard up under the drawer (Android 16). Nothing refocuses the
+ *           composer on close.
  *
  * Any portaled overlay above (a dialog, a menu) takes all of it first.
  */
@@ -22,6 +26,7 @@ export function usePanelInteraction(open: boolean, modal: boolean, close: () =>
   useEffect(() => {
     if (!open) return;
     if (Platform.OS !== 'web') {
+      if (modal) Keyboard?.dismiss?.();
       const subscription = BackHandler?.addEventListener('hardwareBackPress', () => {
         if (hasActiveOverlays()) return false;
         closeRef.current();

package/src/bottom-sheet/BottomSheetBase.tsx

@@ -34,6 +34,7 @@ import { EDGE_GAP, windowEdgeGap } from '../layout/edge';
 import { Backdrop, BACKDROP_DIM_OPACITY } from '../overlay';
 import { ModalKeyboard } from '../overlay/ModalKeyboard';
 import { useTheme } from '../theme/use-theme';
+import { SheetKeyboardProvider } from './context';
 import type { BottomSheetRef, BottomSheetProps, BottomSheetShellProps, BottomSheetBaseProps } from './types';
 
 /** Hook that returns current screen dimensions and updates on rotation/resize. */
@@ -659,7 +660,9 @@ export const BottomSheetBase = forwardRef((props: BottomSheetBaseProps, ref: Rea
     // (`layout/screen-scope.tsx`).
     const surfaceChildren = (
         <SurfaceLevelProvider level={0} fill={colors.background}>
-            <ScreenScope>{children}</ScreenScope>
+            <SheetKeyboardProvider value={keyboardHeight}>
+                <ScreenScope>{children}</ScreenScope>
+            </SheetKeyboardProvider>
         </SurfaceLevelProvider>
     );
 

package/src/bottom-sheet/context.ts

@@ -0,0 +1,23 @@
+import { createContext, useContext } from 'react';
+import { useSharedValue, type SharedValue } from 'react-native-reanimated';
+
+/**
+ * The open keyboard's height under a `BottomSheet`, for content that owns a
+ * bottom inset of its own. Native only: the sheet's shell writes it, web leaves
+ * it at 0 (the browser owns keyboard layout).
+ *
+ * `DialogBottomSheet` reads it to fold its safe-area spacer while the keyboard
+ * is up: the keyboard covers the gesture bar the spacer clears, so keeping it
+ * floated the sheet's buttons a bar's height above the keyboard (Android 16).
+ *
+ * Internal: not in the family barrel.
+ */
+const SheetKeyboardContext = createContext<SharedValue<number> | null>(null);
+
+export const SheetKeyboardProvider = SheetKeyboardContext.Provider;
+
+/** The sheet's keyboard height, or a constant 0 outside a sheet. */
+export function useSheetKeyboardHeight(): SharedValue<number> {
+  const none = useSharedValue(0);
+  return useContext(SheetKeyboardContext) ?? none;
+}

package/src/composer-panel/ComposerPanelBase.tsx

@@ -1,10 +1,10 @@
 import React, { useCallback, useEffect, useMemo, useRef, useState } from 'react';
 import {
+  Text as RNText,
   TextInput,
   View,
   type LayoutChangeEvent,
   type NativeSyntheticEvent,
-  type TextInputContentSizeChangeEventData,
   type TextInputKeyPressEventData,
 } from 'react-native';
 import Animated, {
@@ -177,7 +177,11 @@ export function ComposerPanelBase({
 
   // The prompt grows with its text, one 20px line at a time, up to 200 before it
   // scrolls. Web measures the textarea, collapsing it only when the draft may
-  // have got shorter (`useTextareaAutosize`); native reads the content size.
+  // have got shorter (`useTextareaAutosize`). Native lays the same text out in
+  // an invisible twin and takes ITS height: the field's own
+  // `onContentSizeChange` does not fire for a value set from outside until the
+  // field is focused (Android 16), so a question loaded to edit showed one line
+  // and a cancelled edit kept four.
   const [height, setHeight] = useState(PROMPT_LINE);
   useTextareaAutosize(fieldRef, text, {
     enabled: IS_WEB,
@@ -185,13 +189,9 @@ export function ComposerPanelBase({
     minHeight: PROMPT_LINE,
     onMeasure: (content) => setHeight(Math.min(PROMPT_MAX_HEIGHT, Math.max(PROMPT_LINE, content))),
   });
-  const onContentSizeChange = useCallback(
-    (event: NativeSyntheticEvent<TextInputContentSizeChangeEventData>) => {
-      if (IS_WEB) return;
-      setHeight(Math.min(PROMPT_MAX_HEIGHT, Math.max(PROMPT_LINE, event.nativeEvent.contentSize.height)));
-    },
-    [],
-  );
+  const onTwinLayout = useCallback((event: LayoutChangeEvent) => {
+    setHeight(Math.min(PROMPT_MAX_HEIGHT, Math.max(PROMPT_LINE, event.nativeEvent.layout.height)));
+  }, []);
 
   const submit = useCallback(() => {
     if (disabled || busy) return;
@@ -253,7 +253,6 @@ export function ComposerPanelBase({
               value={text}
               onChangeText={setText}
               onKeyPress={onKeyPress}
-              onContentSizeChange={onContentSizeChange}
               placeholder={placeholder}
               placeholderTextColor={palette.textTertiary}
               selectionColor={palette.accent500}
@@ -273,10 +272,36 @@ export function ComposerPanelBase({
                 ...(IS_WEB ? { caretColor: palette.accent500 } : null),
               }}
             />
+            {IS_WEB ? null : (
+              <RNText
+                aria-hidden
+                accessibilityElementsHidden
+                importantForAccessibility="no-hide-descendants"
+                pointerEvents="none"
+                testID={testID ? `${testID}-input-twin` : undefined}
+                onLayout={onTwinLayout}
+                style={{
+                  position: 'absolute',
+                  top: 0,
+                  left: 6,
+                  right: 6,
+                  opacity: 0,
+                  ...TYPE_SCALE['body-regular'],
+                  fontFamily: 'Inter',
+                }}>
+                {/* A trailing newline is a line of its own in the field; a
+                    Text drops it unless something follows. */}
+                {text.endsWith('\n') || text === '' ? `${text} ` : text}
+              </RNText>
+            )}
           </View>
 
           <View style={{ flexDirection: 'row', alignItems: 'center', justifyContent: 'space-between', gap: 8 }}>
-            <View style={{ minWidth: 0, flexShrink: 1, flexDirection: 'row', alignItems: 'center', gap: 8 }}>
+            {/* The actions never give way: + and the permission chip on the
+                left, voice and send on the right keep their size, and the
+                model chip between them is what truncates (a long model name
+                once covered + and pushed voice off the card). */}
+            <View style={{ flexShrink: 0, flexDirection: 'row', alignItems: 'center', gap: 8 }}>
               {addMenu.length > 0 ? (
                 <AddMenu
                   palette={palette}
@@ -299,7 +324,7 @@ export function ComposerPanelBase({
                 />
               ) : null}
             </View>
-            <View style={{ flexShrink: 0, flexDirection: 'row', alignItems: 'center', gap: 16 }}>
+            <View style={{ minWidth: 0, flexShrink: 1, flexDirection: 'row', alignItems: 'center', justifyContent: 'flex-end', gap: 16 }}>
               {providers && providers.length > 0 ? (
                 <ModelPickerBase
                   providers={providers}
@@ -314,7 +339,7 @@ export function ComposerPanelBase({
                   testID={testID ? `${testID}-model` : undefined}
                 />
               ) : null}
-              <View style={{ flexDirection: 'row', alignItems: 'center', gap: 8 }}>
+              <View style={{ flexShrink: 0, flexDirection: 'row', alignItems: 'center', gap: 8 }}>
                 <MicButton
                   listening={isListening}
                   onToggle={() => setListening(!isListening)}

package/src/composer-panel/ComposerPanelStatusTab.tsx

@@ -44,7 +44,7 @@ function StatusItem({ icon, label, palette }: { icon: React.ReactNode; label: st
 
 /**
  * The status tab: the grey tab hanging off the Composer Panel's
- * top edge — 34 tall, inset 28 each side, radius 16 on the top corners only,
+ * top edge — at least 34 tall, inset 28 each side, radius 16 on the top corners only,
  * px 8 / py 4. Branch (mirrored merge glyph) and project folder on the left, 12
  * apart; the context meter on the right (py 4, pl 6 / pr 8, gap 4).
  */
@@ -58,7 +58,7 @@ function ComposerPanelStatusTabComponent({ branch, project, context, style, test
         {
           marginLeft: TAB_INSET,
           marginRight: TAB_INSET,
-          height: TAB_HEIGHT,
+          minHeight: TAB_HEIGHT,
           flexDirection: 'row',
           alignItems: 'center',
           justifyContent: 'space-between',

package/src/composer-panel/ComposerPillBase.tsx

@@ -251,7 +251,9 @@ function ModelMenu({
   const modelName = models.find((entry) => entry.id === modelId)?.name ?? modelId;
   const hasEffort = levels.length > 0;
   const triggerStyle: WebCssStyle = {
-    height: 32,
+    // At least 32, never exactly: a fixed height clips the name at the largest
+    // system font.
+    minHeight: 32,
     flexShrink: 0,
     flexDirection: 'row',
     alignItems: 'center',

package/src/composer-panel/ComposerPopover.tsx

@@ -7,7 +7,9 @@
  * sheet is not something `BottomSheet` stacks. So each panel is a transparent
  * `Modal` holding a dismiss layer and the panel, placed against the trigger's
  * `measureInWindow` box: on the requested side when it fits, flipped when it
- * does not, clamped 8px inside the window. Nested `Modal`s stack on both
+ * does not, clamped 8px inside the window's SAFE area. The Modal draws edge to
+ * edge, so a clamp to the bare window put the effort panel under Android's
+ * gesture bar (Pixel 8a, Android 16). Nested `Modal`s stack on both
  * platforms, so the effort panel opens above the picker.
  *
  * Motion is the popover entry without the blur (no filter on native):
@@ -30,6 +32,7 @@ import Animated, {
   useSharedValue,
   withTiming,
 } from 'react-native-reanimated';
+import { useSafeAreaInsets } from 'react-native-safe-area-context';
 
 import { TRANSITION_MS } from './shared';
 import type { ComposerPopoverProps } from './types';
@@ -56,6 +59,7 @@ export function ComposerPopover({
   children,
 }: ComposerPopoverProps) {
   const window = useWindowDimensions();
+  const insets = useSafeAreaInsets();
   const reducedMotion = useReducedMotion();
   const [mounted, setMounted] = useState(open);
   const [anchor, setAnchor] = useState<Box | null>(null);
@@ -112,14 +116,18 @@ export function ComposerPopover({
   let left = GUTTER;
   let top = GUTTER;
   if (anchor && size) {
-    left = Math.min(Math.max(anchor.x, GUTTER), window.width - size.width - GUTTER);
+    const minLeft = insets.left + GUTTER;
+    const maxRight = window.width - insets.right - GUTTER;
+    const minTop = insets.top + GUTTER;
+    const maxBottom = window.height - insets.bottom - GUTTER;
+    left = Math.max(minLeft, Math.min(anchor.x, maxRight - size.width));
     const above = anchor.y - sideOffset - size.height;
     const below = anchor.y + anchor.height + sideOffset;
-    const fitsAbove = above >= GUTTER;
-    const fitsBelow = below + size.height <= window.height - GUTTER;
+    const fitsAbove = above >= minTop;
+    const fitsBelow = below + size.height <= maxBottom;
     const preferAbove = side === 'top' ? fitsAbove || !fitsBelow : !fitsBelow && fitsAbove;
     top = preferAbove ? above : below;
-    top = Math.min(Math.max(top, GUTTER), window.height - size.height - GUTTER);
+    top = Math.max(minTop, Math.min(top, maxBottom - size.height));
   }
 
   return (

package/src/composer-panel/ComposerStatusBarBase.tsx

@@ -142,8 +142,8 @@ function FolderRow({
 }
 
 /**
- * The line under the AI chat's pill composer (the reference's `StatusBar`): 26
- * tall, space-between.
+ * The line under the AI chat's pill composer (the reference's `StatusBar`): at
+ * least 26 tall (it grows with the system font), space-between.
  *
  *   left     gap 12: the branch (mirrored merge glyph) and the project folder —
  *            its caret turns over while the "Local Folders" panel is open
@@ -188,7 +188,7 @@ export function ComposerStatusBarBase({
   return (
     <View
       testID={testID}
-      style={[{ width: '100%', height: 26, flexDirection: 'row', alignItems: 'center', justifyContent: 'space-between' }, style]}>
+      style={[{ width: '100%', minHeight: 26, flexDirection: 'row', alignItems: 'center', justifyContent: 'space-between' }, style]}>
       <View style={{ flexDirection: 'row', alignItems: 'center', gap: 12 }}>
         {branch !== undefined ? (
           <StatusItem

package/src/composer-panel/ModelPickerBase.tsx

@@ -48,6 +48,8 @@ const RAIL_PADDING = 3;
 const MARK_HEIGHT = 30;
 const MARK_GAP = 6;
 const ROW_HEIGHT = 36;
+/** The model chip's widest: past this a name truncates even with room to spare. */
+const MODEL_TRIGGER_MAX_WIDTH = 240;
 
 const DEFAULT_LABELS: Required<ModelPickerLabels> = {
   models: 'Models',
@@ -367,7 +369,8 @@ function ModelRow({
     <View
       style={{
         position: 'relative',
-        height: ROW_HEIGHT,
+        // A floor, not a height: the name grows with the system font.
+        minHeight: ROW_HEIGHT,
         width: '100%',
         flexShrink: 0,
         flexDirection: 'row',
@@ -422,7 +425,7 @@ function ModelRow({
  *            mark in view (instantly on open, smoothly after)
  *   column   top 8 / right 8 / left 52: a 20px header ("Models" + a 50%-opacity
  *            "Quick Search" hint, or the search field), then the list 4 below
- *   rows     36 tall, radius 10, px 8: 16px mark, 6, name (+ provider while
+ *   rows     min 36 tall, radius 10, px 8: 16px mark, 6, name (+ provider while
  *            searching), the effort chip on the selected row, 12, 14px radio;
  *            4 apart, pb 4, soft top edge once scrolled
  *
@@ -546,8 +549,14 @@ export function ModelPickerBase({
   const rows: Match[] = results ?? (activeProvider ? activeProvider.models.map((model) => ({ provider: activeProvider, model })) : []);
 
   const triggerStyle: WebCssStyle = {
-    height: 32,
-    flexShrink: 0,
+    // At least 32, never exactly: at the largest system font the name is taller
+    // than 32 and a fixed height clipped it. It shrinks (with an ellipsis) to
+    // leave the composer's own buttons their room, and stops at a width that
+    // still reads as a chip.
+    minHeight: 32,
+    minWidth: 0,
+    maxWidth: MODEL_TRIGGER_MAX_WIDTH,
+    flexShrink: 1,
     flexDirection: 'row',
     alignItems: 'center',
     justifyContent: 'center',
@@ -590,7 +599,7 @@ export function ModelPickerBase({
         onHoverIn={() => setHovered(true)}
         onHoverOut={() => setHovered(false)}
         style={[triggerStyle, style]}>
-        <Text variant="body-medium" numberOfLines={1} style={{ paddingLeft: 2, paddingRight: 2, color: palette.textSecondary }}>
+        <Text variant="body-medium" numberOfLines={1} ellipsizeMode="tail" style={{ flexShrink: 1, minWidth: 0, paddingLeft: 2, paddingRight: 2, color: palette.textSecondary }}>
           {selected?.model.name ?? ''}
         </Text>
         <TurningChevron degrees={open ? 180 : 0} color={palette.iconSecondary} />

package/src/composer-panel/PermissionMenu.tsx

@@ -10,6 +10,8 @@ import type { ComposerPanelLabels, ComposerPanelPermissionOption } from './types
 import { dataHook } from './web-hooks';
 
 const FLIP: ViewStyle = { transform: [{ scaleY: -1 }] };
+/** The permission chip's widest: past this a mode's name truncates. */
+const PERMISSION_TRIGGER_MAX_WIDTH = 160;
 
 interface PermissionMenuProps {
   palette: ComposerPalette;
@@ -27,7 +29,9 @@ interface PermissionMenuProps {
  * press or while its menu is open, and a 323px panel of radio rows that opens
  * upward.
  *
- *   trigger   h 30, pl 8 / pr 10, gap 4, icon 16, body-medium secondary
+ *   trigger   min-h 30 (grows with the system font), max-w 160 then the
+ *             label ellipsizes, pl 8 / pr 10, gap 4, icon 16, body-medium
+ *             secondary
  *   panel     w 323, radius 20, border, p 6, shadow-dropdown
  *   body      pt 4, header→rows 6; header px 8 gap 10, body-medium tertiary
  *   row       p 8, radius 14, gap 8, icon 20, label body-medium secondary,
@@ -82,7 +86,12 @@ export function PermissionMenu({
         onHoverOut={() => setHovered(false)}
         style={({ pressed }) => {
           const trigger: WebCssStyle = {
-            height: 30,
+            // At least 30, never exactly: at the largest system font the label
+            // is taller than 30 and a fixed height clipped it top and bottom.
+            // A long mode name truncates at a width that still reads as a chip.
+            minHeight: 30,
+            minWidth: 0,
+            maxWidth: PERMISSION_TRIGGER_MAX_WIDTH,
             flexShrink: 0,
             flexDirection: 'row',
             alignItems: 'center',
@@ -98,10 +107,14 @@ export function PermissionMenu({
           };
           return trigger;
         }}>
-        <View style={current.flip ? FLIP : undefined}>
+        <View style={current.flip ? [FLIP, { flexShrink: 0 }] : { flexShrink: 0 }}>
           <CurrentIcon width={16} height={16} fill={palette.iconSecondary} />
         </View>
-        <Text variant="body-medium" numberOfLines={1} style={{ color: palette.textSecondary }}>
+        <Text
+          variant="body-medium"
+          numberOfLines={1}
+          ellipsizeMode="tail"
+          style={{ flexShrink: 1, minWidth: 0, color: palette.textSecondary }}>
           {current.label}
         </Text>
       </Pressable>

package/src/context-menu/ContextMenu.tsx

@@ -14,6 +14,7 @@ import { MENU_TRIGGER_POPUP } from '../floating/constants';
 import { MenuSurfaceProvider, type MenuSurfaceContextValue } from '../floating/context';
 import { createMenuRows } from '../floating/menu-rows';
 import { createInlineMenuSub } from '../floating/menu-sub-inline';
+import { LongPressArea } from '../floating/LongPressArea';
 import { TriggerSlot } from '../floating/TriggerSlot';
 import { useSheetOpenBridge } from '../floating/use-sheet-open-bridge';
 import { ContextMenuProvider, useContextMenu } from './context';
@@ -57,9 +58,13 @@ export function ContextMenuTrigger({
 }: ContextMenuTriggerProps) {
   const menu = useContextMenu();
 
+  // Without `asChild` the trigger is Bloom's own, and it is a `LongPressArea`
+  // rather than TriggerSlot's `Pressable`: a Pressable holds the touch
+  // responder, which on Android keeps a horizontal ScrollView inside the
+  // trigger (a code block in a chat turn) from ever scrolling.
   return (
     <TriggerSlot
-      asChild={asChild}
+      asChild
       className={className}
       style={style}
       testID={testID}
@@ -76,7 +81,7 @@ export function ContextMenuTrigger({
         'aria-haspopup': MENU_TRIGGER_POPUP,
         'aria-expanded': menu.open,
       }}>
-      {children}
+      {asChild ? children : <LongPressArea>{children}</LongPressArea>}
     </TriggerSlot>
   );
 }

package/src/dialog/DialogBottomSheet.tsx

@@ -12,10 +12,11 @@ import {
   type StyleProp,
   type ViewStyle,
 } from 'react-native';
-import { type AnimatedStyle } from 'react-native-reanimated';
+import Animated, { useAnimatedStyle, type AnimatedStyle } from 'react-native-reanimated';
 import { useSafeAreaInsets } from 'react-native-safe-area-context';
 
 import { BottomSheet, type BottomSheetRef } from '../bottom-sheet';
+import { useSheetKeyboardHeight } from '../bottom-sheet/context';
 import { useTheme } from '../theme/use-theme';
 import { StyledView } from '../styles/styled-primitives';
 import { Context } from './context';
@@ -345,9 +346,7 @@ export function DialogBottomSheet({
               rather than a padding: the content box keeps the caller's
               `padding`/`contentPadding` untouched on both platforms, and the
               morph layer above still measures the content alone. */}
-          {bottomInset > 0 ? (
-            <View testID={SAFE_AREA_SPACER_TESTID} style={{ height: bottomInset }} />
-          ) : null}
+          {bottomInset > 0 ? <SafeAreaSpacer testID={SAFE_AREA_SPACER_TESTID} inset={bottomInset} /> : null}
         </StyledView>
       </Context.Provider>
     </BottomSheet>
@@ -357,6 +356,19 @@ export function DialogBottomSheet({
 /** Test handle for the bottom safe-area spacer. */
 const SAFE_AREA_SPACER_TESTID = 'dialog-sheet-safe-area';
 
+/**
+ * The gesture bar's height under the content — folded while the keyboard is
+ * up, because the keyboard covers the bar: the sheet already rides on top of
+ * the keyboard, and a spacer left standing floated its buttons a bar's height
+ * above it (Pixel 8a, Android 16). A child of the sheet, so it reads the
+ * sheet's own keyboard value.
+ */
+function SafeAreaSpacer({ inset, testID }: { inset: number; testID: string }) {
+  const keyboard = useSheetKeyboardHeight();
+  const style = useAnimatedStyle(() => ({ height: keyboard.value > 0 ? 0 : inset }), [keyboard, inset]);
+  return <Animated.View testID={testID} style={style} />;
+}
+
 /** Passes a bounded height down to a `scrollable={false}` body. */
 const FILL_BOUNDED = { flex: 1, minHeight: 0 } as const;