Improve transaction dialog responsive design on mobile

[rickstaa]

Problem

Transaction dialogs (TxSummaryDialog, TxStartedDialog, TxConfirmedDialog) have several UI/UX issues on small screens:

• No margin from screen edges — dialogs touch the viewport borders on mobile, hiding rounded corners and making them look like full-screen overlays rather than floating dialogs
• Fixed width doesn't scale — minWidth: 370 on TxSummaryDialog overflows on screens narrower than 370px
• Dialog too narrow on medium screens — capped at 370-390px even when more space is available
• Success badge oversized — large padding and font size wastes vertical space on small screens
• Header text overflow — "Transfer Receipt" and "Details" labels crowd the transaction title on narrow screens

Solution

• Add width: calc(100% - 32px) for 16px margin from screen edges
• Use responsive maxWidth — 370-390px on small screens, 450px at @bp1 (520px+)
• Reduce Success badge padding and font size for a more compact look
• Make header link text responsive — icon-only on small screens, full text on wider screens

Before / After

Before (small screen): Dialog touches edges, no rounded corners visible, header text wraps
After (small screen): 16px margin, rounded corners visible, icon-only receipt link
After (medium screen): Wider dialog (450px), full "Transfer Receipt" text shown