Display MethodDetails content on smaller screens

[usame-algan]

What it solves

Resolves #3284

How this PR fixes it

Adds line breaks to labels and values within MethodDetails if there is not enough space left and adds horizontal scroll.

How to test it

1. Open https://pr3309--safereact.review-safe.gnosisdev.com/app/eth:0x4FeE396c8d940B801747CA84632580f917690E87/transactions/0x33eb21a8639f9411ae96a388f41b7af573e118771628b5d57c08f96817349ac9
2. Observe that MethodDetails data is visible/scrollable on smaller screens

Screenshots

[github-actions]

CLA Assistant Lite All Contributors have signed the CLA.

[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}

[coveralls]

Pull Request Test Coverage Report for Build 1712268936

• 1 of 2 (50.0%) changed or added relevant lines in 2 files are covered.
• 61 unchanged lines in 4 files lost coverage.
• Overall coverage increased (+0.005%) to 32.49%

---

Changes Missing Coverage	Covered Lines	Changed/Added Lines	%
src/routes/safe/components/Transactions/TxList/MethodValue.tsx	0	1	0.0%

Files with Coverage Reduction	New Missed Lines	%
src/routes/routes.ts	1	93.33%
src/components/Root/index.tsx	13	0%
src/routes/index.tsx	15	0%
src/logic/safe/store/reducer/gatewayTransactions.ts	32	2.11%

Totals
Change from base Build 1698563494:	0.005%
Covered Lines:	3160
Relevant Lines:	8679

---

💛 - Coveralls

[github-actions]

Deployment links

🟠 Safe Rinkeby	⚪ Safe Mainnet	🟣 Safe Polygon	🟡 Safe BSC	⚫ Safe Arbitrum	🟢 Safe xDai

[github-actions]

E2E Tests Failed
Check the results here: https://github.com/gnosis/safe-react-e2e-tests/actions/runs/1712301663

Failed tests:

• ❌ Safe Apps List Safe Apps List
• ❌ Safe Balances Safe Balances

[iamacook]

Looking good @usame-algan, but should it not also wrap Value on line 56? And does the scroll issue only affect contract interactions?

[usame-algan]

Looking good @usame-algan, but should it not also wrap Value on line 56? And does the scroll issue only affect contract interactions?

For some value types we don't set flex box so the value gets displayed in their own row but it wouldn't hurt to still set the min-width to 50% even if there is only one column. The scroll should "trigger" every time there is not enough available space within MethodDetails regardless of the transaction type

[katspaugh]

Please add a screenshot in the description of what an overflowing field looks like.

Nvm, I saw it on the link you provided. IMHO, the value and label should scroll separately if possible.

Also there's plenty of vertical space, yet the label tries to be on a single line. Might be worth adding word-break or hyphens: auto or some other way to break it.

[usame-algan]

Also there's plenty of vertical space, yet the label tries to be on a single line. Might be worth adding word-break or hyphens: auto or some other way to break it.

I agree it would be better to use the available vertical space in those cases. I added flex-wrap: wrap for automatic line breaks if there is not enough space. Hopefully that should cover both large and small values.

[iamacook]

I'd move this to MethodDetails as it is being used there and not here.

[katspaugh]

It could look like this with white-space: nowrap removed:

Or, like in your version, with flex-wrap: wrap added (I like this better):

In both cases, removing white-space: nowrap seems to help avoid scrollbars. Dunno if it breaks any other fields.

[usame-algan]

In both cases, removing white-space: nowrap seems to help avoid scrollbars. Dunno if it breaks any other fields.

In combination with flex-wrap: wrap it should be ok to remove white-space: nowrap because labels and values stack on top of each other on smaller screens

[github-actions]

Deployment links

🟠 Rinkeby	⚪ Mainnet	🟣 Polygon	🟡 BSC	⚫ Arbitrum	🟢 Gnosis Chain