fix: Make message section on re-designed signature pages scrollable (#…

…12998)

## **Description**

As scroll to message section on re-designed signature request pages.

## **Related issues**

Fixes: MetaMask/MetaMask-planning#3915

## **Manual testing steps**

1. Enable re-designs locally
2. Submit signature request
3. Check scroll in expanded message section

## **Screenshots/Recordings**


https://github.com/user-attachments/assets/23b2b084-cadf-4cb5-b192-62bc83530b81


## **Pre-merge author checklist**

- [X] I’ve followed [MetaMask Contributor
Docs](https://github.com/MetaMask/contributor-docs) and [MetaMask Mobile
Coding
Standards](https://github.com/MetaMask/metamask-mobile/blob/main/.github/guidelines/CODING_GUIDELINES.md).
- [X] I've completed the PR template to the best of my ability
- [X] I’ve included tests if applicable
- [X] I’ve documented my code using [JSDoc](https://jsdoc.app/) format
if applicable
- [X] I’ve applied the right labels on the PR (see [labeling
guidelines](https://github.com/MetaMask/metamask-mobile/blob/main/.github/guidelines/LABELING_GUIDELINES.md)).
Not required for external contributors.

## **Pre-merge reviewer checklist**

- [ ] I've manually tested the PR (e.g. pull and build branch, run the
app, test code being changed).
- [ ] I confirm that this PR addresses all acceptance criteria described
in the ticket it closes and includes the necessary testing evidence such
as recordings and or screenshots.

app/components/Views/confirmations/components/Confirm/SignatureMessageSection/SignatureMessageSection.styles.ts

@@ -29,9 +29,12 @@ const styleSheet = (params: { theme: Theme }) => {
     },
     messageContainer: {
       backgroundColor: theme.colors.background.default,
-      padding: 16,
       borderRadius: 8,
       minHeight: 200,
+      maxHeight: 300,
+    },
+    scrollableSection: {
+      padding: 16,
     },
     messageExpanded: {
       color: theme.colors.text.default,

app/components/Views/confirmations/components/Confirm/SignatureMessageSection/SignatureMessageSection.tsx

@@ -1,5 +1,5 @@
 import React, { ReactNode } from 'react';
-import { Text, View } from 'react-native';
+import { ScrollView, Text, TouchableOpacity, View } from 'react-native';
 
 import { strings } from '../../../../../../../locales/i18n';
 import { useStyles } from '../../../../../../component-library/hooks';
@@ -42,7 +42,11 @@ const SignatureMessageSection = ({
           <View style={styles.copyButtonContainer}>
             <CopyButton copyText={copyMessageText} />
           </View>
-          {messageExpanded}
+          <ScrollView>
+            <View style={styles.scrollableSection}>
+              <TouchableOpacity>{messageExpanded}</TouchableOpacity>
+            </View>
+          </ScrollView>
         </View>
       }
       expandedContentTitle={strings('confirm.message')}