frontend: improve send view in responsive mode

Author: thisconnect

frontends/web/src/routes/account/send/components/confirm/confirm.module.css

@@ -5,6 +5,7 @@
 .confirmationItemWrapper {
   align-items: baseline;
   display: flex;
+  flex-wrap: wrap;
   justify-content: space-between;
 }
 
@@ -18,6 +19,7 @@
 }
 
 .confirmItem p {
+  flex-grow: 1;
   margin: 0;
   word-break: break-all;
 }
@@ -49,6 +51,7 @@
 .totalWrapper {
   align-items: baseline;
   display: flex;
+  flex-wrap: wrap;
 }
 
 .totalWrapper .totalFiatValue {

frontends/web/src/routes/account/send/components/confirm/confirm.tsx

@@ -134,7 +134,9 @@ export const ConfirmSend = ({
         {note ? (
           <div className={style.confirmItem}>
             <label>{t('note.title')}</label>
-            <p className={style.valueOriginal}>{note}</p>
+            <p className={style.valueOriginal}>
+              {note}
+            </p>
           </div>
         ) : null}
 

frontends/web/src/routes/account/send/utxos.module.css

@@ -1,6 +1,6 @@
 .utxosList {
     list-style: none;
-    padding: 0 0 var(--space-half) 0;
+    padding: 0 0 var(--space-half) 0 !important;
 }
 
 .utxosList label {
@@ -41,11 +41,14 @@
 }
 
 .utxoExplorer img {
-    width: 18px;
-    height: 18px;
+    display: block;
+    height: var(--size-subheader);
+    width: var(--size-subheader);
 }
 
 .amounts {
+    display: flex;
+    flex-wrap: wrap;
     line-height: 1;
     padding-bottom: var(--space-quarter);
 }