From 4e7a19077ec93e7b2c5f112c4114750bcfe100ee Mon Sep 17 00:00:00 2001
From: Jyoti Puri <jyotipuri@gmail.com>
Date: Wed, 15 Jan 2025 16:09:20 +0530
Subject: [PATCH] fix: Make message section on re-designed signature pages
 scrollable (#12998)
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

## **Description**

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

## **Related issues**

Fixes: https://github.com/MetaMask/MetaMask-planning/issues/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.
---
 .../SignatureMessageSection.styles.ts                     | 5 ++++-
 .../SignatureMessageSection/SignatureMessageSection.tsx   | 8 ++++++--
 2 files changed, 10 insertions(+), 3 deletions(-)

diff --git a/app/components/Views/confirmations/components/Confirm/SignatureMessageSection/SignatureMessageSection.styles.ts b/app/components/Views/confirmations/components/Confirm/SignatureMessageSection/SignatureMessageSection.styles.ts
index f48bc62161d..d06bd8b4410 100644
--- a/app/components/Views/confirmations/components/Confirm/SignatureMessageSection/SignatureMessageSection.styles.ts
+++ b/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,
diff --git a/app/components/Views/confirmations/components/Confirm/SignatureMessageSection/SignatureMessageSection.tsx b/app/components/Views/confirmations/components/Confirm/SignatureMessageSection/SignatureMessageSection.tsx
index 23542c6992e..dcde1d6a851 100644
--- a/app/components/Views/confirmations/components/Confirm/SignatureMessageSection/SignatureMessageSection.tsx
+++ b/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')}