fix(walletkit): keep sign button visible for long dApp messages

__tests__/components/screens/WalletKit/DappMessageDisplay.test.tsx

@@ -0,0 +1,45 @@
+import { DappMessageDisplay } from "components/screens/WalletKit/DappMessageDisplay";
+import { renderWithProviders } from "helpers/testUtils";
+import React from "react";
+import { Dimensions, StyleSheet } from "react-native";
+
+jest.mock("hooks/useAppTranslation", () => ({
+  __esModule: true,
+  default: () => ({ t: (key: string) => key }),
+}));
+
+describe("DappMessageDisplay", () => {
+  it("renders the message content", () => {
+    const { getByTestId } = renderWithProviders(
+      <DappMessageDisplay message="hello world" />,
+    );
+
+    expect(getByTestId("message-display-content")).toHaveTextContent(
+      "hello world",
+    );
+  });
+
+  it("pretty-prints JSON messages", () => {
+    const { getByTestId } = renderWithProviders(
+      <DappMessageDisplay message='{"a":1}' />,
+    );
+
+    expect(getByTestId("message-display-content").props.children).toBe(
+      JSON.stringify({ a: 1 }, null, 2),
+    );
+  });
+
+  it("bounds the message scroll area so long messages cannot push the action buttons off-screen", () => {
+    const { getByTestId } = renderWithProviders(
+      <DappMessageDisplay message={"x".repeat(10000)} />,
+    );
+
+    const scrollView = getByTestId("message-display-content-scroll");
+    const style = StyleSheet.flatten(scrollView.props.style);
+
+    expect(style.maxHeight).toBeDefined();
+    expect(style.maxHeight).toBeLessThanOrEqual(
+      Dimensions.get("window").height * 0.5,
+    );
+  });
+});

src/components/screens/WalletKit/DappMessageDisplay.tsx

@@ -3,7 +3,7 @@ import { Text } from "components/sds/Typography";
 import useColors from "hooks/useColors";
 import React from "react";
 import { useTranslation } from "react-i18next";
-import { ScrollView, View } from "react-native";
+import { Dimensions, ScrollView, View } from "react-native";
 
 /**
  * Props for the DappMessageDisplay component
@@ -28,7 +28,7 @@ const isJsonString = (str: string): boolean => {
 /**
  * DappMessageDisplay component for showing SEP-53 messages
  * Displays the message with the SEP-53 prefix and handles JSON formatting
- * Dynamically increases height based on message length
+ * Grows with the message up to a capped height, then scrolls
  *
  * @component
  * @param {DappMessageDisplayProps} props - The component props
@@ -63,7 +63,13 @@ export const DappMessageDisplay: React.FC<DappMessageDisplayProps> = ({
           {t("common.message")}
         </Text>
       </View>
-      <ScrollView testID="message-display-content-scroll">
+      <ScrollView
+        // Cap the message area so long messages scroll instead of growing the
+        // sheet past the screen and pushing the action buttons out of view.
+        style={{ maxHeight: Dimensions.get("window").height * 0.3 }}
+        showsVerticalScrollIndicator={false}
+        testID="message-display-content-scroll"
+      >
         <Text
           sm
           primary