safe-wallet-web icon indicating copy to clipboard operation
safe-wallet-web copied to clipboard

Fix: text overlaps and hidden execute button in the transaction summary

Open jmealy opened this issue 2 months ago • 4 comments

What it solves

  • execute tx button is hidden for some widths [1]
  • the tx info overlaps with the tx date for some widths in swap transactions [2]

Resolves #3664 Resolves: https://www.notion.so/safe-global/07996126a3c041db90e36e01eb4ce46c?v=03b2eaffc9af4b48b1bf57e50546ac3d&p=12098c01ba6743b7a3669e6262c9800c&pm=s (thread)

How this PR fixes it

  • Increases the breakpoint for splitting the summary over two lines, so the execute button does not become hidden
  • Increases the width of the tx info section to accomodate the longer swap transaction info
  • Add a max with with nowrap for longer token names in the tx summary

How to test it

  • View a swap transaction in the queue.
  • see that the execute/speed up button is visible for all screen widths
  • see that there is no overlap between the tx info and the date, including when the token names are very long.

Screenshots

[1]

image [2] image

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) 🧑‍💻

jmealy avatar May 07 '24 14:05 jmealy