@multiplatform.one/forms 7.65.2 → 7.67.0

package/src/FloatingPanel/FloatingPanel.regularWidth.native.spec.tsx

@@ -0,0 +1,193 @@
+/**
+ * FZ-8116 (LC-266): the window's size class picks the native FloatingPanel's
+ * form. At regular width (an iPad, a wide Android window) a picker opens over
+ * its field the way the web float does; at compact width (iPhone, Slide Over)
+ * it keeps the bottom sheet.
+ */
+import { renderWithProviders } from "@multiplatform.one/test-utils";
+import { act } from "@testing-library/react";
+import { useState, type ReactNode } from "react";
+import { afterEach, beforeEach, describe, expect, it, vi } from "vitest";
+import { Text } from "tamagui";
+import { FloatingPanel } from "./index.native";
+import type { FloatingPanelProps } from "./index";
+import { regularFillHeight } from "./regularPlacement";
+import { panelViewportPadding } from "./useFloatingPanel";
+
+const screen = vi.hoisted(() => ({ width: 820, height: 1180 }));
+vi.mock("react-native-web", async (importOriginal) => {
+  const actual = await importOriginal<typeof import("react-native")>();
+  return {
+    ...actual,
+    ActionSheetIOS: undefined,
+    Modal: ({ children, visible }: { children: ReactNode; visible: boolean }) =>
+      visible ? children : null,
+    useWindowDimensions: () => ({ ...screen, scale: 2, fontScale: 1 }),
+  };
+});
+
+let field = { x: 40, y: 300, width: 360, height: 44 };
+beforeEach(() => {
+  vi.useFakeTimers();
+  field = { x: 40, y: 300, width: 360, height: 44 };
+  vi.spyOn(HTMLElement.prototype, "getBoundingClientRect").mockImplementation(() => ({
+    x: field.x,
+    y: field.y,
+    left: field.x,
+    top: field.y,
+    width: field.width,
+    height: field.height,
+    right: field.x + field.width,
+    bottom: field.y + field.height,
+    toJSON: () => ({}),
+  }));
+});
+afterEach(() => {
+  vi.restoreAllMocks();
+  vi.useRealTimers();
+  screen.width = 820;
+  screen.height = 1180;
+});
+
+function Picker(props: Partial<FloatingPanelProps>) {
+  const [open, setOpen] = useState(false);
+  return (
+    <FloatingPanel
+      open={open}
+      onOpenChange={setOpen}
+      trigger={<Text>Colour</Text>}
+      triggerA11y={{ label: "Colour" }}
+      {...props}
+    >
+      <Text>Red</Text>
+      <Text>Green</Text>
+    </FloatingPanel>
+  );
+}
+
+function tap(target: Element) {
+  act(() => {
+    target.dispatchEvent(new MouseEvent("mousedown", { bubbles: true, button: 0 }));
+    target.dispatchEvent(new MouseEvent("mouseup", { bubbles: true, button: 0 }));
+    target.dispatchEvent(new MouseEvent("click", { bubbles: true, button: 0 }));
+  });
+  act(() => {
+    vi.advanceTimersByTime(1);
+  });
+}
+
+function layout(node: Element, width: number, height: number) {
+  const onLayout = (node as unknown as { __reactLayoutHandler?: (event: unknown) => void })
+    .__reactLayoutHandler;
+  expect(onLayout).toBeTypeOf("function");
+  act(() => {
+    onLayout?.({ nativeEvent: { layout: { x: 0, y: 0, width, height } } });
+  });
+}
+
+const regular = () => document.querySelector<HTMLElement>('[data-testid="floating-panel-regular"]');
+const sheet = () => document.querySelector('[data-testid="floating-panel-sheet"]');
+const echo = () =>
+  document.querySelector<HTMLElement>('[data-testid="floating-panel-regular-echo"]');
+const scroll = () => document.querySelector('[data-testid="floating-panel-regular-scroll"]');
+
+function open(props: Partial<FloatingPanelProps> = {}) {
+  const result = renderWithProviders(<Picker {...props} />);
+  tap(result.getByRole("button", { name: "Colour" }));
+  return result;
+}
+
+describe("FloatingPanel native at regular width (FZ-8116)", () => {
+  it("opens over its field on an iPad-wide window, not as a bottom sheet", () => {
+    open();
+    const panel = regular();
+    expect(panel).not.toBeNull();
+    expect(sheet()).toBeNull();
+    expect(panel?.style.opacity).toBe("0");
+    layout(panel as HTMLElement, 240, 200);
+    expect(panel?.style.left).toBe("40px");
+    expect(panel?.style.top).toBe("300px");
+    expect(panel?.style.opacity).toBe("1");
+  });
+
+  it("keeps its shadow: an inner view clips, not the elevated surface", () => {
+    open();
+    const surface = document.querySelector('[data-testid="floating-panel-regular-surface"]');
+    const clip = document.querySelector('[data-testid="floating-panel-regular-clip"]');
+    expect(surface?.contains(clip)).toBe(true);
+    expect(surface?.className).not.toContain("_ox-hidden");
+    expect(clip?.className).toContain("_ox-hidden");
+  });
+
+  it("is at least the field's width by default", () => {
+    open();
+    expect(regular()?.style.minWidth).toBe("360px");
+  });
+
+  it("is the field's width exactly for match-trigger", () => {
+    open({ widthMode: "match-trigger" });
+    expect(regular()?.style.width).toBe("360px");
+  });
+
+  it("hugs its content for fit-content, from the field's start edge", () => {
+    open({ widthMode: "fit-content" });
+    const panel = regular() as HTMLElement;
+    expect(panel.style.minWidth).toBe("");
+    expect(panel.style.width).toBe("");
+    layout(panel, 300, 320);
+    expect(panel.style.left).toBe("40px");
+  });
+
+  it("echoes the field as its first row, and pressing it closes the panel", () => {
+    open();
+    const row = echo() as HTMLElement;
+    expect(row.textContent).toBe("Colour");
+    expect(row.style.height).toBe("44px");
+    act(() => {
+      vi.advanceTimersByTime(1000);
+    });
+    tap(row);
+    expect(regular()).toBeNull();
+  });
+
+  it("slides up inside the padded window when the field sits near the bottom", () => {
+    field = { x: 40, y: 1080, width: 360, height: 44 };
+    open();
+    const panel = regular() as HTMLElement;
+    layout(panel, 360, 300);
+    const top = parseFloat(panel.style.top);
+    expect(top + 300).toBeLessThanOrEqual(1180 - panelViewportPadding);
+  });
+
+  it("gives a gesture editor no scrollport (LC-83)", () => {
+    open();
+    expect(scroll()).toBeNull();
+  });
+
+  it("scrolls a scrollable list", () => {
+    open({ scrollable: true });
+    expect(scroll()).not.toBeNull();
+  });
+
+  it("opens a search list (sheetFill) at a definite height", () => {
+    open({ scrollable: true, sheetFill: true });
+    expect(regular()?.style.height).toBe(`${regularFillHeight}px`);
+  });
+
+  it("keeps the bottom sheet when the caller forces it", () => {
+    open({ sheet: true });
+    expect(regular()).toBeNull();
+    expect(sheet()).not.toBeNull();
+  });
+
+  it.each([
+    ["an iPhone", 390, 844],
+    ["iPad Slide Over", 320, 1180],
+  ])("keeps the bottom sheet on %s", (_name, width, height) => {
+    screen.width = width;
+    screen.height = height;
+    open();
+    expect(regular()).toBeNull();
+    expect(sheet()).not.toBeNull();
+  });
+});

package/src/FloatingPanel/RegularPanel.tsx

@@ -0,0 +1,159 @@
+import { useResolvedKnobs } from "@multiplatform.one/theme";
+import { type ReactNode, useState } from "react";
+import {
+  I18nManager,
+  Pressable,
+  ScrollView as RNScrollView,
+  StyleSheet,
+  View as RNView,
+} from "react-native";
+import { YStack } from "tamagui";
+import { t } from "../shared/t";
+import type { PanelBounds, TriggerRect } from "./pointAnchor";
+import { placeRegularPanel, regularFillHeight } from "./regularPlacement";
+import type { PanelWidthMode } from "./useFloatingPanel";
+
+/**
+ * A FloatingPanel at regular width (FZ-8116): over its field instead of a
+ * bottom sheet. Measured once per open at its natural size, then placed on
+ * the field's window rect. The field is echoed as the first row, as the web
+ * float's named close row is, and pressing it closes the panel.
+ *
+ * Only a `scrollable` panel gets a scrollport: a gesture editor (ColorPicker,
+ * DatePicker) must take its own drags (LC-83).
+ */
+export function RegularPanel({
+  anchor,
+  bounds,
+  widthMode,
+  echo,
+  echoLabel,
+  header,
+  scrollable,
+  fill,
+  scrollViewProps,
+  framePadding,
+  frameGap,
+  onBackdropPress,
+  onClose,
+  children,
+}: {
+  anchor: TriggerRect | null;
+  bounds: PanelBounds;
+  widthMode: PanelWidthMode;
+  echo: ReactNode;
+  echoLabel?: string;
+  header?: ReactNode;
+  scrollable: boolean;
+  fill: boolean;
+  scrollViewProps?: Record<string, unknown>;
+  framePadding: string;
+  frameGap: string | undefined;
+  onBackdropPress: () => void;
+  onClose: () => void;
+  children: ReactNode;
+}) {
+  const { knobProps } = useResolvedKnobs({ painted: false });
+  const [size, setSize] = useState<{ width: number; height: number } | null>(null);
+  const room = Math.max(0, bounds.bottom - bounds.top);
+  const fillHeight = fill ? Math.min(regularFillHeight, room) : undefined;
+  const placement =
+    anchor && size
+      ? placeRegularPanel({
+          trigger: anchor,
+          width: size.width,
+          height: fillHeight ?? size.height,
+          bounds,
+          widthMode,
+          rtl: I18nManager.isRTL,
+        })
+      : null;
+  const widthStyle =
+    widthMode === "match-trigger"
+      ? { width: anchor?.width }
+      : widthMode === "at-least-trigger"
+        ? { minWidth: anchor?.width ?? 0 }
+        : undefined;
+  const echoRow =
+    echo != null && anchor && anchor.height > 0 ? (
+      <Pressable
+        testID="floating-panel-regular-echo"
+        onPress={onClose}
+        accessibilityRole="button"
+        {...(echoLabel ? { accessibilityLabel: echoLabel } : undefined)}
+        aria-expanded
+        style={{ height: anchor.height, justifyContent: "center" }}
+      >
+        <RNView pointerEvents="none">{echo}</RNView>
+      </Pressable>
+    ) : null;
+  return (
+    <RNView style={StyleSheet.absoluteFill}>
+      <Pressable
+        style={StyleSheet.absoluteFill}
+        onPress={onBackdropPress}
+        accessibilityRole="button"
+        accessibilityLabel={t("Close")}
+      />
+      <RNView
+        testID="floating-panel-regular"
+        onLayout={(e) => {
+          if (size) return;
+          const { width, height } = e.nativeEvent.layout;
+          if (width > 0 && height > 0) setSize({ width, height });
+        }}
+        style={{
+          position: "absolute",
+          left: placement?.left ?? bounds.left,
+          top: placement?.top ?? bounds.top,
+          ...widthStyle,
+          maxWidth: bounds.right - bounds.left,
+          maxHeight: placement?.maxHeight ?? room,
+          ...(fillHeight ? { height: Math.min(fillHeight, placement?.maxHeight ?? room) } : null),
+          opacity: placement ? 1 : 0,
+        }}
+      >
+        <YStack
+          testID="floating-panel-regular-surface"
+          {...knobProps.elevatedSurface}
+          flexShrink={1}
+          minHeight={0}
+          {...(fill ? { flex: 1 } : undefined)}
+          onAccessibilityEscape={onClose}
+        >
+          <YStack
+            testID="floating-panel-regular-clip"
+            borderRadius={knobProps.elevatedSurface.borderRadius}
+            overflow="hidden"
+            flexShrink={1}
+            minHeight={0}
+            {...(fill ? { flex: 1 } : undefined)}
+          >
+            {echoRow}
+            <YStack
+              padding={framePadding}
+              gap={frameGap}
+              flexShrink={1}
+              minHeight={0}
+              {...(fill ? { flex: 1 } : undefined)}
+            >
+              {header}
+              {scrollable ? (
+                <RNScrollView
+                  testID="floating-panel-regular-scroll"
+                  style={fill ? { flex: 1 } : { flexGrow: 0, flexShrink: 1 }}
+                  keyboardShouldPersistTaps="handled"
+                  {...(scrollViewProps as object)}
+                >
+                  {children}
+                </RNScrollView>
+              ) : (
+                children
+              )}
+            </YStack>
+          </YStack>
+        </YStack>
+      </RNView>
+    </RNView>
+  );
+}

package/src/FloatingPanel/compactFace.spec.ts

@@ -1,5 +1,11 @@
 import { describe, expect, it } from "vitest";
-import { pickerCompactFace, resolveCompactFace, SHORT_LIST_MAX } from "./compactFace";
+import {
+  MENU_MIN_WIDTH,
+  menuMinWidth,
+  pickerCompactFace,
+  resolveCompactFace,
+  SHORT_LIST_MAX,
+} from "./compactFace";
 
 describe("resolveCompactFace (FZ-7830)", () => {
   it("keeps the sheet by default, at page level and inside an overlay", () => {
@@ -38,3 +44,20 @@ describe("pickerCompactFace (FZ-7830)", () => {
     expect(resolveCompactFace(pickerCompactFace(3, true), false)).toBe("sheet");
   });
 });
+
+describe("menuMinWidth (FZ-8220)", () => {
+  it("never opens a menu narrower than the platform floor", () => {
+    expect(menuMinWidth(44, 370)).toBe(MENU_MIN_WIDTH);
+    expect(menuMinWidth(0, 370)).toBe(MENU_MIN_WIDTH);
+  });
+
+  it("keeps a wider trigger's width", () => {
+    expect(menuMinWidth(320, 370)).toBe(320);
+  });
+
+  it("clamps to the room between the screen's margins", () => {
+    expect(menuMinWidth(44, 220)).toBe(220);
+    expect(menuMinWidth(400, 370)).toBe(370);
+    expect(menuMinWidth(44, -5)).toBe(0);
+  });
+});

package/src/FloatingPanel/compactFace.ts

@@ -30,3 +30,19 @@ export const SHORT_LIST_MAX = 7;
 export function pickerCompactFace(optionCount: number, searchable = false): CompactFace {
   return !searchable && optionCount <= SHORT_LIST_MAX ? "menu" : "auto";
 }
+
+/**
+ * The narrowest a menu-faced panel opens on native (FZ-8220): the iOS
+ * pull-down's floor, inside Material's 112–280 menu range. A menu's rows
+ * fill their width and have none of their own, so without a floor the panel
+ * took its trigger's width and an avatar's 44pt squeezed the text away.
+ */
+export const MENU_MIN_WIDTH = 250;
+
+/**
+ * A menu face's minimum width: at least its trigger and the platform floor,
+ * never wider than the room between the screen's margins.
+ */
+export function menuMinWidth(triggerWidth: number, availableWidth: number): number {
+  return Math.max(0, Math.min(Math.max(triggerWidth, MENU_MIN_WIDTH), availableWidth));
+}

package/src/FloatingPanel/containingBlock.ts

@@ -0,0 +1,32 @@
+/**
+ * Viewport origin of the box a `position: fixed` panel is laid out against.
+ * The top/left math is in viewport coordinates, which is only right while that
+ * box is the viewport. An ancestor with a transform, filter, perspective,
+ * paint containment or container query becomes the containing block instead.
+ * PanelPortal lifts the panel out of scroll views, but a panel hosted in a
+ * transformed dialog still lays out against that dialog. A `display: contents`
+ * node has no box, so its computed `contain` (Tamagui's theme span) is ignored.
+ */
+export function fixedContainingBlockOrigin(element: HTMLElement): { top: number; left: number } {
+  for (let node = element.parentElement; node; node = node.parentElement) {
+    const cs = getComputedStyle(node);
+    if (cs.display === "contents") continue;
+    const set = (value: string | undefined, initial: string) => !!value && value !== initial;
+    const captures =
+      set(cs.transform, "none") ||
+      set(cs.perspective, "none") ||
+      set(cs.filter, "none") ||
+      set(cs.backdropFilter, "none") ||
+      set(cs.containerType, "normal") ||
+      /transform|perspective|filter/.test(cs.willChange) ||
+      /paint|layout|strict|content/.test(cs.contain);
+    if (captures) {
+      const rect = node.getBoundingClientRect();
+      return {
+        top: rect.top + node.clientTop - node.scrollTop,
+        left: rect.left + node.clientLeft - node.scrollLeft,
+      };
+    }
+  }
+  return { top: 0, left: 0 };
+}

package/src/FloatingPanel/index.native.tsx

@@ -55,6 +55,11 @@
  * than OVERLAY_BREAKPOINT (a tablet) it opens at the long-press point, the
  * same free overlay the web draws at the pointer; a phone keeps the sheet,
  * as web does at ≤640.
+ *
+ * Regular width (FZ-8116, LC-266): on an iPad or any window wider than
+ * OVERLAY_BREAKPOINT the sheet is the wrong form. The panel opens over its
+ * field the way the web float does (LC-105, LC-112), sized by `widthMode`;
+ * compact windows (iPhone, Slide Over) keep the sheet. `sheet` forces it.
  */
 
 import { nativeAnimationConfig, type MotionStop } from "@multiplatform.one/theme";
@@ -83,27 +88,25 @@ import {
   type GestureResponderEvent,
 } from "react-native";
 import { SafeAreaInsetsContext, initialWindowMetrics } from "react-native-safe-area-context";
-import {
-  OVERLAY_BREAKPOINT,
-  Surface,
-  useResolvedKnobs,
-  motionDurationMs,
-} from "@multiplatform.one/theme";
+import { Surface, useResolvedKnobs, motionDurationMs } from "@multiplatform.one/theme";
 import { View, YStack } from "tamagui";
 import { useInsideOverlay, useOverlayZIndex } from "../shared/overlayStack";
 import { OverlayWindow } from "../shared/OverlayWindow";
 import { t } from "../shared/t";
+import { overlaySizeClass } from "../shared/overlaySizeClass";
 import { useKeyboardInset } from "../shared/useKeyboardInset";
 import type { FloatingPanelProps } from "./index";
-import { resolveCompactFace } from "./compactFace";
+import { menuMinWidth, resolveCompactFace } from "./compactFace";
 import {
   placeAtPoint,
+  placeBesideTrigger,
   placeOverTrigger,
   type PanelBounds,
   type PanelPoint,
   type TriggerRect,
 } from "./pointAnchor";
-import { panelViewportPadding } from "./useFloatingPanel";
+import { RegularPanel } from "./RegularPanel";
+import { panelViewportPadding, resolvePanelWidthMode } from "./useFloatingPanel";
 import { TrailingActionOverlay, TriggerWithTrailingAction } from "./trailingAction";
 
 // Re-export the hook + constants so Select / Combobox / external consumers
@@ -160,6 +163,9 @@ export function FloatingPanel({
   triggerRow,
   triggerEcho = true,
   anchorMode,
+  sheet,
+  widthMode,
+  fitContent,
 }: FloatingPanelProps) {
   // The panel floats over the page: it never inherits a painted ancestor.
   const { knobProps } = useResolvedKnobs({ painted: false });
@@ -202,15 +208,18 @@ export function FloatingPanel({
     [disabled, onOpenChange],
   );
   const isContextMenu = openOn === "contextmenu";
-  const atPoint = isContextMenu && pressPoint !== null && windowWidth > OVERLAY_BREAKPOINT;
+  const regular = overlaySizeClass(windowWidth) === "regular";
+  const atPoint = isContextMenu && pressPoint !== null && regular;
   const insideOverlay = useInsideOverlay();
   const asMenu = !isContextMenu && resolveCompactFace(compactFace, insideOverlay) === "menu";
+  const asRegular = regular && !asMenu && !isContextMenu && sheet !== true;
+  const anchored = asMenu || asRegular;
   const triggerRef = useRef<RNView | null>(null);
   const [anchor, setAnchor] = useState<TriggerRect | null>(null);
   // The trigger's window rect, read each time the menu opens: it may have
   // moved (a scrolled sheet) since the last open.
   useLayoutEffect(() => {
-    if (!asMenu || !open) {
+    if (!anchored || !open) {
       setAnchor(null);
       return;
     }
@@ -230,7 +239,7 @@ export function FloatingPanel({
     return () => {
       live = false;
     };
-  }, [asMenu, open]);
+  }, [anchored, open]);
 
   const handleBackdropPress = useCallback(() => {
     if (backdropArmed) close();
@@ -582,11 +591,8 @@ export function FloatingPanel({
             <TriggerMenuPanel
               // An attached menu (an icon trigger, no echo row) opens under its
               // trigger instead of over it, the UIMenu pull-down (LC-262).
-              anchor={
-                anchor && anchorMode === "attach"
-                  ? { ...anchor, y: anchor.y + anchor.height }
-                  : anchor
-              }
+              anchor={anchor}
+              attach={anchorMode === "attach"}
               bounds={{
                 top: topInset + panelViewportPadding,
                 left: (safeArea?.left ?? 0) + panelViewportPadding,
@@ -627,6 +633,32 @@ export function FloatingPanel({
               {header}
               {children}
             </PointPanel>
+          ) : asRegular ? (
+            <RegularPanel
+              anchor={anchor}
+              bounds={{
+                top: topInset + panelViewportPadding,
+                left: (safeArea?.left ?? 0) + panelViewportPadding,
+                right: windowWidth - (safeArea?.right ?? 0) - panelViewportPadding,
+                bottom:
+                  windowHeight -
+                  Math.max(safeArea?.bottom ?? 0, keyboardInset) -
+                  panelViewportPadding,
+              }}
+              widthMode={resolvePanelWidthMode(widthMode, fitContent)}
+              echo={triggerEcho ? (triggerRow ?? trigger) : null}
+              echoLabel={triggerA11y?.label}
+              header={header}
+              scrollable={!!scrollable}
+              fill={!!sheetFill}
+              scrollViewProps={scrollViewProps}
+              framePadding={framePadding}
+              frameGap={frameGap}
+              onBackdropPress={handleBackdropPress}
+              onClose={close}
+            >
+              {children}
+            </RegularPanel>
           ) : (
             /*
           A plain padded column, not KeyboardAvoidingView: inside a Modal the
@@ -732,6 +764,7 @@ export function FloatingPanel({
  */
 function TriggerMenuPanel({
   anchor,
+  attach = false,
   bounds,
   echo,
   echoLabel,
@@ -742,6 +775,7 @@ function TriggerMenuPanel({
   children,
 }: {
   anchor: TriggerRect | null;
+  attach?: boolean;
   bounds: PanelBounds;
   echo: ReactNode;
   echoLabel?: string;
@@ -755,7 +789,7 @@ function TriggerMenuPanel({
   const [size, setSize] = useState<{ width: number; height: number } | null>(null);
   const placement =
     anchor && size
-      ? placeOverTrigger({
+      ? (attach ? placeBesideTrigger : placeOverTrigger)({
           trigger: anchor,
           width: size.width,
           height: size.height,
@@ -782,36 +816,47 @@ function TriggerMenuPanel({
           position: "absolute",
           left: placement?.left ?? bounds.left,
           top: placement?.top ?? bounds.top,
-          minWidth: anchor?.width ?? 0,
+          minWidth: menuMinWidth(anchor?.width ?? 0, bounds.right - bounds.left),
           maxWidth: bounds.right - bounds.left,
           maxHeight: placement?.maxHeight ?? bounds.bottom - bounds.top,
           opacity: placement ? 1 : 0,
         }}
       >
         <YStack
+          testID="floating-panel-menu-surface"
           {...knobProps.elevatedSurface}
           flexShrink={1}
           minHeight={0}
-          overflow="hidden"
           onAccessibilityEscape={onClose}
         >
-          {echo != null && anchor && anchor.height > 0 ? (
-            <Pressable
-              testID="floating-panel-menu-echo"
-              onPress={onClose}
-              accessibilityRole="button"
-              {...(echoLabel ? { accessibilityLabel: echoLabel } : undefined)}
-              aria-expanded
-              style={{ height: anchor.height, minWidth: anchor.width, justifyContent: "center" }}
+          <YStack
+            testID="floating-panel-menu-clip"
+            borderRadius={knobProps.elevatedSurface.borderRadius}
+            overflow="hidden"
+            flexShrink={1}
+            minHeight={0}
+          >
+            {echo != null && anchor && anchor.height > 0 ? (
+              <Pressable
+                testID="floating-panel-menu-echo"
+                onPress={onClose}
+                accessibilityRole="button"
+                {...(echoLabel ? { accessibilityLabel: echoLabel } : undefined)}
+                aria-expanded
+                style={{ height: anchor.height, minWidth: anchor.width, justifyContent: "center" }}
+              >
+                <RNView pointerEvents="none">{echo}</RNView>
+              </Pressable>
+            ) : null}
+            <RNScrollView
+              style={{ flexGrow: 0, flexShrink: 1 }}
+              keyboardShouldPersistTaps="handled"
             >
-              <RNView pointerEvents="none">{echo}</RNView>
-            </Pressable>
-          ) : null}
-          <RNScrollView style={{ flexGrow: 0, flexShrink: 1 }} keyboardShouldPersistTaps="handled">
-            <YStack padding={framePadding} gap={frameGap}>
-              {children}
-            </YStack>
-          </RNScrollView>
+              <YStack padding={framePadding} gap={frameGap}>
+                {children}
+              </YStack>
+            </RNScrollView>
+          </YStack>
         </YStack>
       </RNView>
     </RNView>