[Cashtab] Enhance message display UI
Summary:
- Re-position the UI elements within the TxWrapper to maximize legibility of the OP_RETURN message and avoid overflows with Transaction properties seen in T1974.
- Verified across web view, mobile view and extension view.
- Adjusted message input placeholder text as per T1972.
Test Plan:
- npm start
- test with messages that have long words, short words, one liners...etc and ensure the message is displayed as per screenshots below.
- test with a message containing 150 consecutive characters of unbroken X (i.e. xxxxxxxxxxxxxxxxx...) and ensure message is contained within the TxWrapper UI.
- npm run extension.
- ensure same UI displays in extension mode.
- ensure same UI displays in firefox.
- use mobile phone to access the local Cashtab instance via bridged adapter and ensure same UI displays in actual mobile view.
Reviewers: bytesofman, #bitcoin_abc
Reviewed By: bytesofman, #bitcoin_abc
Differential Revision: https://reviews.bitcoinabc.org/D10496