frontend: make account-overview responsive

Visually changed search input height also in default mode, so it
uses the same height as all other input fields.

Author: thisconnect

frontends/web/src/components/amount/conversion-amount.module.css

@@ -15,18 +15,18 @@
 .txUnit {
   color: var(--color-secondary);
   font-size: var(--size-small);
-  line-height: 1.285714;
+  /* line-height: 1.285714; */
   white-space: nowrap;
 }
 
 .txConversionAmount .txUnit {
-  font-size: 1.2rem;
+  font-size: var(--size-smaller);
   flex-shrink: 0;
 }
 
 .txSmallInlineIcon img {
-  max-height: 15px;
-  max-width: 15px;
+  max-height: 1.5rem;
+  max-width: 1.5rem;
   vertical-align: text-bottom;
 }
 .txConversionAmount .txSmallInlineIcon {

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

@@ -81,7 +81,7 @@
 
 .txAmount {
   align-items: baseline;
-  font-size: 1.6rem;
+  font-size: var(--size-default);
   font-variant: tabular-nums;
   gap: 3px;
   justify-content: flex-end;
@@ -180,7 +180,7 @@
 }
 .txType {
   color: var(--color-default);
-  font-size: 1.6rem;
+  font-size: var(--size-default);
   line-height: 1.25;
 }
 

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

@@ -32,7 +32,7 @@
 }
 
 .loupe {
-    width: 17px;
+    width: var(--size-default);
 }
 
 @media (max-width: 768px) {
@@ -54,7 +54,6 @@
 }
 
 .actionsContainer {
-    --size-default: 1.4rem;
     display: flex;
     flex-grow: 1;
     flex-shrink: 0;
@@ -102,7 +101,7 @@
     color: var(--color-secondary);
     display: flex;
     justify-content: space-between;
-    margin-bottom: var(--space-quarter) !important; /* overwrite default subTitle margin */
+    margin-bottom: 0 !important; /* overwrite default subTitle margin */
 }
 .titleWithButton button {
     padding-left: var(--space-half);
@@ -181,10 +180,6 @@
     width: 100%;
 }
 
-.searchInput input {
-    height: 40px;
-}
-
 .searchInput:focus {
     outline: none;
     border-color: var(--color-primary);