fix: Make transaction details scrollable during creation

[usame-algan]

What it solves

Resolves #2682

How this PR fixes it

• Adds overflow-x: auto property to DataRow component

How to test it

1. Create a swap on Curve
2. Observe the tx details in the review screen can be fully viewed by scrolling
3. The TxDataRow / DataRow component is also used for Swaps, TxSummary, MsgDetails, RecoveryDetails. Make sure these places still work as expected

Screenshots

Screen.Recording.2024-07-03.at.15.00.27.mov

Checklist

• I've tested the branch on mobile 📱
• I've documented how it affects the analytics (if at all) 📊
• I've written a unit/e2e test for it (if applicable) 🧑‍💻

[github-actions]

Branch preview

✅ Deploy successful!

Website:
https://tx_data_scroll--walletweb.review.5afe.dev/home?safe=eth:0xA77DE01e157f9f57C7c4A326eeE9C4874D0598b6

Storybook:
https://tx_data_scroll--walletweb.review.5afe.dev/storybook/

[github-actions]

ESLint Summary View Full Report

Annotations are provided inline on the Files Changed tab. You can also see all annotations that were generated on the annotations page.

Type	Occurrences	Fixable
Errors	0	0
Warnings	0	0
Ignored	0	N/A

• Result: ✅ success
• Annotations: 0 total

---

^{Report generated by eslint-plus-action}

[github-actions]

📦 Next.js Bundle Analysis for safe-wallet-web

This analysis was generated by the Next.js Bundle Analysis action. 🤖

⚠️ Global Bundle Size Increased

Page	Size (compressed)
global	1000.78 KB (🟡 +3 B)

Details

The global bundle is the javascript bundle that loads alongside every page. It is in its own category because its impact is much higher - an increase to its size means that every page on your website loads slower, and a decrease means every page loads faster.

Any third party scripts you have added directly to your app using the <script> tag are not accounted for in this analysis

If you want further insight into what is behind the changes, give @next/bundle-analyzer a try!

[github-actions]

Coverage report

St.❔	Category	Percentage	Covered / Total
🟡	Statements	78.86%	11598/14707
🔴	Branches	58.01%	2817/4856
🟡	Functions	65.74%	1850/2814
🟢	Lines	80.27%	10460/13031

Test suite run success

1426 tests passing in 197 suites.

Report generated by 🧪jest coverage report action from 553233e

[francovenica]

Well, is hard to say if it is fixed since Curve, for some reason, do not allow me to connect my safe to the app in this PR (even after connecting with "Saefe" curve just says that I need to be in "the Safe Environment") , so I cannot sign a tx to see the modal

I decided to check it by creating a tx in prod and queue it to see it in this PR with Prod CGW. Being in queue is not the same as the tx modal, but I know the same overflow issue is there. so I was able to check that it was fixed there:

[usame-algan]

Well, is hard to say if it is fixed since Curve, for some reason, do not allow me to connect my safe to the app in this PR (even after connecting with "Saefe" curve just says that I need to be in "the Safe Environment") , so I cannot sign a tx to see the modal

I had the same issue so I used curve via WC instead of as a safe app.