frontend: make transaction-detail dialog reponsive

Author: thisconnect

frontends/web/src/components/transactions/components/details.module.css

@@ -33,7 +33,7 @@
 .editButton {
     background: none;
     border: none;
-    height: 20px;
+    min-height: 20px;
     margin-right: var(--space-half);
     padding: 0;
     -webkit-appearance: none;

frontends/web/src/components/transactions/components/tx-detail-dialog/tx-detail-dialog.module.css

@@ -4,14 +4,15 @@
 
 .label {
     color: var(--color-default);
-    font-size: 14px;
+    font-size: var(--size-small);
     font-weight: 600;
     margin: 0;
 }
 
 .row {
     align-items: center;
     display: flex;
+    flex-wrap: wrap;
     justify-content: space-between;
 }
 
@@ -28,7 +29,7 @@
 .detailAddress {
     padding: 0;
     margin: 0;
-    height: 20px;
+    min-height: 20px;
 }
 
 .container {
@@ -65,12 +66,13 @@
 }
 
 .rowUnit {
-    font-size: 13px;
+    font-size: var(--size-small);
 }
 
 .statusContainer {
     align-items: center;
     display: flex;
+    flex-wrap: wrap;
     justify-content: space-between;
     margin-bottom: calc(var(--space-half) + var(--space-quarter));
     width: 100%;
@@ -114,26 +116,28 @@
 
 .note {
     margin: 0;
-    height: 20px;
     width: 85%;
 }
 
 .note input {
     border: none;
-    height: 20px;
+    height: auto;
+    min-height: 20px;
     padding: 0;
 }
 
 .noteContainer {
     align-items: center;
     display: flex;
     flex-direction: row;
+    flex-wrap: wrap;
     justify-content: space-between;
     padding: 0;
 }
 
 .unit {
     font-weight: 400;
+    font-size: var(--size-small);
     color: var(--color-secondary);
     font-variant: normal;
     position: relative;