From 5cd2a9fcf2ebe526a5fc5ad6d86105cf38140cc4 Mon Sep 17 00:00:00 2001
From: thisconnect <this@shiftcrypto.ch>
Date: Thu, 9 May 2024 11:37:13 +0200
Subject: [PATCH 01/31] frontend: prepare for responsive font-size

In order to change the CSS to change the codebase to use rem, using
'The 62.5% Font Size Trick' we need to first convert all existing
rem units back to px. This is so that we don't accidentally already
have rem values.

If the default base font size is 16px, 1rem equals 16px. Changing
back to pixel first makes it much easier to use the 62.5% trick
where 1rem = 10px.

This refactoring should not introduce any visual change and just
converted rem to px. I.e. 1.5rem is now 24px as 1rem currently
equals 16px.

Also simplified terms.module.css a bit as the title was defined
multiple times.
---
 .../web/src/components/guide/guide.module.css    |  8 ++++----
 frontends/web/src/components/password.module.css |  2 +-
 .../pillbuttongroup/pillbuttongroup.module.css   |  2 +-
 .../web/src/components/terms/terms.module.css    | 16 +++++-----------
 .../web/src/routes/account/add/add.module.css    |  2 +-
 .../web/src/routes/account/info/info.module.css  |  2 +-
 .../account/summary/accountssummary.module.css   |  2 +-
 .../src/routes/account/summary/chart.module.css  | 14 +++++++-------
 .../account/summary/percentage-diff.module.css   |  8 ++++----
 .../web/src/routes/device/bitbox01/check.jsx     |  2 +-
 .../routes/device/components/backups.module.css  |  2 +-
 frontends/web/src/style/variables.css            |  8 ++++----
 12 files changed, 31 insertions(+), 37 deletions(-)

diff --git a/frontends/web/src/components/guide/guide.module.css b/frontends/web/src/components/guide/guide.module.css
index 67cdacd66f..85129d0eb1 100644
--- a/frontends/web/src/components/guide/guide.module.css
+++ b/frontends/web/src/components/guide/guide.module.css
@@ -80,10 +80,9 @@
 }
 
 .content h2 {
-    font-size: 1.1em;
+    font-size: var(--size-subheader);
     font-weight: 400;
-    line-height: 1.2em;
-    margin: 0px;
+    margin: 0;
 }
 
 .guide p {
@@ -115,6 +114,7 @@
 .entryTitle .entryToggle {
     align-items: center;
     display: flex;
+    font-size: var(--size-subheader);
     flex-direction: row;
     font-weight: bold;
     justify-content: flex-start;
@@ -198,6 +198,6 @@
 
 @media screen and (max-width: 640px) {
     .guide h2 {
-        font-size: 1.05em;
+        font-size: var(--size-default);
     }
 }
diff --git a/frontends/web/src/components/password.module.css b/frontends/web/src/components/password.module.css
index 313232864d..09fda96a40 100644
--- a/frontends/web/src/components/password.module.css
+++ b/frontends/web/src/components/password.module.css
@@ -4,5 +4,5 @@
     line-height: 42px;
     position: absolute;
     right: 0;
-    width: 2rem;
+    width: 32px;
 }
diff --git a/frontends/web/src/components/pillbuttongroup/pillbuttongroup.module.css b/frontends/web/src/components/pillbuttongroup/pillbuttongroup.module.css
index f0c72a8581..8c92b25549 100644
--- a/frontends/web/src/components/pillbuttongroup/pillbuttongroup.module.css
+++ b/frontends/web/src/components/pillbuttongroup/pillbuttongroup.module.css
@@ -9,7 +9,7 @@
 	appearance: none;
 	background: var(--background-secondary);
 	border: 2px solid var(--background-secondary);
-	border-radius: 2rem;
+	border-radius: 32px;
 	color: var(--color-default);
 	font-size: var(--size-default);
 	line-height: 1.75;
diff --git a/frontends/web/src/components/terms/terms.module.css b/frontends/web/src/components/terms/terms.module.css
index 8ca16394e5..c31ecf7580 100644
--- a/frontends/web/src/components/terms/terms.module.css
+++ b/frontends/web/src/components/terms/terms.module.css
@@ -12,12 +12,6 @@
   width: 100%;
 }
 
-.title {
-  font-size: 2rem;
-  font-weight: 400;
-  text-align: center;
-}
-
 .disclaimer {
   background-color: var(--background-secondary);
   flex-basis: 100%;
@@ -30,19 +24,19 @@
   padding: var(--space-quarter) 1em 1em 1em;
 }
 
-.disclaimer .title {
-  font-size: .875rem;
+.title {
+  font-size: 14px;
   font-weight: bold;
   text-align: left;
 }
 
 .disclaimer p {
-  font-size: .875rem;
+  font-size: 14px;
   line-height: 1.5;
 }
 
 .disclaimer p + .title {
-  margin: 2.5rem 0 0 0;
+  margin: 40px 0 0 0;
 }
 
 .table {
@@ -51,7 +45,7 @@
 
 .table table {
   border-collapse: collapse;
-  font-size: .875rem;
+  font-size: 14px;
   text-align: left;
 }
 
diff --git a/frontends/web/src/routes/account/add/add.module.css b/frontends/web/src/routes/account/add/add.module.css
index 070334489c..d43d2f0569 100644
--- a/frontends/web/src/routes/account/add/add.module.css
+++ b/frontends/web/src/routes/account/add/add.module.css
@@ -13,7 +13,7 @@
 
 .successCheck {
     background-color: var(--color-success);
-    border: .5rem solid var(--color-success);
+    border: 8px solid var(--color-success);
     border-radius: 100px;
 }
 
diff --git a/frontends/web/src/routes/account/info/info.module.css b/frontends/web/src/routes/account/info/info.module.css
index 26b0e0b507..c3771b8606 100644
--- a/frontends/web/src/routes/account/info/info.module.css
+++ b/frontends/web/src/routes/account/info/info.module.css
@@ -33,7 +33,7 @@
     clear: both;
     display: flex;
     justify-content: space-between;
-    min-height: 3.5rem;
+    min-height: 56px;
 }
 
 .verifyButton {
diff --git a/frontends/web/src/routes/account/summary/accountssummary.module.css b/frontends/web/src/routes/account/summary/accountssummary.module.css
index d65da56922..4a01d318d0 100644
--- a/frontends/web/src/routes/account/summary/accountssummary.module.css
+++ b/frontends/web/src/routes/account/summary/accountssummary.module.css
@@ -193,7 +193,7 @@
     }
 
     .coinName img {
-        left: -2rem;
+        left: -32px;
         position: absolute;
         top: -3px;
     }
diff --git a/frontends/web/src/routes/account/summary/chart.module.css b/frontends/web/src/routes/account/summary/chart.module.css
index 5ee251b2be..cee0637e48 100644
--- a/frontends/web/src/routes/account/summary/chart.module.css
+++ b/frontends/web/src/routes/account/summary/chart.module.css
@@ -82,7 +82,7 @@
 }
 
 .totalValue {
-  font-size: 2rem;
+  font-size: 32px;
   display: flex;
   align-items: flex-end;
 }
@@ -91,8 +91,8 @@
   color: var(--color-secondary);
   display: inline-block;
   margin-bottom: 3px;
-  font-size: 1.4rem;
-  padding: 0 .25rem;
+  font-size: 22px;
+  padding: 0 4px;
 }
 
 .chartCanvas {
@@ -113,7 +113,7 @@
   font-size: var(--size-small);
   margin-top: -25px;
   min-width: 140px;
-  padding: .75rem .6rem;
+  padding: 12px 10px;
   pointer-events: none;
   position: absolute;
   text-align: center;
@@ -123,14 +123,14 @@
 
 .toolTipValue {
   font-weight: normal;
-  font-size: 1rem;
-  margin: 0 0 .25rem 0;
+  font-size: 16px;
+  margin: 0 0 4px 0;
 }
 
 .toolTipUnit {
   color: var(--color-secondary);
   font-size: var(--size-small);
-  padding: 0 .125rem;
+  padding: 0 2px;
 }
 
 .toolTipTime {
diff --git a/frontends/web/src/routes/account/summary/percentage-diff.module.css b/frontends/web/src/routes/account/summary/percentage-diff.module.css
index fb032d8493..d4380296b2 100644
--- a/frontends/web/src/routes/account/summary/percentage-diff.module.css
+++ b/frontends/web/src/routes/account/summary/percentage-diff.module.css
@@ -1,6 +1,6 @@
 
 .arrow img {
-  margin-right: .25rem;
+  margin-right: 4px;
   vertical-align: text-bottom;
 }
 
@@ -13,10 +13,10 @@
 }
 
 .diffValue {
-  font-size: 1.2rem;
+  font-size: 19px;
 }
 
 .diffUnit {
-  font-size: 1rem;
-  padding: 0 .25rem;
+  font-size: 16px;
+  padding: 0 4px;
 }
diff --git a/frontends/web/src/routes/device/bitbox01/check.jsx b/frontends/web/src/routes/device/bitbox01/check.jsx
index f34a14270d..c829018178 100644
--- a/frontends/web/src/routes/device/bitbox01/check.jsx
+++ b/frontends/web/src/routes/device/bitbox01/check.jsx
@@ -99,7 +99,7 @@ class Check extends Component {
               onClose={this.abort}>
               { message ? (
                 <div>
-                  <p style={{ minHeight: '3rem' }}>{message}</p>
+                  <p style={{ minHeight: '48px' }}>{message}</p>
                   <div className={style.actions}>
                     <Button secondary onClick={this.abort}>
                       {t('button.back')}
diff --git a/frontends/web/src/routes/device/components/backups.module.css b/frontends/web/src/routes/device/components/backups.module.css
index 32544c62d8..26f4df2cf1 100644
--- a/frontends/web/src/routes/device/components/backups.module.css
+++ b/frontends/web/src/routes/device/components/backups.module.css
@@ -36,7 +36,7 @@
 }
 
 .agreements {
-    margin-bottom: 1rem;
+    margin-bottom: 16px;
 }
 
 .emptyText {
diff --git a/frontends/web/src/style/variables.css b/frontends/web/src/style/variables.css
index 3bbc5b77e9..eb27a6f02d 100644
--- a/frontends/web/src/style/variables.css
+++ b/frontends/web/src/style/variables.css
@@ -48,7 +48,7 @@
     --color-error-border: rgba(227, 6, 19, .33);
 
     /* font sizes */
-    --size-large: 2rem;
+    --size-large: 32px;
     --size-header: 24px;
     --size-subheader: 18px;
     --size-default: 14px;
@@ -57,9 +57,9 @@
     --size-title: 32px;
 
     /* spacing */
-    --spacing-large: 2rem;
-    --spacing-default: 1rem;
-    --spacing-half: .5rem;
+    --spacing-large: 32px;
+    --spacing-default: 16px;
+    --spacing-half: 8px;
 
     --space-large: 64px;
     --space-default: 32px;

From e2473d47a2366fa5c16870ed9e59c878e4293dc6 Mon Sep 17 00:00:00 2001
From: Tomas Vrba <vrba.tomas@pm.me>
Date: Wed, 15 Oct 2025 18:03:36 +0200
Subject: [PATCH 02/31] frontend: implement responsive font-size using 62.5%
 trick
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Set html { font-size: 62.5%; } to make 1rem = 10px for easier
responsive calculations. Convert all hardcoded px font-sizes to rem
units throughout the codebase.

This enables easier responsive font scaling by allowing components
to scale proportionally when the root font-size changes for different
screen sizes or user preferences.

Conversions:
- 10px → 1.0rem
- 11px → 1.1rem
- 12px → 1.2rem
- 14px → 1.4rem
- 16px → 1.6rem
- 18px → 1.8rem
- 19px → 1.9rem
- 20px → 2.0rem
- 22px → 2.2rem
- 24px → 2.4rem
- 32px → 3.2rem
- 35px → 3.5rem

This follows the standard '62.5% Font Size Trick' pattern where
setting the root font-size to 62.5% (of browser default 16px) makes
1rem equal to 10px, simplifying rem-to-pixel mental math.
---
 .../actionable-item.module.css                |  2 +-
 .../amount/conversion-amount.module.css       |  4 ++--
 .../web/src/components/aopp/aopp.module.css   |  2 +-
 .../web/src/components/badge/badge.module.css |  2 +-
 .../bottom-navigation.module.css              |  2 +-
 .../bitbox02bootloader.module.css             |  6 ++---
 .../src/components/dialog/dialog.module.css   |  4 ++--
 .../web/src/components/forms/radio.module.css |  2 +-
 .../web/src/components/guide/guide.module.css |  2 +-
 .../headerssync/headerssync.module.css        |  2 +-
 .../keystore/connected-keystore.module.css    |  2 +-
 .../keystoreconnectprompt.module.css          |  2 +-
 .../src/components/spinner/ascii.module.css   |  2 +-
 .../web/src/components/terms/terms.module.css |  8 +++----
 .../src/components/title/subtitle.module.css  |  2 +-
 .../transactions/transaction.module.css       | 14 +++++------
 .../web/src/components/view/view.module.css   |  8 +++----
 .../incoming-signing-request.module.css       |  6 ++---
 .../web/src/routes/account/account.module.css |  2 +-
 .../account/add/components/steps.module.css   |  2 +-
 .../account/info/buy-receive-cta.module.css   |  2 +-
 .../routes/account/summary/chart.module.css   |  6 ++---
 .../summary/percentage-diff.module.css        |  4 ++--
 .../components/header/header.module.css       |  4 ++--
 .../session-card/session-card.module.css      |  2 +-
 .../walletconnect/dashboard.module.css        |  8 +++----
 .../routes/accounts/all-accounts.module.css   |  6 ++---
 .../routes/bitsurance/bitsurance.module.css   |  8 +++----
 .../routes/bitsurance/dashboard.module.css    |  4 ++--
 .../components/countryselect.module.css       |  2 +-
 .../market/components/vendor-deals.module.css |  2 +-
 .../web/src/routes/market/market.module.css   |  2 +-
 .../factory-reset-setting.module.css          |  2 +-
 .../watchonlySettings.module.css              |  2 +-
 .../settingsItem/settingsItem.module.css      |  6 ++---
 .../settings/manage-accounts.module.css       |  2 +-
 frontends/web/src/style/base.css              |  6 ++++-
 frontends/web/src/style/variables.css         | 24 +++++++++----------
 38 files changed, 86 insertions(+), 82 deletions(-)

diff --git a/frontends/web/src/components/actionable-item/actionable-item.module.css b/frontends/web/src/components/actionable-item/actionable-item.module.css
index 5322d8c7bb..e9567cd6a4 100644
--- a/frontends/web/src/components/actionable-item/actionable-item.module.css
+++ b/frontends/web/src/components/actionable-item/actionable-item.module.css
@@ -1,5 +1,5 @@
 .container {
-  --size-default: 14px;
+  --size-default: 1.4rem;
   align-items: center;
   background-color: var(--background-secondary);
   border: none;
diff --git a/frontends/web/src/components/amount/conversion-amount.module.css b/frontends/web/src/components/amount/conversion-amount.module.css
index ad4d2b1f7d..15149a06ad 100644
--- a/frontends/web/src/components/amount/conversion-amount.module.css
+++ b/frontends/web/src/components/amount/conversion-amount.module.css
@@ -14,13 +14,13 @@
 .txPrefix,
 .txUnit {
   color: var(--color-secondary);
-  font-size: 14px;
+  font-size: 1.4rem;
   line-height: 1.285714;
   white-space: nowrap;
 }
 
 .txConversionAmount .txUnit {
-  font-size: 12px;
+  font-size: 1.2rem;
   flex-shrink: 0;
 }
 
diff --git a/frontends/web/src/components/aopp/aopp.module.css b/frontends/web/src/components/aopp/aopp.module.css
index e9e8a89472..c6d4d1437b 100644
--- a/frontends/web/src/components/aopp/aopp.module.css
+++ b/frontends/web/src/components/aopp/aopp.module.css
@@ -42,6 +42,6 @@
 }
 @media (min-width: 1200px) {
     .message {
-        --size-default: 18px;
+        --size-default: 1.8rem;
     }
 }
diff --git a/frontends/web/src/components/badge/badge.module.css b/frontends/web/src/components/badge/badge.module.css
index bf3f9fd06a..3cd75b9b75 100644
--- a/frontends/web/src/components/badge/badge.module.css
+++ b/frontends/web/src/components/badge/badge.module.css
@@ -28,7 +28,7 @@
 
 @media (max-width: 382px) {
   .badge {
-      font-size: 10px;
+      font-size: 1rem;
   }
 }
 
diff --git a/frontends/web/src/components/bottom-navigation/bottom-navigation.module.css b/frontends/web/src/components/bottom-navigation/bottom-navigation.module.css
index 8db8f81cbb..cb0a90f78e 100644
--- a/frontends/web/src/components/bottom-navigation/bottom-navigation.module.css
+++ b/frontends/web/src/components/bottom-navigation/bottom-navigation.module.css
@@ -18,7 +18,7 @@
     align-items: center;
     color: var(--color-text);
     display: flex;
-    font-size: 12px;
+    font-size: 1.2rem;
     flex-direction: column;
     gap: 4px;
     justify-content: center;
diff --git a/frontends/web/src/components/devices/bitbox02bootloader/bitbox02bootloader.module.css b/frontends/web/src/components/devices/bitbox02bootloader/bitbox02bootloader.module.css
index bffd8bc5d2..08ecb6b6c7 100644
--- a/frontends/web/src/components/devices/bitbox02bootloader/bitbox02bootloader.module.css
+++ b/frontends/web/src/components/devices/bitbox02bootloader/bitbox02bootloader.module.css
@@ -8,13 +8,13 @@
 
 .progressInfo {
     display: flex;
-    font-size: 16px;
+    font-size: 1.6rem;
     justify-content: space-between;
     margin: 0 0 var(--space-default);
 }
 
 .additionalUpgrade {
-    font-size: 16px;
+    font-size: 1.6rem;
     margin: 0;
     margin-top: var(--space-eight);
 }
@@ -23,7 +23,7 @@
     .content,
     .additionalUpgrade
     {
-        font-size: 14px;
+        font-size: 1.4rem;
     }
 }
 
diff --git a/frontends/web/src/components/dialog/dialog.module.css b/frontends/web/src/components/dialog/dialog.module.css
index 387058a058..ee91952604 100644
--- a/frontends/web/src/components/dialog/dialog.module.css
+++ b/frontends/web/src/components/dialog/dialog.module.css
@@ -34,13 +34,13 @@
 /* guard dialog and wait-dialog from view styles */
 @media (min-width: 1200px) {
     .header .title {
-        --size-subheader: 16px;
+        --size-subheader: 1.6rem;
     }
     .modal {
         margin-left: var(--sidebar-width-large);
     }
     .modal .contentContainer p {
-        --size-default: 14px;
+        --size-default: 1.4rem;
     }
 }
 
diff --git a/frontends/web/src/components/forms/radio.module.css b/frontends/web/src/components/forms/radio.module.css
index 1513737b3e..6784c77126 100644
--- a/frontends/web/src/components/forms/radio.module.css
+++ b/frontends/web/src/components/forms/radio.module.css
@@ -1,5 +1,5 @@
 .radio {
-    --size-default: 14px;
+    --size-default: 1.4rem;
     line-height: 1.5;
 }
 
diff --git a/frontends/web/src/components/guide/guide.module.css b/frontends/web/src/components/guide/guide.module.css
index 85129d0eb1..6903a6e05f 100644
--- a/frontends/web/src/components/guide/guide.module.css
+++ b/frontends/web/src/components/guide/guide.module.css
@@ -63,7 +63,7 @@
 
 .header a {
     cursor: pointer;
-    font-size: 20px;
+    font-size: 2rem;
 }
 
 .content {
diff --git a/frontends/web/src/components/headerssync/headerssync.module.css b/frontends/web/src/components/headerssync/headerssync.module.css
index e8d88ad0f6..e369ef811e 100644
--- a/frontends/web/src/components/headerssync/headerssync.module.css
+++ b/frontends/web/src/components/headerssync/headerssync.module.css
@@ -51,7 +51,7 @@
     animation: changeContent .8s linear infinite;
     display: block;
     content: "⠋";
-    font-size: 14px;
+    font-size: 1.4rem;
     margin-left: 3px;
 }
 
diff --git a/frontends/web/src/components/keystore/connected-keystore.module.css b/frontends/web/src/components/keystore/connected-keystore.module.css
index 6b76ac3828..cdd5bb5e99 100644
--- a/frontends/web/src/components/keystore/connected-keystore.module.css
+++ b/frontends/web/src/components/keystore/connected-keystore.module.css
@@ -15,6 +15,6 @@
 
 @media (min-width: 1200px) {
   .keystore {
-    --size-default: 20px;
+    --size-default: 2rem;
   }
 }
diff --git a/frontends/web/src/components/keystoreconnectprompt.module.css b/frontends/web/src/components/keystoreconnectprompt.module.css
index 654d3c5de9..05f3197794 100644
--- a/frontends/web/src/components/keystoreconnectprompt.module.css
+++ b/frontends/web/src/components/keystoreconnectprompt.module.css
@@ -36,7 +36,7 @@
 }
 
 .text {
-    font-size: 16px;
+    font-size: 1.6rem;
 }
 
 .dialogButtonsContainer {
diff --git a/frontends/web/src/components/spinner/ascii.module.css b/frontends/web/src/components/spinner/ascii.module.css
index 3d5b24310d..f3fb26d7d1 100644
--- a/frontends/web/src/components/spinner/ascii.module.css
+++ b/frontends/web/src/components/spinner/ascii.module.css
@@ -13,7 +13,7 @@
   animation: changeContent .8s linear infinite;
   display: block;
   content: "⠋";
-  font-size: 14px;
+  font-size: 1.4rem;
   margin-left: 3px;
 }
 
diff --git a/frontends/web/src/components/terms/terms.module.css b/frontends/web/src/components/terms/terms.module.css
index c31ecf7580..92584f7c6d 100644
--- a/frontends/web/src/components/terms/terms.module.css
+++ b/frontends/web/src/components/terms/terms.module.css
@@ -25,18 +25,18 @@
 }
 
 .title {
-  font-size: 14px;
+  font-size: 1.4rem;
   font-weight: bold;
   text-align: left;
 }
 
 .disclaimer p {
-  font-size: 14px;
+  font-size: 1.4rem;
   line-height: 1.5;
 }
 
 .disclaimer p + .title {
-  margin: 40px 0 0 0;
+  margin: 4rem 0 0 0;
 }
 
 .table {
@@ -45,7 +45,7 @@
 
 .table table {
   border-collapse: collapse;
-  font-size: 14px;
+  font-size: 1.4rem;
   text-align: left;
 }
 
diff --git a/frontends/web/src/components/title/subtitle.module.css b/frontends/web/src/components/title/subtitle.module.css
index 7fa169080b..78fdae9c0b 100644
--- a/frontends/web/src/components/title/subtitle.module.css
+++ b/frontends/web/src/components/title/subtitle.module.css
@@ -7,6 +7,6 @@
 
 @media (min-width: 1200px) {
   .subtitle {
-    --size-subheader: 20px;
+    --size-subheader: 2rem;
   }
 }
diff --git a/frontends/web/src/components/transactions/transaction.module.css b/frontends/web/src/components/transactions/transaction.module.css
index b8445c3bf3..5ecddd7204 100644
--- a/frontends/web/src/components/transactions/transaction.module.css
+++ b/frontends/web/src/components/transactions/transaction.module.css
@@ -59,7 +59,7 @@
   flex-direction: column;
   flex-grow: 1;
   flex-shrink: 0;
-  font-size: 14px;
+  font-size: 1.4rem;
   line-height: 1.285714;
   padding: 0 var(--space-quarter) 0 48px;
   text-align: right;
@@ -81,7 +81,7 @@
 
 .txAmount {
   align-items: baseline;
-  font-size: 16px;
+  font-size: 1.6rem;
   font-variant: tabular-nums;
   gap: 3px;
   justify-content: flex-end;
@@ -105,7 +105,7 @@
 
 .txUnit {
   color: var(--color-secondary);
-  font-size: 14px;
+  font-size: 1.4rem;
   line-height: 1.285714;
 }
 
@@ -116,7 +116,7 @@
 }
 .txNoteText {
   color: var(--color-default);
-  font-size: 16px;
+  font-size: 1.6rem;
   line-height: 1.25;
 }
 @media (max-width: 560px) {
@@ -130,7 +130,7 @@
   align-items: center;
   color: var(--color-secondary);
   display: flex;
-  font-size: 14px;
+  font-size: 1.4rem;
   line-height: 1.285714;
   padding-bottom: 6px;
 }
@@ -174,13 +174,13 @@
 }
 .addresses {
   color: var(--color-secondary);
-  font-size: 14px;
+  font-size: 1.4rem;
   font-weight: normal;
   line-height: 1.285714;
 }
 .txType {
   color: var(--color-default);
-  font-size: 16px;
+  font-size: 1.6rem;
   line-height: 1.25;
 }
 
diff --git a/frontends/web/src/components/view/view.module.css b/frontends/web/src/components/view/view.module.css
index cf346ba774..4ed24a471e 100644
--- a/frontends/web/src/components/view/view.module.css
+++ b/frontends/web/src/components/view/view.module.css
@@ -295,17 +295,17 @@
 
 @media (min-width: 1200px) {
     .title {
-        --size-subheader: 28px;
+        --size-subheader: 2.8rem;
     }
     .header,
     .inner p {
-        --size-default: 20px;
+        --size-default: 2rem;
     }
     .fullscreen {
-        --size-default: 18px;
+        --size-default: 1.8rem;
     }
     .inner footer p {
-        --size-default: 14px;
+        --size-default: 1.4rem;
     }
 }
 
diff --git a/frontends/web/src/components/wallet-connect/incoming-signing-request.module.css b/frontends/web/src/components/wallet-connect/incoming-signing-request.module.css
index 2e81e69c03..88cf966b6f 100644
--- a/frontends/web/src/components/wallet-connect/incoming-signing-request.module.css
+++ b/frontends/web/src/components/wallet-connect/incoming-signing-request.module.css
@@ -1,5 +1,5 @@
 .accountName {
-    font-size: 16px;
+    font-size: 1.6rem;
     margin: 0 var(--space-half) 0 0;
 }
 
@@ -9,7 +9,7 @@
 
 .address {
     color: var(--color-secondary);
-    font-size: 16px;
+    font-size: 1.6rem;
     margin: 0;
 }
 
@@ -55,7 +55,7 @@
 }
 
 .itemText {
-    font-size: 16px;
+    font-size: 1.6rem;
     margin: 0;
 }
 
diff --git a/frontends/web/src/routes/account/account.module.css b/frontends/web/src/routes/account/account.module.css
index 64d50f5c46..6727d14a44 100644
--- a/frontends/web/src/routes/account/account.module.css
+++ b/frontends/web/src/routes/account/account.module.css
@@ -205,7 +205,7 @@
     }
 
     .searchButton {
-        font-size: 14px;
+        font-size: 1.4rem;
         height: var(--item-height-small);
         text-align: left;
     }
diff --git a/frontends/web/src/routes/account/add/components/steps.module.css b/frontends/web/src/routes/account/add/components/steps.module.css
index e77d2b93ea..35f5aa0542 100644
--- a/frontends/web/src/routes/account/add/components/steps.module.css
+++ b/frontends/web/src/routes/account/add/components/steps.module.css
@@ -48,7 +48,7 @@
     content: "";
     display: inline-block;
     flex-shrink: 0;
-    font-size: 14px;
+    font-size: 1.4rem;
     height: var(--icon-size);
     line-height: var(--icon-size);
     position: relative;
diff --git a/frontends/web/src/routes/account/info/buy-receive-cta.module.css b/frontends/web/src/routes/account/info/buy-receive-cta.module.css
index 6344c21a81..83188704c2 100644
--- a/frontends/web/src/routes/account/info/buy-receive-cta.module.css
+++ b/frontends/web/src/routes/account/info/buy-receive-cta.module.css
@@ -16,6 +16,6 @@
 @media (max-width: 425px) {
     .buttons button {
         padding: var(--space-quarter);
-        font-size: 14px;
+        font-size: 1.4rem;
     }
 }
diff --git a/frontends/web/src/routes/account/summary/chart.module.css b/frontends/web/src/routes/account/summary/chart.module.css
index cee0637e48..e47f430c86 100644
--- a/frontends/web/src/routes/account/summary/chart.module.css
+++ b/frontends/web/src/routes/account/summary/chart.module.css
@@ -82,7 +82,7 @@
 }
 
 .totalValue {
-  font-size: 32px;
+  font-size: 3.2rem;
   display: flex;
   align-items: flex-end;
 }
@@ -91,7 +91,7 @@
   color: var(--color-secondary);
   display: inline-block;
   margin-bottom: 3px;
-  font-size: 22px;
+  font-size: 2.2rem;
   padding: 0 4px;
 }
 
@@ -123,7 +123,7 @@
 
 .toolTipValue {
   font-weight: normal;
-  font-size: 16px;
+  font-size: 1.6rem;
   margin: 0 0 4px 0;
 }
 
diff --git a/frontends/web/src/routes/account/summary/percentage-diff.module.css b/frontends/web/src/routes/account/summary/percentage-diff.module.css
index d4380296b2..25fc979e1a 100644
--- a/frontends/web/src/routes/account/summary/percentage-diff.module.css
+++ b/frontends/web/src/routes/account/summary/percentage-diff.module.css
@@ -13,10 +13,10 @@
 }
 
 .diffValue {
-  font-size: 19px;
+  font-size: 1.9rem;
 }
 
 .diffUnit {
-  font-size: 16px;
+  font-size: 1.6rem;
   padding: 0 4px;
 }
diff --git a/frontends/web/src/routes/account/walletconnect/components/header/header.module.css b/frontends/web/src/routes/account/walletconnect/components/header/header.module.css
index 9571b5834a..1c741f2144 100644
--- a/frontends/web/src/routes/account/walletconnect/components/header/header.module.css
+++ b/frontends/web/src/routes/account/walletconnect/components/header/header.module.css
@@ -26,11 +26,11 @@
 }
 
 .accountName {
-    font-size: 20px;
+    font-size: 2rem;
 }
 
 .receiveAddress {
-    font-size: 16px;
+    font-size: 1.6rem;
 }
 
 @media (max-width: 768px) {
diff --git a/frontends/web/src/routes/account/walletconnect/components/session-card/session-card.module.css b/frontends/web/src/routes/account/walletconnect/components/session-card/session-card.module.css
index 3bb896e223..0ebec549f8 100644
--- a/frontends/web/src/routes/account/walletconnect/components/session-card/session-card.module.css
+++ b/frontends/web/src/routes/account/walletconnect/components/session-card/session-card.module.css
@@ -8,7 +8,7 @@
 
 .container p {
     color: var(--color-default);
-    font-size: 16px;
+    font-size: 1.6rem;
     line-height: 1.9;
     margin-bottom: 0;
 }
diff --git a/frontends/web/src/routes/account/walletconnect/dashboard.module.css b/frontends/web/src/routes/account/walletconnect/dashboard.module.css
index 55ec3937e6..9ae9bbe09e 100644
--- a/frontends/web/src/routes/account/walletconnect/dashboard.module.css
+++ b/frontends/web/src/routes/account/walletconnect/dashboard.module.css
@@ -16,12 +16,12 @@
 .headerContainer p.receiveAddress { 
     color: var(--color-secondary);
     margin-top: var(--space-quarter);
-    font-size: 16px;
+    font-size: 1.6rem;
 }
 
 .noConnectedSessions {
     color: var(--color-secondary);
-    font-size: 16px;
+    font-size: 1.6rem;
     margin: 0;
     margin-top: var(--space-large);
     text-align: center;
@@ -41,7 +41,7 @@
 
 .allSessionsHeading {
     color: var(--color-secondary);
-    font-size: 16px;
+    font-size: 1.6rem;
     margin: 0;
     margin-top: var(--space-half);
 }
@@ -54,7 +54,7 @@
     }
 
     .headerContainer p {
-        font-size: 16px;
+        font-size: 1.6rem;
     }
     
     .headerContainer p.receiveAddress,
diff --git a/frontends/web/src/routes/accounts/all-accounts.module.css b/frontends/web/src/routes/accounts/all-accounts.module.css
index 29d8204416..e11d73a905 100644
--- a/frontends/web/src/routes/accounts/all-accounts.module.css
+++ b/frontends/web/src/routes/accounts/all-accounts.module.css
@@ -1,7 +1,7 @@
 .container {
   display: flex;
   flex-direction: column;
-  font-size: 14px;
+  font-size: 1.4rem;
   gap: var(--space-half);
   width: 100%;
 }
@@ -57,7 +57,7 @@
   flex-basis: auto;
   flex-shrink: 0;
   flex-grow: 1;
-  font-size: 16px;
+  font-size: 1.6rem;
   justify-content: flex-end;
   margin-left: auto;
   overflow: hidden;
@@ -67,7 +67,7 @@
 .chevron {
   color: var(--color-mediumgray);
   flex-shrink: 0;
-  font-size: 18px;
+  font-size: 1.8rem;
   margin-left: 4px;
   margin-top: 6px;
   margin-right: -8px;
diff --git a/frontends/web/src/routes/bitsurance/bitsurance.module.css b/frontends/web/src/routes/bitsurance/bitsurance.module.css
index 4e53332efa..3bd5d6420f 100644
--- a/frontends/web/src/routes/bitsurance/bitsurance.module.css
+++ b/frontends/web/src/routes/bitsurance/bitsurance.module.css
@@ -1,10 +1,10 @@
 .cardBody {
-  font-size: 16px;
+  font-size: 1.6rem;
   margin-bottom: calc(var(--space-half) + var(--space-quarter));
 }
 
 .cardBody2 {
-  font-size: 14px;
+  font-size: 1.4rem;
   margin-bottom: var(--space-default);
 }
 
@@ -49,7 +49,7 @@
 }
 
 .title {
-  font-size: 20px;
+  font-size: 2rem;
   font-weight: 400;
   margin: 0;
   margin-bottom: var(--space-half);
@@ -84,6 +84,6 @@ ul.clean {
   }
 
   .title {
-    font-size: 16px;
+    font-size: 1.6rem;
   }
 }
diff --git a/frontends/web/src/routes/bitsurance/dashboard.module.css b/frontends/web/src/routes/bitsurance/dashboard.module.css
index 3c85b7687a..5e234d913a 100644
--- a/frontends/web/src/routes/bitsurance/dashboard.module.css
+++ b/frontends/web/src/routes/bitsurance/dashboard.module.css
@@ -1,5 +1,5 @@
 .text {
-  font-size: 16px;
+  font-size: 1.6rem;
   margin: 0;
 }
 
@@ -21,7 +21,7 @@
 }
 
 .button span {
-  font-size: 20px;
+  font-size: 2rem;
   margin-bottom: 2px;
   margin-right: var(--space-quarter);
 }
diff --git a/frontends/web/src/routes/market/components/countryselect.module.css b/frontends/web/src/routes/market/components/countryselect.module.css
index 55039c683c..2826525be4 100644
--- a/frontends/web/src/routes/market/components/countryselect.module.css
+++ b/frontends/web/src/routes/market/components/countryselect.module.css
@@ -3,7 +3,7 @@
 }
 
 .flag {
-    font-size: 20px;
+    font-size: 2rem;
 }
 
 .globe {
diff --git a/frontends/web/src/routes/market/components/vendor-deals.module.css b/frontends/web/src/routes/market/components/vendor-deals.module.css
index ae172e3864..b4b43c50c3 100644
--- a/frontends/web/src/routes/market/components/vendor-deals.module.css
+++ b/frontends/web/src/routes/market/components/vendor-deals.module.css
@@ -59,7 +59,7 @@
 
 
 .radio {
-    --size-default: 14px;
+    --size-default: 1.4rem;
     background-color: var(--background-secondary);
     border: 1px solid var(--background-quaternary);
     display: block;
diff --git a/frontends/web/src/routes/market/market.module.css b/frontends/web/src/routes/market/market.module.css
index 958d64ec66..a63bd30856 100644
--- a/frontends/web/src/routes/market/market.module.css
+++ b/frontends/web/src/routes/market/market.module.css
@@ -1,6 +1,6 @@
 .exchangeContainer,
 .exchangeContainer p {
-    --size-default: 14px;
+    --size-default: 1.4rem;
 }
 
 .exchangeContainer {
diff --git a/frontends/web/src/routes/settings/components/device-settings/factory-reset-setting.module.css b/frontends/web/src/routes/settings/components/device-settings/factory-reset-setting.module.css
index 03ad7704b7..9052a9aac8 100644
--- a/frontends/web/src/routes/settings/components/device-settings/factory-reset-setting.module.css
+++ b/frontends/web/src/routes/settings/components/device-settings/factory-reset-setting.module.css
@@ -4,7 +4,7 @@
 
 .settingName {
     color: var(--color-swissred);
-    font-size: 16px;
+    font-size: 1.6rem;
     margin: 0;
     margin-left: var(--space-quarter);
 }
\ No newline at end of file
diff --git a/frontends/web/src/routes/settings/components/manage-accounts/watchonlySettings.module.css b/frontends/web/src/routes/settings/components/manage-accounts/watchonlySettings.module.css
index c9a3d6206c..c476d0075d 100644
--- a/frontends/web/src/routes/settings/components/manage-accounts/watchonlySettings.module.css
+++ b/frontends/web/src/routes/settings/components/manage-accounts/watchonlySettings.module.css
@@ -11,7 +11,7 @@
 
 .labelText {
   display: inline-block;
-  font-size: 14px;
+  font-size: 1.4rem;
   line-height: 1;
   margin-top: 2px;
 }
diff --git a/frontends/web/src/routes/settings/components/settingsItem/settingsItem.module.css b/frontends/web/src/routes/settings/components/settingsItem/settingsItem.module.css
index 022877e8d0..356f3934ad 100644
--- a/frontends/web/src/routes/settings/components/settingsItem/settingsItem.module.css
+++ b/frontends/web/src/routes/settings/components/settingsItem/settingsItem.module.css
@@ -32,7 +32,7 @@
 
 .primaryText {
     color: var(--color-default);
-    font-size: 16px;
+    font-size: 1.6rem;
     margin: 0;
 }
 
@@ -58,7 +58,7 @@
 
 .displayedValue {
     color: var(--color-secondary);
-    font-size: 14px;
+    font-size: 1.4rem;
     margin: 0;
     padding-left: var(--space-half);
     padding-right: 0;
@@ -77,7 +77,7 @@ button .displayedValue {
 
 .secondaryText {
     color: var(--color-secondary);
-    font-size: 14px;
+    font-size: 1.4rem;
     margin: 0;
     margin-top: var(--space-quarter);
 }
diff --git a/frontends/web/src/routes/settings/manage-accounts.module.css b/frontends/web/src/routes/settings/manage-accounts.module.css
index 0a4bc3eb2b..a5d224ff0e 100644
--- a/frontends/web/src/routes/settings/manage-accounts.module.css
+++ b/frontends/web/src/routes/settings/manage-accounts.module.css
@@ -23,7 +23,7 @@
     align-items: center;
     display: flex;
     flex-wrap: wrap;
-    font-size: 20px;
+    font-size: 2rem;
     font-weight: 400;
     margin: 0 0 var(--space-quarter) 0;
     width: 50%;
diff --git a/frontends/web/src/style/base.css b/frontends/web/src/style/base.css
index 98ce957a2f..70c263a118 100644
--- a/frontends/web/src/style/base.css
+++ b/frontends/web/src/style/base.css
@@ -1,3 +1,7 @@
+html {
+    font-size: 62.5%; /* 1rem = 10px */
+}
+
 html,
 body {
     background-color: var(--background);
@@ -92,7 +96,7 @@ pre {
     background-color: var(--background-secondary);
     display: block;
     font-family: monospace;
-    font-size: 20px;
+    font-size: 2rem;
     margin: 0 0 var(--space-default) 0;
     padding: var(--space-default);
     text-align: center;
diff --git a/frontends/web/src/style/variables.css b/frontends/web/src/style/variables.css
index eb27a6f02d..328e40fb25 100644
--- a/frontends/web/src/style/variables.css
+++ b/frontends/web/src/style/variables.css
@@ -48,13 +48,13 @@
     --color-error-border: rgba(227, 6, 19, .33);
 
     /* font sizes */
-    --size-large: 32px;
-    --size-header: 24px;
-    --size-subheader: 18px;
-    --size-default: 14px;
-    --size-small: 12px;
-    --size-xsmall: 11px;
-    --size-title: 32px;
+    --size-large: 3.2rem;
+    --size-header: 2.4rem;
+    --size-subheader: 1.8rem;
+    --size-default: 1.4rem;
+    --size-small: 1.2rem;
+    --size-xsmall: 1.1rem;
+    --size-title: 3.2rem;
 
     /* spacing */
     --spacing-large: 32px;
@@ -192,15 +192,15 @@
 
 @media (max-width: 1199px) {
     :root {
-        --size-title: 18px;
+        --size-title: 1.8rem;
     }
 }
 
 @media (max-width: 768px) {
     :root {
-        --size-header: 20px;
-        --size-subheader: 16px;
-        --size-title: 16px;
-        --size-default: 16px;
+        --size-header: 2rem;
+        --size-subheader: 1.6rem;
+        --size-title: 1.6rem;
+        --size-default: 1.6rem;
     }
 }

From a32e6d1ab65726386a18cf48a6c6a3f41922cc00 Mon Sep 17 00:00:00 2001
From: thisconnect <this@shiftcrypto.ch>
Date: Thu, 16 Oct 2025 11:44:51 +0200
Subject: [PATCH 03/31] frontend: set default font-size

The last commits introduced the '62.5% Font Size Trick' which
almost worked perfectly, except for components that do not
set font-size at all and inherit from the base font-size of
the parent.

These components now render with small 10px font-size instead
of 16px.

Fixed by changing the app style (most outer parent class) to
1.6rem which equals to 16px, so all components that do not
define font-size inherit 16px.

Also removes the custom definitions in view component (for large
screen > 1200px)
---
 frontends/web/src/style/base.css | 8 ++++++++
 1 file changed, 8 insertions(+)

diff --git a/frontends/web/src/style/base.css b/frontends/web/src/style/base.css
index 70c263a118..e1a38d5d7b 100644
--- a/frontends/web/src/style/base.css
+++ b/frontends/web/src/style/base.css
@@ -2,6 +2,14 @@ html {
     font-size: 62.5%; /* 1rem = 10px */
 }
 
+body {
+    font-size: 1.6rem; /* 16px base for body, this will be overwritten on Android  */
+}
+
+.app {
+    font-size: var(--size-default); /* for components that do not define font-size */
+}
+
 html,
 body {
     background-color: var(--background);

From 1d73146d6a5b9525893297603c615b0e0ec8471d Mon Sep 17 00:00:00 2001
From: thisconnect <this@shiftcrypto.ch>
Date: Sun, 5 May 2024 20:08:52 +0200
Subject: [PATCH 04/31] frontend/android: capture textzoom and set custom base
 font size

Android textZoom only increases font-size without incresing
surrounding elements which can break the layout and cause
overlapping text and elements.

This commit reads the current textzoom, sets a custom CSS base
font size (calculated from textzoom) and resets textzoom to 100%.

The custom CSS is using 'The 62.5% Font Size Trick' with which
1rem equals 10px.

With this it is possible to change elment dimensions from px to
rem. These elements will become responsive and also grow if
Android settings for font size is increased.

To simulate this in webdev and optimize the layout for increased
fontsize a base font size of 125% has to be set.
---
 .../shiftcrypto/bitboxapp/MainActivity.java   | 31 +++++++++++++++++--
 1 file changed, 29 insertions(+), 2 deletions(-)

diff --git a/frontends/android/BitBoxApp/app/src/main/java/ch/shiftcrypto/bitboxapp/MainActivity.java b/frontends/android/BitBoxApp/app/src/main/java/ch/shiftcrypto/bitboxapp/MainActivity.java
index 118c532a36..ef52e4facf 100644
--- a/frontends/android/BitBoxApp/app/src/main/java/ch/shiftcrypto/bitboxapp/MainActivity.java
+++ b/frontends/android/BitBoxApp/app/src/main/java/ch/shiftcrypto/bitboxapp/MainActivity.java
@@ -118,6 +118,8 @@ public void setDarkTheme(boolean isDark) {
         }
     }
 
+    private int currentZoom;
+
     @SuppressLint("SetJavaScriptEnabled")
     @Override
     protected void onCreate(Bundle savedInstanceState) {
@@ -173,7 +175,33 @@ protected void onCreate(Bundle savedInstanceState) {
 
         // vw.setWebContentsDebuggingEnabled(true); // enable remote debugging in chrome://inspect/#devices
 
-        vw.setWebViewClient(new BitBoxWebViewClient(BASE_URL, getAssets(), getApplication()));
+        // Retrieve the current text zoom setting to adjust the base font size in the WebView.
+        currentZoom = vw.getSettings().getTextZoom();
+
+        vw.setWebViewClient(new BitBoxWebViewClient(BASE_URL, getAssets(), getApplication()) {
+            @Override
+            public void onPageFinished(WebView view, String url) {
+                super.onPageFinished(view, url);
+
+                // Calculate the base font size for html as a percentage.
+                // This percentage dynamically adjusts to ensure 1rem = 10px, scaled according to the current zoom level.
+                double baseFontSizePercentage = 62.5 * ((double) currentZoom / 100.0);
+
+                // The default body font size in rem, which is independent of the zoom level.
+                // This size does not scale dynamically with zoom adjustments and is fixed at 1.6rem.
+                double defaultFontSizeREM = 1.6;
+
+                // Reset the WebView's text zoom to 100% to ensure that the scaling is controlled via CSS
+                // and not by the WebView's default scaling behavior.
+                view.getSettings().setTextZoom(100);
+
+                String cssSetup = "document.documentElement.style.fontSize='" + baseFontSizePercentage + "%';" +
+                                "document.body.style.fontSize='" + defaultFontSizeREM + "rem';";
+
+                // Execute the CSS setup in the WebView.
+                view.evaluateJavascript(cssSetup, null);
+            }
+        });
 
         ActivityResultLauncher<String> fileChooser = registerForActivityResult(new ActivityResultContracts.GetContent(), uri -> webChrome.onFilePickerResult(uri));
         BitBoxWebChromeClient.CameraPermissionDelegate cameraPermissionDelegate = () -> ActivityCompat.requestPermissions(
@@ -253,7 +281,6 @@ public void noAuthConfigured() {
                 getWindow().clearFlags(WindowManager.LayoutParams.FLAG_SECURE);
             }
         }));
-
     }
 
     @Override

From 0fbf3c867eb67077b83382a0273ecd792b528e91 Mon Sep 17 00:00:00 2001
From: thisconnect <this@shiftcrypto.ch>
Date: Mon, 10 Nov 2025 14:07:44 +0100
Subject: [PATCH 05/31] frontend: rename css variable small to smaller

As there are many components that have a font-size between small
and default, we need to rename to smaller first. In a second step
size small can be reintroduced and used for all the components
mentioned before. This can be done in the next commit.
---
 frontends/web/src/components/badge/badge.module.css          | 2 +-
 frontends/web/src/components/balance/balance.module.css      | 2 +-
 .../web/src/components/headerssync/headerssync.module.css    | 2 +-
 frontends/web/src/components/language/language.module.css    | 2 +-
 frontends/web/src/components/layout/footer.module.css        | 2 +-
 .../src/components/settingsButton/settingsButton.module.css  | 4 ++--
 frontends/web/src/components/view/view.module.css            | 2 +-
 .../web/src/routes/account/add/components/steps.module.css   | 2 +-
 .../web/src/routes/account/components/insuredtag.module.css  | 2 +-
 frontends/web/src/routes/account/info/info.module.css        | 2 +-
 .../account/send/components/inputs/note-input.module.css     | 2 +-
 .../send/components/inputs/receiver-address-input.module.css | 4 ++--
 frontends/web/src/routes/account/send/feetargets.module.css  | 4 ++--
 .../src/routes/account/summary/accountssummary.module.css    | 2 +-
 frontends/web/src/routes/account/summary/chart.module.css    | 4 ++--
 .../walletconnect/components/header/header.module.css        | 2 +-
 frontends/web/src/routes/bitsurance/bitsurance.module.css    | 2 +-
 frontends/web/src/routes/bitsurance/dashboard.module.css     | 2 +-
 .../web/src/routes/device/components/backups.module.css      | 2 +-
 .../appearance/activecurrenciesdropdown.module.css           | 2 +-
 frontends/web/src/routes/settings/electrum.module.css        | 2 +-
 frontends/web/src/style/layout.css                           | 4 ++--
 frontends/web/src/style/variables.css                        | 5 +++--
 23 files changed, 30 insertions(+), 29 deletions(-)

diff --git a/frontends/web/src/components/badge/badge.module.css b/frontends/web/src/components/badge/badge.module.css
index 3cd75b9b75..cb0e7f7c33 100644
--- a/frontends/web/src/components/badge/badge.module.css
+++ b/frontends/web/src/components/badge/badge.module.css
@@ -2,7 +2,7 @@
   border-radius: var(--space-half);
   border: 1px solid;
   display: inline-block;
-  font-size: var(--size-small);
+  font-size: var(--size-smaller);
   flex-shrink: 0;
   line-height: 1;
   padding: var(--space-eight) 10px;
diff --git a/frontends/web/src/components/balance/balance.module.css b/frontends/web/src/components/balance/balance.module.css
index 2094f70785..1071d0f40f 100644
--- a/frontends/web/src/components/balance/balance.module.css
+++ b/frontends/web/src/components/balance/balance.module.css
@@ -27,7 +27,7 @@
 
 .pendingBalance {
   color: var(--color-secondary);
-  font-size: var(--size-small);
+  font-size: var(--size-smaller);
   line-height: 1;
   margin: 0;
   padding-top: var(--space-half);
diff --git a/frontends/web/src/components/headerssync/headerssync.module.css b/frontends/web/src/components/headerssync/headerssync.module.css
index e369ef811e..1ccfb261f0 100644
--- a/frontends/web/src/components/headerssync/headerssync.module.css
+++ b/frontends/web/src/components/headerssync/headerssync.module.css
@@ -22,7 +22,7 @@
     height: 16px;
     width: 100%;
     max-width: var(--content-width);
-    font-size: var(--size-small);
+    font-size: var(--size-smaller);
     color: var(--color-secondary);
     text-align: right;
     margin: 0 auto;
diff --git a/frontends/web/src/components/language/language.module.css b/frontends/web/src/components/language/language.module.css
index 30ab6217d6..8f63edd402 100644
--- a/frontends/web/src/components/language/language.module.css
+++ b/frontends/web/src/components/language/language.module.css
@@ -50,7 +50,7 @@
 
 @media (max-width: 768px) {
     .link {
-        font-size: var(--size-small);
+        font-size: var(--size-smaller);
     }
 
     .language {
diff --git a/frontends/web/src/components/layout/footer.module.css b/frontends/web/src/components/layout/footer.module.css
index 422254aa69..54929adc13 100644
--- a/frontends/web/src/components/layout/footer.module.css
+++ b/frontends/web/src/components/layout/footer.module.css
@@ -24,7 +24,7 @@
 
     .footer p {
         text-align: right;
-        font-size: var(--size-small);
+        font-size: var(--size-smaller);
     }
 
     .footer img {
diff --git a/frontends/web/src/components/settingsButton/settingsButton.module.css b/frontends/web/src/components/settingsButton/settingsButton.module.css
index 884fe3a5e2..9637ecbff8 100644
--- a/frontends/web/src/components/settingsButton/settingsButton.module.css
+++ b/frontends/web/src/components/settingsButton/settingsButton.module.css
@@ -35,7 +35,7 @@
 .optionalText {
     margin-left: auto;
     margin-right: var(--space-quarter);
-    font-size: var(--size-small);
+    font-size: var(--size-smaller);
     color: var(--color-secondary);
     white-space: nowrap;
     max-width: 300px;
@@ -45,7 +45,7 @@
 
 .secondaryText {
     color: var(--color-secondary);
-    font-size: var(--size-small);
+    font-size: var(--size-smaller);
     margin-top: 4px;
     overflow: hidden;
     text-overflow: ellipsis;
diff --git a/frontends/web/src/components/view/view.module.css b/frontends/web/src/components/view/view.module.css
index 4ed24a471e..2a9ca62955 100644
--- a/frontends/web/src/components/view/view.module.css
+++ b/frontends/web/src/components/view/view.module.css
@@ -346,7 +346,7 @@
 
     .footer p {
         text-align: right;
-        font-size: var(--size-small);
+        font-size: var(--size-smaller);
     }
 
     .footer img {
diff --git a/frontends/web/src/routes/account/add/components/steps.module.css b/frontends/web/src/routes/account/add/components/steps.module.css
index 35f5aa0542..720defc953 100644
--- a/frontends/web/src/routes/account/add/components/steps.module.css
+++ b/frontends/web/src/routes/account/add/components/steps.module.css
@@ -108,7 +108,7 @@
 }
 
 .content {
-    font-size: var(--size-small);
+    font-size: var(--size-smaller);
     line-height: 1;
     margin: 0;
     min-width: 90px;
diff --git a/frontends/web/src/routes/account/components/insuredtag.module.css b/frontends/web/src/routes/account/components/insuredtag.module.css
index 632d719294..8d5e5e4e1f 100644
--- a/frontends/web/src/routes/account/components/insuredtag.module.css
+++ b/frontends/web/src/routes/account/components/insuredtag.module.css
@@ -2,7 +2,7 @@
     padding: 4px 10px;
     border-radius: var(--space-half);
     border: 1px solid;
-    font-size: var(--size-small);
+    font-size: var(--size-smaller);
     line-height: 14px;
     background: var(--color-palegreen);
     border-color: var(--color-lightgreen);
diff --git a/frontends/web/src/routes/account/info/info.module.css b/frontends/web/src/routes/account/info/info.module.css
index c3771b8606..157e6eeacd 100644
--- a/frontends/web/src/routes/account/info/info.module.css
+++ b/frontends/web/src/routes/account/info/info.module.css
@@ -101,7 +101,7 @@
     }
 
     .addressField input {
-        font-size: var(--size-small);
+        font-size: var(--size-smaller);
     }
 
     .qrCode {
diff --git a/frontends/web/src/routes/account/send/components/inputs/note-input.module.css b/frontends/web/src/routes/account/send/components/inputs/note-input.module.css
index 6dedb2462d..590f64bd0f 100644
--- a/frontends/web/src/routes/account/send/components/inputs/note-input.module.css
+++ b/frontends/web/src/routes/account/send/components/inputs/note-input.module.css
@@ -1,6 +1,6 @@
 .labelDescription {
     color: var(--color-secondary);
-    font-size: var(--size-small);
+    font-size: var(--size-smaller);
     font-weight: 400;
     margin-top: 0;
 }
diff --git a/frontends/web/src/routes/account/send/components/inputs/receiver-address-input.module.css b/frontends/web/src/routes/account/send/components/inputs/receiver-address-input.module.css
index 70eb478501..10204143b5 100644
--- a/frontends/web/src/routes/account/send/components/inputs/receiver-address-input.module.css
+++ b/frontends/web/src/routes/account/send/components/inputs/receiver-address-input.module.css
@@ -7,8 +7,8 @@
 }
 
 .action {
-  color: var(--color-danger);
-  font-size: var(--size-small);
+  color: var(--color-blue);
+  font-size: var(--size-smaller);
   font-weight: 400;
   line-height: 1;
   cursor: pointer;
diff --git a/frontends/web/src/routes/account/send/feetargets.module.css b/frontends/web/src/routes/account/send/feetargets.module.css
index 5b42dfff47..cc187be905 100644
--- a/frontends/web/src/routes/account/send/feetargets.module.css
+++ b/frontends/web/src/routes/account/send/feetargets.module.css
@@ -82,7 +82,7 @@
     .row .fee input {
         border: none;
         color: var(--color-secondary) !important;
-        font-size: var(--size-small);
+        font-size: var(--size-smaller);
         font-weight: 400;
         height: auto;
         margin-top: 0;
@@ -98,7 +98,7 @@
 .feeProposed {
     color: var(--color-secondary);
     flex: 0 0 100%;
-    font-size: var(--size-small);
+    font-size: var(--size-smaller);
     font-weight: 400;
     margin-top: 0;
 }
diff --git a/frontends/web/src/routes/account/summary/accountssummary.module.css b/frontends/web/src/routes/account/summary/accountssummary.module.css
index 4a01d318d0..d2b23c9b27 100644
--- a/frontends/web/src/routes/account/summary/accountssummary.module.css
+++ b/frontends/web/src/routes/account/summary/accountssummary.module.css
@@ -33,7 +33,7 @@
 .openFileText {
     color: var(--color-primary);
     cursor: pointer;
-    font-size: var(--size-small);
+    font-size: var(--size-smaller);
 }
 
 .table {
diff --git a/frontends/web/src/routes/account/summary/chart.module.css b/frontends/web/src/routes/account/summary/chart.module.css
index e47f430c86..0290f6150a 100644
--- a/frontends/web/src/routes/account/summary/chart.module.css
+++ b/frontends/web/src/routes/account/summary/chart.module.css
@@ -110,7 +110,7 @@
   background: var(--background-secondary);
   border: 1px solid var(--background);
   border-radius: 3px;
-  font-size: var(--size-small);
+  font-size: var(--size-smaller);
   margin-top: -25px;
   min-width: 140px;
   padding: 12px 10px;
@@ -129,7 +129,7 @@
 
 .toolTipUnit {
   color: var(--color-secondary);
-  font-size: var(--size-small);
+  font-size: var(--size-smaller);
   padding: 0 2px;
 }
 
diff --git a/frontends/web/src/routes/account/walletconnect/components/header/header.module.css b/frontends/web/src/routes/account/walletconnect/components/header/header.module.css
index 1c741f2144..d103000949 100644
--- a/frontends/web/src/routes/account/walletconnect/components/header/header.module.css
+++ b/frontends/web/src/routes/account/walletconnect/components/header/header.module.css
@@ -42,7 +42,7 @@
         font-size: var(--size-subheader);
     }
     .headerContainer p {
-        font-size: var(--size-small);
+        font-size: var(--size-smaller);
     }
     .headerContainer img {
         width: 36px;
diff --git a/frontends/web/src/routes/bitsurance/bitsurance.module.css b/frontends/web/src/routes/bitsurance/bitsurance.module.css
index 3bd5d6420f..4cc1ae6fca 100644
--- a/frontends/web/src/routes/bitsurance/bitsurance.module.css
+++ b/frontends/web/src/routes/bitsurance/bitsurance.module.css
@@ -67,7 +67,7 @@ ul.clean {
   }
 
   .cardBody2 {
-    font-size: var(--size-small);
+    font-size: var(--size-smaller);
   }
 
   .clean li {
diff --git a/frontends/web/src/routes/bitsurance/dashboard.module.css b/frontends/web/src/routes/bitsurance/dashboard.module.css
index 5e234d913a..2a3229782c 100644
--- a/frontends/web/src/routes/bitsurance/dashboard.module.css
+++ b/frontends/web/src/routes/bitsurance/dashboard.module.css
@@ -66,7 +66,7 @@
 }
 
 .keystore > span {
-  font-size: var(--size-small);
+  font-size: var(--size-smaller);
 }
 
 @media (max-width: 768px) {
diff --git a/frontends/web/src/routes/device/components/backups.module.css b/frontends/web/src/routes/device/components/backups.module.css
index 26f4df2cf1..55249c2afd 100644
--- a/frontends/web/src/routes/device/components/backups.module.css
+++ b/frontends/web/src/routes/device/components/backups.module.css
@@ -53,7 +53,7 @@
 .backupID {
     word-break: break-all;
     margin-bottom: var(--space-quarter);
-    font-size: var(--size-small);
+    font-size: var(--size-smaller);
     color: var(--color-secondary);
 }
 
diff --git a/frontends/web/src/routes/settings/components/appearance/activecurrenciesdropdown.module.css b/frontends/web/src/routes/settings/components/appearance/activecurrenciesdropdown.module.css
index b8fb00189f..417a28d4f2 100644
--- a/frontends/web/src/routes/settings/components/appearance/activecurrenciesdropdown.module.css
+++ b/frontends/web/src/routes/settings/components/appearance/activecurrenciesdropdown.module.css
@@ -10,7 +10,7 @@
 }
 
 .defaultLabel {
-    font-size: var(--size-small);
+    font-size: var(--size-smaller);
     margin: 0;
     text-transform: capitalize;
 }
diff --git a/frontends/web/src/routes/settings/electrum.module.css b/frontends/web/src/routes/settings/electrum.module.css
index 6b5b82cf91..dd2831c710 100644
--- a/frontends/web/src/routes/settings/electrum.module.css
+++ b/frontends/web/src/routes/settings/electrum.module.css
@@ -41,7 +41,7 @@
 .servers li .server > div:last-child button {
     border: none;
     border-radius: 2px;
-    font-size: var(--size-small);
+    font-size: var(--size-smaller);
     padding: var(--space-quarter) var(--space-half);
     word-break: normal;
 }
diff --git a/frontends/web/src/style/layout.css b/frontends/web/src/style/layout.css
index 5d01ac1e95..f3ad7b6e3d 100644
--- a/frontends/web/src/style/layout.css
+++ b/frontends/web/src/style/layout.css
@@ -23,7 +23,7 @@
 
 .text-center { text-align: center; }
 .text-right { text-align: right; }
-.text-small { font-size: var(--size-small); }
+.text-small { font-size: var(--size-smaller); }
 .text-medium { font-size: var(--size-default); }
 .text-medium > label {
     font-size: var(--size-default);
@@ -185,7 +185,7 @@ button, textarea {
 
 @media (max-width: 768px) {
     .tabs .tab a {
-        font-size: var(--size-small);
+        font-size: var(--size-smaller);
     }
 }
 
diff --git a/frontends/web/src/style/variables.css b/frontends/web/src/style/variables.css
index 328e40fb25..6e6e9f4ffc 100644
--- a/frontends/web/src/style/variables.css
+++ b/frontends/web/src/style/variables.css
@@ -51,8 +51,9 @@
     --size-large: 3.2rem;
     --size-header: 2.4rem;
     --size-subheader: 1.8rem;
-    --size-default: 1.4rem;
-    --size-small: 1.2rem;
+    --size-default: 1.6rem; /* was 14px now 16px*/
+    /* TODO: --size-newsmall: min(1.4rem, 24px) */
+    --size-smaller: 1.2rem;
     --size-xsmall: 1.1rem;
     --size-title: 3.2rem;
 

From eae32bc3ea23e1e59a1dfb00ad4aca2f064ff342 Mon Sep 17 00:00:00 2001
From: thisconnect <this@shiftcrypto.ch>
Date: Mon, 10 Nov 2025 14:19:30 +0100
Subject: [PATCH 06/31] frontend: redefine size-small css variable

Use CSS variable --size-small for formerly hardcoded font-size that
was between --size-default and --size-small (now --size-smaller).
---
 .../src/components/amount/conversion-amount.module.css    | 2 +-
 .../bitbox02bootloader/bitbox02bootloader.module.css      | 5 ++---
 .../web/src/components/headerssync/headerssync.module.css | 2 +-
 frontends/web/src/components/spinner/ascii.module.css     | 6 +++---
 .../src/components/transactions/transaction.module.css    | 8 ++++----
 frontends/web/src/routes/account/account.module.css       | 2 +-
 .../src/routes/account/add/components/steps.module.css    | 2 +-
 .../src/routes/account/info/buy-receive-cta.module.css    | 2 +-
 frontends/web/src/routes/accounts/all-accounts.module.css | 2 +-
 frontends/web/src/routes/bitsurance/bitsurance.module.css | 2 +-
 .../manage-accounts/watchonlySettings.module.css          | 2 +-
 .../components/settingsItem/settingsItem.module.css       | 4 ++--
 frontends/web/src/style/variables.css                     | 2 +-
 13 files changed, 20 insertions(+), 21 deletions(-)

diff --git a/frontends/web/src/components/amount/conversion-amount.module.css b/frontends/web/src/components/amount/conversion-amount.module.css
index 15149a06ad..56a03653f4 100644
--- a/frontends/web/src/components/amount/conversion-amount.module.css
+++ b/frontends/web/src/components/amount/conversion-amount.module.css
@@ -14,7 +14,7 @@
 .txPrefix,
 .txUnit {
   color: var(--color-secondary);
-  font-size: 1.4rem;
+  font-size: var(--size-small);
   line-height: 1.285714;
   white-space: nowrap;
 }
diff --git a/frontends/web/src/components/devices/bitbox02bootloader/bitbox02bootloader.module.css b/frontends/web/src/components/devices/bitbox02bootloader/bitbox02bootloader.module.css
index 08ecb6b6c7..121992a62a 100644
--- a/frontends/web/src/components/devices/bitbox02bootloader/bitbox02bootloader.module.css
+++ b/frontends/web/src/components/devices/bitbox02bootloader/bitbox02bootloader.module.css
@@ -21,9 +21,8 @@
 
 @media (max-width: 768px) {
     .content,
-    .additionalUpgrade
-    {
-        font-size: 1.4rem;
+    .additionalUpgrade {
+        font-size: var(--size-small);
     }
 }
 
diff --git a/frontends/web/src/components/headerssync/headerssync.module.css b/frontends/web/src/components/headerssync/headerssync.module.css
index 1ccfb261f0..1bd4dcca90 100644
--- a/frontends/web/src/components/headerssync/headerssync.module.css
+++ b/frontends/web/src/components/headerssync/headerssync.module.css
@@ -51,7 +51,7 @@
     animation: changeContent .8s linear infinite;
     display: block;
     content: "⠋";
-    font-size: 1.4rem;
+    font-size: var(--size-small);
     margin-left: 3px;
 }
 
diff --git a/frontends/web/src/components/spinner/ascii.module.css b/frontends/web/src/components/spinner/ascii.module.css
index f3fb26d7d1..849a24bf7b 100644
--- a/frontends/web/src/components/spinner/ascii.module.css
+++ b/frontends/web/src/components/spinner/ascii.module.css
@@ -8,13 +8,13 @@
 }
 
 .spinner:after {
-  position: relative;
-  top: 2px;
   animation: changeContent .8s linear infinite;
   display: block;
   content: "⠋";
-  font-size: 1.4rem;
+  font-size: var(--size-small);
   margin-left: 3px;
+  position: relative;
+  top: 2px;
 }
 
 @keyframes changeContent {
diff --git a/frontends/web/src/components/transactions/transaction.module.css b/frontends/web/src/components/transactions/transaction.module.css
index 5ecddd7204..b6d8cff977 100644
--- a/frontends/web/src/components/transactions/transaction.module.css
+++ b/frontends/web/src/components/transactions/transaction.module.css
@@ -59,7 +59,7 @@
   flex-direction: column;
   flex-grow: 1;
   flex-shrink: 0;
-  font-size: 1.4rem;
+  font-size: var(--size-small);
   line-height: 1.285714;
   padding: 0 var(--space-quarter) 0 48px;
   text-align: right;
@@ -105,7 +105,7 @@
 
 .txUnit {
   color: var(--color-secondary);
-  font-size: 1.4rem;
+  font-size: var(--size-small);
   line-height: 1.285714;
 }
 
@@ -130,7 +130,7 @@
   align-items: center;
   color: var(--color-secondary);
   display: flex;
-  font-size: 1.4rem;
+  font-size: var(--size-small);
   line-height: 1.285714;
   padding-bottom: 6px;
 }
@@ -174,7 +174,7 @@
 }
 .addresses {
   color: var(--color-secondary);
-  font-size: 1.4rem;
+  font-size: var(--size-small);
   font-weight: normal;
   line-height: 1.285714;
 }
diff --git a/frontends/web/src/routes/account/account.module.css b/frontends/web/src/routes/account/account.module.css
index 6727d14a44..277854d44b 100644
--- a/frontends/web/src/routes/account/account.module.css
+++ b/frontends/web/src/routes/account/account.module.css
@@ -205,7 +205,7 @@
     }
 
     .searchButton {
-        font-size: 1.4rem;
+        font-size: var(--size-small);
         height: var(--item-height-small);
         text-align: left;
     }
diff --git a/frontends/web/src/routes/account/add/components/steps.module.css b/frontends/web/src/routes/account/add/components/steps.module.css
index 720defc953..0480c56c43 100644
--- a/frontends/web/src/routes/account/add/components/steps.module.css
+++ b/frontends/web/src/routes/account/add/components/steps.module.css
@@ -48,7 +48,7 @@
     content: "";
     display: inline-block;
     flex-shrink: 0;
-    font-size: 1.4rem;
+    font-size: var(--size-small);
     height: var(--icon-size);
     line-height: var(--icon-size);
     position: relative;
diff --git a/frontends/web/src/routes/account/info/buy-receive-cta.module.css b/frontends/web/src/routes/account/info/buy-receive-cta.module.css
index 83188704c2..a3b2ff24e9 100644
--- a/frontends/web/src/routes/account/info/buy-receive-cta.module.css
+++ b/frontends/web/src/routes/account/info/buy-receive-cta.module.css
@@ -16,6 +16,6 @@
 @media (max-width: 425px) {
     .buttons button {
         padding: var(--space-quarter);
-        font-size: 1.4rem;
+        font-size: var(--size-small);
     }
 }
diff --git a/frontends/web/src/routes/accounts/all-accounts.module.css b/frontends/web/src/routes/accounts/all-accounts.module.css
index e11d73a905..4eaa17d6a9 100644
--- a/frontends/web/src/routes/accounts/all-accounts.module.css
+++ b/frontends/web/src/routes/accounts/all-accounts.module.css
@@ -1,7 +1,7 @@
 .container {
   display: flex;
   flex-direction: column;
-  font-size: 1.4rem;
+  font-size: var(--size-small);
   gap: var(--space-half);
   width: 100%;
 }
diff --git a/frontends/web/src/routes/bitsurance/bitsurance.module.css b/frontends/web/src/routes/bitsurance/bitsurance.module.css
index 4cc1ae6fca..91d65c1eae 100644
--- a/frontends/web/src/routes/bitsurance/bitsurance.module.css
+++ b/frontends/web/src/routes/bitsurance/bitsurance.module.css
@@ -4,7 +4,7 @@
 }
 
 .cardBody2 {
-  font-size: 1.4rem;
+  font-size: var(--size-small);
   margin-bottom: var(--space-default);
 }
 
diff --git a/frontends/web/src/routes/settings/components/manage-accounts/watchonlySettings.module.css b/frontends/web/src/routes/settings/components/manage-accounts/watchonlySettings.module.css
index c476d0075d..31b137f6ce 100644
--- a/frontends/web/src/routes/settings/components/manage-accounts/watchonlySettings.module.css
+++ b/frontends/web/src/routes/settings/components/manage-accounts/watchonlySettings.module.css
@@ -11,7 +11,7 @@
 
 .labelText {
   display: inline-block;
-  font-size: 1.4rem;
+  font-size: var(--size-small);
   line-height: 1;
   margin-top: 2px;
 }
diff --git a/frontends/web/src/routes/settings/components/settingsItem/settingsItem.module.css b/frontends/web/src/routes/settings/components/settingsItem/settingsItem.module.css
index 356f3934ad..4c9265aad6 100644
--- a/frontends/web/src/routes/settings/components/settingsItem/settingsItem.module.css
+++ b/frontends/web/src/routes/settings/components/settingsItem/settingsItem.module.css
@@ -58,7 +58,7 @@
 
 .displayedValue {
     color: var(--color-secondary);
-    font-size: 1.4rem;
+    font-size: var(--size-small);
     margin: 0;
     padding-left: var(--space-half);
     padding-right: 0;
@@ -77,7 +77,7 @@ button .displayedValue {
 
 .secondaryText {
     color: var(--color-secondary);
-    font-size: 1.4rem;
+    font-size: var(--size-small);
     margin: 0;
     margin-top: var(--space-quarter);
 }
diff --git a/frontends/web/src/style/variables.css b/frontends/web/src/style/variables.css
index 6e6e9f4ffc..022eedf94b 100644
--- a/frontends/web/src/style/variables.css
+++ b/frontends/web/src/style/variables.css
@@ -52,7 +52,7 @@
     --size-header: 2.4rem;
     --size-subheader: 1.8rem;
     --size-default: 1.6rem; /* was 14px now 16px*/
-    /* TODO: --size-newsmall: min(1.4rem, 24px) */
+    --size-small: 1.4rem;
     --size-smaller: 1.2rem;
     --size-xsmall: 1.1rem;
     --size-title: 3.2rem;

From b2ac5256709f657884d9204fdd1b120b4ca493b3 Mon Sep 17 00:00:00 2001
From: thisconnect <this@shiftcrypto.ch>
Date: Thu, 23 Oct 2025 15:33:21 +0200
Subject: [PATCH 07/31] frontend: limit maximum font-size

Use font-sizes with defined maximum values so that the layout does
not break if 'Font size' is increased in Android setting.
---
 frontends/web/src/style/variables.css | 33 +++++++++++++++------------
 1 file changed, 18 insertions(+), 15 deletions(-)

diff --git a/frontends/web/src/style/variables.css b/frontends/web/src/style/variables.css
index 022eedf94b..55398fb651 100644
--- a/frontends/web/src/style/variables.css
+++ b/frontends/web/src/style/variables.css
@@ -47,16 +47,6 @@
     --color-error-background: rgba(227, 6, 19, .2);
     --color-error-border: rgba(227, 6, 19, .33);
 
-    /* font sizes */
-    --size-large: 3.2rem;
-    --size-header: 2.4rem;
-    --size-subheader: 1.8rem;
-    --size-default: 1.6rem; /* was 14px now 16px*/
-    --size-small: 1.4rem;
-    --size-smaller: 1.2rem;
-    --size-xsmall: 1.1rem;
-    --size-title: 3.2rem;
-
     /* spacing */
     --spacing-large: 32px;
     --spacing-default: 16px;
@@ -191,17 +181,30 @@
     }
 }
 
+/* font sizes */
+
+:root {
+    --size-large: min(3.2rem, 44px);
+    --size-header: min(2.4rem, 36px);
+    --size-subheader: min(1.8rem, 32px);
+    --size-default: min(1.6rem, 28px); /* was 14px now 16px*/
+    --size-small: min(1.4rem, 24px);
+    --size-smaller:  min(1.2rem, 20px);
+    --size-xsmall: min(1.1rem, 18px);
+    --size-title: min(3.2rem, 36px);
+}
+
 @media (max-width: 1199px) {
     :root {
-        --size-title: 1.8rem;
+        --size-title: min(1.8rem, 36px);
     }
 }
 
 @media (max-width: 768px) {
     :root {
-        --size-header: 2rem;
-        --size-subheader: 1.6rem;
-        --size-title: 1.6rem;
-        --size-default: 1.6rem;
+        --size-header: min(2rem, 36px);
+        /* TODO: --size-subheader: min(1.6rem, 30px); */
+        --size-title: min(1.6rem, 36px);
+        --size-default: min(1.6rem, 28px);
     }
 }

From b586565086e7db9627d8f56fc1f6933e9ead8b33 Mon Sep 17 00:00:00 2001
From: thisconnect <this@shiftcrypto.ch>
Date: Fri, 17 Oct 2025 10:36:14 +0200
Subject: [PATCH 08/31] frontend: limit bottom-menu size expansion in reponsive
 mode

Bottom-menu should not grow beyond certain size in responsive mode
for example if Android Font size is set to max.

This can be simulated by changing the font-size on the root HTML
element to 150%.
---
 .../components/bottom-navigation/bottom-navigation.module.css   | 2 +-
 frontends/web/src/style/variables.css                           | 2 +-
 2 files changed, 2 insertions(+), 2 deletions(-)

diff --git a/frontends/web/src/components/bottom-navigation/bottom-navigation.module.css b/frontends/web/src/components/bottom-navigation/bottom-navigation.module.css
index cb0a90f78e..2a584d3d51 100644
--- a/frontends/web/src/components/bottom-navigation/bottom-navigation.module.css
+++ b/frontends/web/src/components/bottom-navigation/bottom-navigation.module.css
@@ -18,7 +18,7 @@
     align-items: center;
     color: var(--color-text);
     display: flex;
-    font-size: 1.2rem;
+    font-size: min(1.2rem, 20px);
     flex-direction: column;
     gap: 4px;
     justify-content: center;
diff --git a/frontends/web/src/style/variables.css b/frontends/web/src/style/variables.css
index 55398fb651..2dc06c7a24 100644
--- a/frontends/web/src/style/variables.css
+++ b/frontends/web/src/style/variables.css
@@ -86,7 +86,7 @@
     --guide-width: 350px;
 
     /* bottom navigation */
-    --bottom-navigation-height: calc(70px + env(safe-area-inset-bottom, 0));
+    --bottom-navigation-height: calc(min(7rem, 90px) + env(safe-area-inset-bottom, 0));
 }
 
 :root,

From f1352c2cc312764440304f0a85cbda6a20d9ab46 Mon Sep 17 00:00:00 2001
From: thisconnect <this@shiftcrypto.ch>
Date: Fri, 17 Oct 2025 10:54:25 +0200
Subject: [PATCH 09/31] frontend: limit toggle layout in scaled up version

Toggles in responsive mode looked broken if Android Font size is
increased.

This can be simulated by changing the font-size on the root HTML
element to 150%.
---
 frontends/web/src/components/toggle/toggle.module.css | 11 +++++++----
 1 file changed, 7 insertions(+), 4 deletions(-)

diff --git a/frontends/web/src/components/toggle/toggle.module.css b/frontends/web/src/components/toggle/toggle.module.css
index 5b31763c36..5cdb65379a 100644
--- a/frontends/web/src/components/toggle/toggle.module.css
+++ b/frontends/web/src/components/toggle/toggle.module.css
@@ -3,14 +3,17 @@
   flex-shrink: 0;
   margin: 0;
   min-height: var(--item-height-xsmall);
+  height: min(2.4rem, 28px);
   position: relative;
   width: 60px;
 }
 
 .container input {
-  height: 0;
-  opacity: 0;
-  width: 0;
+  clip: rect(0, 0, 0, 0);
+  height: 1px;
+  overflow: hidden;
+  position: absolute;
+  width: 1px;
 }
 
 .container input[disabled] + .slider {
@@ -35,7 +38,7 @@
   border-radius: 2px;
   bottom: 4px;
   content: "";
-  height: 16px;
+  height: min(1.6rem, 20px);
   left: 4px;
   position: absolute;
   width: 26px;

From a6f5b8fb3a55cb95464904cf1077ff8408acec13 Mon Sep 17 00:00:00 2001
From: thisconnect <this@shiftcrypto.ch>
Date: Fri, 17 Oct 2025 11:21:14 +0200
Subject: [PATCH 10/31] frontend: improve responsive styling of buttons

- changed button border-width to be reponsive and scale with the ui
- fixed send/recieve button, should scale
- fixed responsive button height
---
 frontends/web/src/components/forms/button.module.css | 5 ++---
 frontends/web/src/routes/account/account.module.css  | 8 ++------
 frontends/web/src/style/variables.css                | 4 ++++
 3 files changed, 8 insertions(+), 9 deletions(-)

diff --git a/frontends/web/src/components/forms/button.module.css b/frontends/web/src/components/forms/button.module.css
index d467cbdc51..df4c969a02 100644
--- a/frontends/web/src/components/forms/button.module.css
+++ b/frontends/web/src/components/forms/button.module.css
@@ -4,7 +4,7 @@
     border-color: transparent;
     border-radius: 2px;
     border-style: solid;
-    border-width: 1px;
+    border-width: var(--border-width);
     cursor: default;
     display: inline-flex;
     flex-direction: row;
@@ -12,8 +12,8 @@
     font-size: var(--size-default);
     font-weight: 400;
     justify-content: center;
+    min-height: var(--button-height);
     min-width: 100px;
-    height: 50px;
     outline: none;
     padding: 0 var(--space-default);
     position: relative;
@@ -87,7 +87,6 @@
     border-color: transparent;
     color: var(--color-blue);
     display: inline-block;
-    height: 50px;
     min-width: 0;
 }
 
diff --git a/frontends/web/src/routes/account/account.module.css b/frontends/web/src/routes/account/account.module.css
index 277854d44b..072f5e509f 100644
--- a/frontends/web/src/routes/account/account.module.css
+++ b/frontends/web/src/routes/account/account.module.css
@@ -35,17 +35,13 @@
     width: 17px;
 }
 
-.button {
-    height: 37px;
-}
-
 @media (max-width: 768px) {
     .accountHeader {
         padding: 0 var(--space-half);
     }
 
     .button {
-        height: 50px;
+        min-height: var(--button-height);
     }
 }
 
@@ -58,7 +54,7 @@
 }
 
 .actionsContainer {
-    --size-default: 14px;
+    --size-default: 1.4rem;
     display: flex;
     flex-grow: 1;
     flex-shrink: 0;
diff --git a/frontends/web/src/style/variables.css b/frontends/web/src/style/variables.css
index 2dc06c7a24..d3510e6a9c 100644
--- a/frontends/web/src/style/variables.css
+++ b/frontends/web/src/style/variables.css
@@ -87,6 +87,10 @@
 
     /* bottom navigation */
     --bottom-navigation-height: calc(min(7rem, 90px) + env(safe-area-inset-bottom, 0));
+
+    /* form elements */
+    --border-width: 0.1rem;
+    --button-height: min(5rem, 70px);
 }
 
 :root,

From a3cf2ad38bed15e35d319924e69c3d9c16506129 Mon Sep 17 00:00:00 2001
From: thisconnect <this@shiftcrypto.ch>
Date: Fri, 17 Oct 2025 11:41:02 +0200
Subject: [PATCH 11/31] frontend: improve form elements in responsive mode

Improved various form elements so they look ok in scaled up mode.

Can be tested by setting font-size: 150%; on the html element.
---
 .../components/dropdown/dropdown.module.css   |  4 +++-
 .../src/components/forms/checkbox.module.css  | 14 +++++------
 .../web/src/components/forms/input.module.css |  4 ++--
 .../web/src/components/forms/radio.module.css | 23 +++++++++----------
 .../inputs/receiver-address-input.module.css  | 18 +++++++--------
 .../routes/account/send/feetargets.module.css | 14 +++++++----
 frontends/web/src/style/variables.css         |  1 +
 7 files changed, 42 insertions(+), 36 deletions(-)

diff --git a/frontends/web/src/components/dropdown/dropdown.module.css b/frontends/web/src/components/dropdown/dropdown.module.css
index e194365f34..a4339834e3 100644
--- a/frontends/web/src/components/dropdown/dropdown.module.css
+++ b/frontends/web/src/components/dropdown/dropdown.module.css
@@ -56,7 +56,9 @@
 
 .select :global(.react-select__control) {
     background-color: var(--background-secondary);
-    border-radius: 2px;
+    border-radius: 0.2rem;
+    border-width: var(--border-width);
+    min-height: var(--input-height);
     padding: var(--space-quarter) var(--space-eight);
 }
 
diff --git a/frontends/web/src/components/forms/checkbox.module.css b/frontends/web/src/components/forms/checkbox.module.css
index 6e824b72de..c891489aca 100644
--- a/frontends/web/src/components/forms/checkbox.module.css
+++ b/frontends/web/src/components/forms/checkbox.module.css
@@ -7,7 +7,7 @@
 .checkbox input + label {
     display: inline-block;
     max-width: 100%;
-    padding-left: 2em;
+    padding-left: 2rem;
     position: relative;
 }
 
@@ -27,7 +27,7 @@
 }
 
 .checkbox input + label::before {
-    border: 1px solid var(--background-tertiary);
+    border: var(--border-width) solid var(--background-tertiary);
     border-radius: 2px;
     top: 2px;
 }
@@ -37,22 +37,22 @@
 }
 .warning input + label::before {
     border-color: var(--background-secondary);
-    outline: 1px solid var(--color-warning);
+    outline: var(--border-width) solid var(--color-warning);
 }
 .info input + label::before {
     border-color: var(--background-secondary);
-    outline: 1px solid var(--color-info);
+    outline: var(--border-width) solid var(--color-info);
 }
 
 .checkbox input + label::after {
     background: transparent;
     border: solid var(--background-secondary);
-    border-width: 0px 2px 2px 0;
+    border-width: 0 2px 2px 0;
     width: 0.35em;
     height: 0.55em;
     position: absolute;
-    top: 6px;
-    left: 6px;
+    top: min(0.6rem, 9px);
+    left: min(0.6rem, 10px);
     margin-left: -1px;
     margin-top: -2px;
     opacity: 0;
diff --git a/frontends/web/src/components/forms/input.module.css b/frontends/web/src/components/forms/input.module.css
index 4c37a232c0..9ea5d7e584 100644
--- a/frontends/web/src/components/forms/input.module.css
+++ b/frontends/web/src/components/forms/input.module.css
@@ -28,11 +28,11 @@
     border-color: var(--background-quaternary);
     border-radius: 2px;
     border-style: solid;
-    border-width: 1px;
+    border-width: var(--border-width);
     font-family: var(--font-family);
     font-size: var(--size-default);
     font-weight: 400;
-    height: 52px;
+    height: var(--input-height);
     padding: 0 var(--space-half);
     width: 100%;
     transition: border-color .2s ease-out;
diff --git a/frontends/web/src/components/forms/radio.module.css b/frontends/web/src/components/forms/radio.module.css
index 6784c77126..ef6527b310 100644
--- a/frontends/web/src/components/forms/radio.module.css
+++ b/frontends/web/src/components/forms/radio.module.css
@@ -1,5 +1,4 @@
 .radio {
-    --size-default: 1.4rem;
     line-height: 1.5;
 }
 
@@ -13,7 +12,7 @@
     flex-direction: column;
     font-size: var(--size-default);
     margin-right: var(--space-half);
-    padding-left: calc(var(--space-half) + var(--space-quarter));
+    padding-left: calc(var(--size-default) + var(--space-quarter));
     position: relative;
 }
 
@@ -22,29 +21,29 @@
     background: var(--background-secondary);
     content: '';
     display: inline-block;
-    width: 12px;
-    height: 12px;
-    position: absolute;
-    top: 4px;
+    height: var(--size-smaller);
     left: 0;
+    position: absolute;
+    top: .4rem;
     transition: all 100ms ease;
+    width: var(--size-smaller);
 }
 
 .radio input + label::before {
-    border: 1px solid var(--background-tertiary);
+    border: var(--border-width) solid var(--background-tertiary);
     border-radius: 1em;
 }
 
 .radio input + label::after {
     background: var(--color-blue);
     border-radius: 1em;
-    width: 10px;
-    height: 10px;
-    position: absolute;
-    top: 6px;
-    left: 2px;
+    height: min(1rem, 14px);
+    left: .2rem;
     opacity: 0;
+    position: absolute;
+    top: .6rem;
     transform: scale(0);
+    width: min(1rem, 14px);
 }
 
 /* checked */
diff --git a/frontends/web/src/routes/account/send/components/inputs/receiver-address-input.module.css b/frontends/web/src/routes/account/send/components/inputs/receiver-address-input.module.css
index 10204143b5..ed48c5ca7d 100644
--- a/frontends/web/src/routes/account/send/components/inputs/receiver-address-input.module.css
+++ b/frontends/web/src/routes/account/send/components/inputs/receiver-address-input.module.css
@@ -22,22 +22,22 @@
 
 .qrButton {
   align-items: center;
-  display: flex;
+  background-color: transparent;
+  bottom: 0;
   border: none;
-  background-color: var(--background-secondary);
-  height: 36px;
-  width: 36px;
+  cursor: pointer;
+  display: flex;
+  height: var(--input-height);
   justify-content: center;
   padding: 0;
   position: absolute;
-  top: calc(50% - var(--space-quarter));
-  right: calc(var(--spacing-default) - var(--space-quarter));
-  cursor: pointer;
+  right: 0.75rem;
+  width: 36px;
 }
 
 .qrButton img {
-  width: 18px;
-  height: 18px;
+  width: 1.8rem;
+  height: 1.8rem;
 }
 
 .withDropdown {
diff --git a/frontends/web/src/routes/account/send/feetargets.module.css b/frontends/web/src/routes/account/send/feetargets.module.css
index cc187be905..cf34f66858 100644
--- a/frontends/web/src/routes/account/send/feetargets.module.css
+++ b/frontends/web/src/routes/account/send/feetargets.module.css
@@ -58,11 +58,13 @@
 /* styles to overwrite default dropdown styling to make it fit into send */
 .priority :global(.react-select__control) {
     border-color: var(--background-quaternary);
-    height: 52px;
+    border-radius: 2px;
+    border-width: var(--border-width);
+    margin-bottom: var(--space-quarter);
+    min-height: var(--input-height);
     padding-bottom: 0;
     padding-top: 0;
     z-index: 1;
-    margin-bottom: var(--space-quarter);
 }
 
 @media (min-width: 640px) {
@@ -113,13 +115,15 @@
 
 .rowCustomFee .priority :global(.react-select__control:not(:hover)) {
     border-right-color: var(--background-secondary);
+    border-width: var(--border-width);
 }
 
 .customFeeUnit {
-    bottom: 0;
+    bottom: var(--space-quarter);
     color: var(--color-secondary);
-    font-size: var(--size-default);
-    line-height: 50px;
+    font-size: min(var(--size-default), 20px);
+    line-height: 1;
+    height: calc(var(--input-height) * 0.5);
     padding-right: var(--space-half);
     position: absolute;
     right: 0;
diff --git a/frontends/web/src/style/variables.css b/frontends/web/src/style/variables.css
index d3510e6a9c..d75032e6f6 100644
--- a/frontends/web/src/style/variables.css
+++ b/frontends/web/src/style/variables.css
@@ -91,6 +91,7 @@
     /* form elements */
     --border-width: 0.1rem;
     --button-height: min(5rem, 70px);
+    --input-height: min(5.2rem, 72px);
 }
 
 :root,

From 43945fda663adf72173f07b0c3ffb596b1bd5596 Mon Sep 17 00:00:00 2001
From: thisconnect <this@shiftcrypto.ch>
Date: Fri, 17 Oct 2025 12:24:10 +0200
Subject: [PATCH 12/31] frontend: fix settings-item height in scaled up mode

Fixed a bug caused by empy paragraph element, which increased
settings item height unnecessarily.
---
 .../components/settingsItem/settingsItem.tsx     | 16 +++++++++-------
 1 file changed, 9 insertions(+), 7 deletions(-)

diff --git a/frontends/web/src/routes/settings/components/settingsItem/settingsItem.tsx b/frontends/web/src/routes/settings/components/settingsItem/settingsItem.tsx
index 72a22b4837..0affa3aeed 100644
--- a/frontends/web/src/routes/settings/components/settingsItem/settingsItem.tsx
+++ b/frontends/web/src/routes/settings/components/settingsItem/settingsItem.tsx
@@ -54,13 +54,15 @@ export const SettingsItem = ({
       ${styles.rightContentContainer || ''}
       ${!notButton && styles.extraPadding || ''}
     `}>
-      <p className={`
-        ${displayedValue && styles.displayedValue || ''}
-        ${extraComponent && styles.withMargin || ''}
-        ${hideDisplayedValueOnSmall && styles.hideDisplayedValueOnSmall || ''}
-      `}>
-        {displayedValue}
-      </p>
+      {displayedValue && (
+        <p className={`
+          ${displayedValue && styles.displayedValue || ''}
+          ${extraComponent && styles.withMargin || ''}
+          ${hideDisplayedValueOnSmall && styles.hideDisplayedValueOnSmall || ''}
+        `}>
+          {displayedValue}
+        </p>
+      )}
       {canUpgrade && <RedDot width={8} height={8} />}
       {extraComponent ? extraComponent : null}
     </div>

From 8a7506920af1f7921429271b8ad31413636b2146 Mon Sep 17 00:00:00 2001
From: thisconnect <this@shiftcrypto.ch>
Date: Fri, 17 Oct 2025 13:44:30 +0200
Subject: [PATCH 13/31] frontend: improve account-summary in scaled up mode

---
 .../amount/amount-with-unit.module.css        |  1 -
 .../web/src/components/badge/badge.module.css |  2 +-
 .../hideamountsbutton.module.css              |  4 +--
 .../keystore/connected-keystore.tsx           |  2 +-
 .../src/components/layout/header.module.css   |  4 +--
 .../pillbuttongroup.module.css                | 25 ++++++-------------
 .../src/components/status/status.module.css   |  9 +++----
 .../summary/accountssummary.module.css        | 12 ++-------
 .../routes/account/summary/chart.module.css   |  6 ++---
 .../summary/percentage-diff.module.css        | 12 ++++++---
 10 files changed, 31 insertions(+), 46 deletions(-)

diff --git a/frontends/web/src/components/amount/amount-with-unit.module.css b/frontends/web/src/components/amount/amount-with-unit.module.css
index 754d8d60ff..35f1428f14 100644
--- a/frontends/web/src/components/amount/amount-with-unit.module.css
+++ b/frontends/web/src/components/amount/amount-with-unit.module.css
@@ -1,6 +1,5 @@
 .rates {
   cursor: default;
-  line-height: 1;
   margin: 0;
   max-width: 100%;
   white-space: nowrap;
diff --git a/frontends/web/src/components/badge/badge.module.css b/frontends/web/src/components/badge/badge.module.css
index cb0e7f7c33..cfa4022436 100644
--- a/frontends/web/src/components/badge/badge.module.css
+++ b/frontends/web/src/components/badge/badge.module.css
@@ -19,7 +19,7 @@
 }
 
 .badgeIcon {
-  max-width: 10px;
+  max-width: 1rem;
 }
 
 .withChildren .badgeIcon {
diff --git a/frontends/web/src/components/hideamountsbutton/hideamountsbutton.module.css b/frontends/web/src/components/hideamountsbutton/hideamountsbutton.module.css
index 14268ba5f4..f530ae5ab0 100644
--- a/frontends/web/src/components/hideamountsbutton/hideamountsbutton.module.css
+++ b/frontends/web/src/components/hideamountsbutton/hideamountsbutton.module.css
@@ -6,8 +6,8 @@
 }
 
 .button img {
-    width: 18px;
-    height: 18px;
+    max-height: var(--size-default);
+    width: var(--size-default);
 }
 
 .buttonText {
diff --git a/frontends/web/src/components/keystore/connected-keystore.tsx b/frontends/web/src/components/keystore/connected-keystore.tsx
index 6bd8405492..6e2c274338 100644
--- a/frontends/web/src/components/keystore/connected-keystore.tsx
+++ b/frontends/web/src/components/keystore/connected-keystore.tsx
@@ -53,7 +53,7 @@ export const ConnectedKeystore = ({
         <>
           {' '}
           <Badge
-            icon={props => <USBSuccess {...props} />}
+            icon={props => <USBSuccess style={{ width: '0.9rem', height: '0.9rem' }} {...props} />}
             title={t('device.keystoreConnected')}
             type="success">
             {connectedIconOnly ? undefined : t('device.keystoreConnected')}
diff --git a/frontends/web/src/components/layout/header.module.css b/frontends/web/src/components/layout/header.module.css
index 02468bb69e..bb2f2221a5 100644
--- a/frontends/web/src/components/layout/header.module.css
+++ b/frontends/web/src/components/layout/header.module.css
@@ -28,9 +28,9 @@
 }
 
 .guideClose img {
-    width: 18px;
-    height: 18px;
     color: var(--color-blue);
+    max-height: var(--size-default);
+    width: var(--size-default);
 }
 
 .guideCloseText {
diff --git a/frontends/web/src/components/pillbuttongroup/pillbuttongroup.module.css b/frontends/web/src/components/pillbuttongroup/pillbuttongroup.module.css
index 8c92b25549..f415d5e2e8 100644
--- a/frontends/web/src/components/pillbuttongroup/pillbuttongroup.module.css
+++ b/frontends/web/src/components/pillbuttongroup/pillbuttongroup.module.css
@@ -3,31 +3,27 @@
 	display: flex;
 	flex-wrap: wrap;
 	flex-grow: 1;
+	gap: var(--spacing-half);
 }
 
 .pillbuttongroup button {
 	appearance: none;
 	background: var(--background-secondary);
-	border: 2px solid var(--background-secondary);
-	border-radius: 32px;
+	border: 0.1rem solid var(--background-secondary);
+	border-radius: 36px;
 	color: var(--color-default);
-	font-size: var(--size-default);
+	font-size: min(var(--size-default), 18px);
 	line-height: 1.75;
 	margin-bottom: var(--spacing-half);
-	margin-left: var(--spacing-half);
 }
 
 .pillbuttongroup.medium button {
-	padding: 0 calc(var(--spacing-default) * .75);
+	padding: 0 12px;
 }
 
 .pillbuttongroup.large button {
-	font-size: calc(var(--size-default) + 1px);
-	padding: 2px calc(var(--spacing-default) * 1.5);
-}
-
-.pillbuttongroup button:first-child {
-	margin-left: 0;
+	font-size: min(calc(var(--size-default) + 1px), 24px);
+	padding: 2px 24px;
 }
 
 .pillbuttongroup button:hover:not([disabled]) {
@@ -60,10 +56,3 @@
 	border-color: var(--background-secondary);
 	color: var(--color-disabled);
 }
-
-@media (max-width: 768px) {
-	.pillbuttongroup.lg button {
-		font-size: calc(var(--size-default));
-		padding: 2px calc(var(--spacing-default) * 1.25);
-	}	
-}
\ No newline at end of file
diff --git a/frontends/web/src/components/status/status.module.css b/frontends/web/src/components/status/status.module.css
index b208875a3a..207178ddd6 100644
--- a/frontends/web/src/components/status/status.module.css
+++ b/frontends/web/src/components/status/status.module.css
@@ -7,17 +7,16 @@
     display: flex;
     width: 100%;
 }
-.container.withCloseBtn {
-    padding-right: 60px;
-}
 
 .closeButton {
     background-color: transparent;
     border: none;
     margin-left: auto;
+    padding: 0;
 }
 
 .closeButton img {
-    width: 16px;
-    height: 16px;
+    height: var(--size-default);
+    margin-right: 0;
+    width: var(--size-default);
 }
diff --git a/frontends/web/src/routes/account/summary/accountssummary.module.css b/frontends/web/src/routes/account/summary/accountssummary.module.css
index d2b23c9b27..ecbccf75c4 100644
--- a/frontends/web/src/routes/account/summary/accountssummary.module.css
+++ b/frontends/web/src/routes/account/summary/accountssummary.module.css
@@ -101,13 +101,13 @@
 }
 
 .coinName {
+    align-items: center;
     display: flex;
 }
 
 .coinName img {
     flex-shrink: 0;
     margin-right: var(--spacing-default);
-    vertical-align: middle;
 }
 
 .coinUnit {
@@ -169,6 +169,7 @@
 
     .table tbody td {
         display: flex;
+        flex-wrap: wrap;
         justify-content: space-between;
         height: auto;
         padding-bottom: 0;
@@ -188,13 +189,4 @@
         padding-bottom: var(--spacing-default);
     }
 
-    .coinName {
-        position: relative;
-    }
-
-    .coinName img {
-        left: -32px;
-        position: absolute;
-        top: -3px;
-    }
 }
diff --git a/frontends/web/src/routes/account/summary/chart.module.css b/frontends/web/src/routes/account/summary/chart.module.css
index 0290f6150a..6c94aa0ecd 100644
--- a/frontends/web/src/routes/account/summary/chart.module.css
+++ b/frontends/web/src/routes/account/summary/chart.module.css
@@ -82,16 +82,16 @@
 }
 
 .totalValue {
-  font-size: 3.2rem;
-  display: flex;
   align-items: flex-end;
+  display: flex;
+  font-size: min(3.2rem, 40px);
 }
 
 .totalUnit {
   color: var(--color-secondary);
   display: inline-block;
+  font-size: min(2rem, 25px);
   margin-bottom: 3px;
-  font-size: 2.2rem;
   padding: 0 4px;
 }
 
diff --git a/frontends/web/src/routes/account/summary/percentage-diff.module.css b/frontends/web/src/routes/account/summary/percentage-diff.module.css
index 25fc979e1a..f4b591229d 100644
--- a/frontends/web/src/routes/account/summary/percentage-diff.module.css
+++ b/frontends/web/src/routes/account/summary/percentage-diff.module.css
@@ -1,7 +1,13 @@
 
+.arrow {
+  line-height: 1;
+  vertical-align: text-bottom;
+}
+
 .arrow img {
+  height: min(2rem, 25px);
   margin-right: 4px;
-  vertical-align: text-bottom;
+  width: min(2rem, 25px);
 }
 
 .up {
@@ -13,10 +19,10 @@
 }
 
 .diffValue {
-  font-size: 1.9rem;
+  font-size: min(2rem, 25px);
 }
 
 .diffUnit {
-  font-size: 1.6rem;
+  font-size: min(1.6rem, 20px); /* var(--size-default); */
   padding: 0 4px;
 }

From 878b15f5c4711283a090f6ce4090b209ca88559a Mon Sep 17 00:00:00 2001
From: thisconnect <this@shiftcrypto.ch>
Date: Wed, 22 Oct 2025 10:11:49 +0200
Subject: [PATCH 14/31] frontend: make guide component responsive

Changed the layout slightly on small screen as there was custom
font-size defined, introduced in: bfc3fed83a1ba771c7ac35e41dfadf36769c41fe
---
 frontends/web/src/components/guide/entry.tsx  |  8 ++-
 .../web/src/components/guide/guide.module.css | 58 +++++++------------
 2 files changed, 25 insertions(+), 41 deletions(-)

diff --git a/frontends/web/src/components/guide/entry.tsx b/frontends/web/src/components/guide/entry.tsx
index b356cf563e..a9ee90292b 100644
--- a/frontends/web/src/components/guide/entry.tsx
+++ b/frontends/web/src/components/guide/entry.tsx
@@ -47,10 +47,12 @@ export const Entry = (props: TProps) => {
   return (
     <div className={style.entry}>
       <div className={style.entryTitle} onClick={toggle}>
-        <div className={style.entryToggle}>{shown ? '–' : '+'}</div>
-        <div className={style.entryTitleText}>
-          <h2>{entry.title}</h2>
+        <div className={style.entryToggle}>
+          {shown ? '–' : '+'}
         </div>
+        <h3 className={style.entryTitleText}>
+          {entry.title}
+        </h3>
       </div>
       <div className={[style.entryContent, shown ? style.expanded : ''].join(' ')}>
         {shown ? (
diff --git a/frontends/web/src/components/guide/guide.module.css b/frontends/web/src/components/guide/guide.module.css
index 6903a6e05f..e2bb003268 100644
--- a/frontends/web/src/components/guide/guide.module.css
+++ b/frontends/web/src/components/guide/guide.module.css
@@ -12,15 +12,16 @@
 
 .close {
     display: flex;
-    height: 24px;
+    height: 2.4rem;
+    margin-left: var(--space-eight);
+    min-height: 0;
     padding: 4px;
-    width: 24px;
+    width: 2.4rem;
 }
 
 .close img {
-    height: 20px;
-    margin-left: calc(var(--space-quarter) / 2);
-    width: 20px;
+    height: min(2rem, 36px);
+    width: min(2rem, 36px);
 }
 
 .wrapper {
@@ -61,11 +62,6 @@
     margin: 0;
 }
 
-.header a {
-    cursor: pointer;
-    font-size: 2rem;
-}
-
 .content {
     display: flex;
     flex-direction: column;
@@ -74,17 +70,6 @@
     padding-bottom: env(safe-area-inset-bottom, 0);
 }
 
-.content h1 {
-    font-size: 1.5em;
-    margin-top: 0px;
-}
-
-.content h2 {
-    font-size: var(--size-subheader);
-    font-weight: 400;
-    margin: 0;
-}
-
 .guide p {
     font-size: var(--size-default);
     margin: 0.4em 0;
@@ -94,36 +79,39 @@
     margin-right: 0;
 }
 
-.entry {
-    margin-top: var(--space-default);
-}
-
 .appendix {
     padding-top: var(--space-half);
     margin-top: auto;
 }
 
+.entry {
+    margin-top: var(--space-default);
+}
+
 .entryTitle {
     align-items: flex-start;
     cursor: default;
     display: flex;
     flex-direction: row;
+    font-size: var(--size-subheader);
     justify-content: flex-start;
 }
 
-.entryTitle .entryToggle {
+.entryToggle {
     align-items: center;
     display: flex;
-    font-size: var(--size-subheader);
-    flex-direction: row;
     font-weight: bold;
+    flex-direction: row;
     justify-content: flex-start;
-    line-height: 1.2em;
-    width: 16px;
+    line-height: 1.2;
+    width: var(--size-small);
 }
 
-.entryTitle .entryTitleText {
+.entryTitleText {
     flex: 1;
+    font-size: var(--size-subheader);
+    font-weight: 400;
+    margin: 0;
 }
 
 .entryContent {
@@ -131,7 +119,7 @@
     display: flex;
     flex-direction: row;
     justify-content: flex-start;
-    padding-left: 16px;
+    padding-left: var(--size-small);
 }
 
 .expanded {
@@ -195,9 +183,3 @@
         padding-right: var(--space-half);
     }
 }
-
-@media screen and (max-width: 640px) {
-    .guide h2 {
-        font-size: var(--size-default);
-    }
-}

From acec824a57e832ad5662e1c734c25162023b9463 Mon Sep 17 00:00:00 2001
From: thisconnect <this@shiftcrypto.ch>
Date: Mon, 10 Nov 2025 12:43:21 +0100
Subject: [PATCH 15/31] frontend: make marketplace related components
 responsive

Also removed some unused CSS.
---
 .../groupedaccountselector.module.css         |   5 +-
 .../web/src/components/terms/terms.module.css |  16 +-
 .../routes/market/components/deals.module.css |   2 +-
 .../market/components/vendor-deals.module.css | 140 +-----------------
 .../routes/market/components/vendor-deals.tsx |   2 +-
 .../web/src/routes/market/market.module.css   |   7 +-
 6 files changed, 23 insertions(+), 149 deletions(-)

diff --git a/frontends/web/src/components/groupedaccountselector/groupedaccountselector.module.css b/frontends/web/src/components/groupedaccountselector/groupedaccountselector.module.css
index 5828fefddf..992b73f301 100644
--- a/frontends/web/src/components/groupedaccountselector/groupedaccountselector.module.css
+++ b/frontends/web/src/components/groupedaccountselector/groupedaccountselector.module.css
@@ -6,6 +6,7 @@
 }
 
 .balanceSingleValue {
+    margin-left: var(--space-quarter);
     margin-right: var(--space-quarter);
 }
 
@@ -26,12 +27,13 @@
 }
 
 .select {
+    font-size: min(var(--size-default), 24px);
     margin-bottom: var(--space-half);
 }
 
 .select :global(.react-select__group-heading) {
     color: var(--color-default);
-    font-size: var(--size-default);
+    font-size: min(var(--size-default), 24px);
     margin: 0;
     padding-right: var(--space-quarter);
     text-transform: unset;
@@ -72,6 +74,7 @@
 
 .select :global(.react-select__control) {
     background-color: var(--background-secondary);
+    min-height: var(--input-height);
     padding: var(--space-quarter) var(--space-eight);
 }
 
diff --git a/frontends/web/src/components/terms/terms.module.css b/frontends/web/src/components/terms/terms.module.css
index 92584f7c6d..52d879c96f 100644
--- a/frontends/web/src/components/terms/terms.module.css
+++ b/frontends/web/src/components/terms/terms.module.css
@@ -1,4 +1,5 @@
 .disclaimerContainer {
+  --size-default: min(1.4rem, 24px);
   align-items: center;
   display: flex;
   flex-basis: 100%;
@@ -21,22 +22,22 @@
   margin: 0 0 var(--space-default) 0;
   max-width: 660px;
   overflow: auto;
-  padding: var(--space-quarter) 1em 1em 1em;
+  padding: var(--space-quarter) var(--space-half) var(--space-half) var(--space-half);
 }
 
 .title {
-  font-size: 1.4rem;
+  font-size: var(--size-default);
   font-weight: bold;
   text-align: left;
 }
 
 .disclaimer p {
-  font-size: 1.4rem;
+  font-size: var(--size-default);
   line-height: 1.5;
 }
 
 .disclaimer p + .title {
-  margin: 4rem 0 0 0;
+  margin: 64px 0 0 0;
 }
 
 .table {
@@ -45,7 +46,7 @@
 
 .table table {
   border-collapse: collapse;
-  font-size: 1.4rem;
+  font-size: var(--size-default);
   text-align: left;
 }
 
@@ -64,6 +65,11 @@
   padding-left: 0;
 }
 
+.table td:last-child,
+.table th:last-child {
+  padding-right: 0;
+}
+
 .nowrap {
   white-space: nowrap;
 }
diff --git a/frontends/web/src/routes/market/components/deals.module.css b/frontends/web/src/routes/market/components/deals.module.css
index 0b042b5d54..b120203039 100644
--- a/frontends/web/src/routes/market/components/deals.module.css
+++ b/frontends/web/src/routes/market/components/deals.module.css
@@ -4,7 +4,7 @@
 
 .noExchangeText {
     color: var(--color-gray-alt);
-    line-height: 22px;
+    line-height: 1.375;
     margin: 0;
     text-align: center;
     margin-top: calc((var(--space-eight) + var(--space-half)));
diff --git a/frontends/web/src/routes/market/components/vendor-deals.module.css b/frontends/web/src/routes/market/components/vendor-deals.module.css
index b4b43c50c3..0b2cc86205 100644
--- a/frontends/web/src/routes/market/components/vendor-deals.module.css
+++ b/frontends/web/src/routes/market/components/vendor-deals.module.css
@@ -1,8 +1,10 @@
-.container, .paymentMethodContainer {
+.container,
+.paymentMethodContainer {
     display: flex;
 }
 
 .exchangeName {
+    margin: 0;
     width: 110px;
 }
 
@@ -18,22 +20,6 @@
     position: relative;
 }
 
-.infoButton {
-    background: none;
-    border: none;
-    cursor: pointer;
-    padding: 0;
-    position: absolute;
-    right: calc(var(--space-default) * -1);
-    top: 50%;
-    transform: translateY(-50%);
-
-}
-
-.outerContainer {
-    position: relative;
-}
-
 .paymentMethodsContainer {
     display: flex;
     flex-direction: column;
@@ -42,7 +28,8 @@
     padding-right: var(--space-quarter);
 }
 
-.paymentMethodName, .dealDescription {
+.paymentMethodName,
+.dealDescription {
     color: var(--color-default);
     display: inline-block;
     font-weight: 400;
@@ -57,123 +44,6 @@
     margin-top: var(--space-eight);
 }
 
-
-.radio {
-    --size-default: 1.4rem;
-    background-color: var(--background-secondary);
-    border: 1px solid var(--background-quaternary);
-    display: block;
-    padding: 8px;
-}
-
-.radio:hover, .radio *:hover {
-    cursor: pointer;
-}
-
-.radio input {
-    display: none;
-}
-
-.radio input + label {
-    display: inline-flex;
-    flex-direction: column;
-    font-size: var(--size-default);
-    line-height: 1.5;
-    margin: 0;
-    padding-left: calc(var(--space-half) + var(--space-quarter));
-    position: relative;
-}
-
-.radio input + label::before,
-.radio input + label::after {
-    background: var(--background-secondary);
-    content: '';
-    display: inline-block;
-    width: 12px;
-    height: 12px;
-    position: absolute;
-    top: 4px;
-    left: 0;
-    transition: all 100ms ease;
-}
-
-.radio input + label::before {
-    border: 1px solid var(--background-tertiary);
-    border-radius: 1em;
-}
-
-.radio input + label::after {
-    background: var(--color-info);
-    border-radius: 1em;
-    width: 10px;
-    height: 10px;
-    position: absolute;
-    top: 6px;
-    left: 2px;
-    opacity: 0;
-    transform: scale(0);
-}
-
-.radioLabel {
-    width: 100%;
-}
-
-.text {
-    margin: 0;
-}
-
-/* checked */
-
-.radio[aria-checked="true"] {
-    background-color: var(--background-focus);
-}
-
-.radio:focus {
-    position: relative;
-    z-index: 2;
-}
-
-.radio input:checked + label::before {
-    background-color: var(--background-secondary);
-}
-
-.radio input:checked + label::after {
-    opacity: 1;
-    transform: scale(1);
-}
-
-/* focus */
-
-.radio input[type="radio"]:focus + label::before {
-    box-shadow: 0px 0px 2px 2px var(--color-info);
-    outline: none;
-    outline-offset: 0;
-}
-
-.radio input[type="radio"]:checked:focus + label::before {
-    box-shadow: 0px 0px 2px 2px var(--color-info);
-}
-
-/* disabled */
-
-.radio input:disabled + label::before {
-    background: rgb(248, 248, 248);
-    border-color: rgb(220, 220, 220);
-    cursor: not-allowed;
-}
-
-.radio[aria-disabled="true"] {
-    background-color: #FFF;
-}
-
-.radio[aria-disabled="true"], .radio[aria-disabled="true"] * {
-    cursor: not-allowed;
-}
-
-span[role="radio"]:focus{
-    outline-color: var(--color-blue);
-}
-
 @media (max-width: 400px) {
     .exchangeName {
         width: 150px;
diff --git a/frontends/web/src/routes/market/components/vendor-deals.tsx b/frontends/web/src/routes/market/components/vendor-deals.tsx
index bef29fb63b..95011ea3c9 100644
--- a/frontends/web/src/routes/market/components/vendor-deals.tsx
+++ b/frontends/web/src/routes/market/components/vendor-deals.tsx
@@ -97,7 +97,7 @@ export const VendorDeals = ({
   return (
     <div className={style.exchangeContainer}>
       <div className={style.container}>
-        <p className={[style.text, style.exchangeName].join(' ')}>
+        <p className={style.exchangeName}>
           {getVendorFormattedName(vendorName)}
         </p>
         <div className={style.paymentMethodsContainer}>
diff --git a/frontends/web/src/routes/market/market.module.css b/frontends/web/src/routes/market/market.module.css
index a63bd30856..22f45e03e6 100644
--- a/frontends/web/src/routes/market/market.module.css
+++ b/frontends/web/src/routes/market/market.module.css
@@ -1,8 +1,3 @@
-.exchangeContainer,
-.exchangeContainer p {
-    --size-default: 1.4rem;
-}
-
 .exchangeContainer {
     padding-left: var(--space-half);
     padding-right: 40px;
@@ -10,7 +5,7 @@
 
 .label {
     color: var(--color-gray-alt);
-    line-height: 22px;
+    line-height: 1.375;
     margin: 0;
     margin-bottom: var(--space-eight);
 }

From ee0b93cca84bc3ab5be12634b9e034f35f772397 Mon Sep 17 00:00:00 2001
From: thisconnect <this@shiftcrypto.ch>
Date: Mon, 10 Nov 2025 12:44:29 +0100
Subject: [PATCH 16/31] frontend: make dialog related components responsive

---
 .../src/components/dialog/dialog.module.css   | 63 +------------------
 .../components/language/language.module.css   |  4 --
 2 files changed, 3 insertions(+), 64 deletions(-)

diff --git a/frontends/web/src/components/dialog/dialog.module.css b/frontends/web/src/components/dialog/dialog.module.css
index ee91952604..67adbaba66 100644
--- a/frontends/web/src/components/dialog/dialog.module.css
+++ b/frontends/web/src/components/dialog/dialog.module.css
@@ -33,15 +33,9 @@
 }
 /* guard dialog and wait-dialog from view styles */
 @media (min-width: 1200px) {
-    .header .title {
-        --size-subheader: 1.6rem;
-    }
     .modal {
         margin-left: var(--sidebar-width-large);
     }
-    .modal .contentContainer p {
-        --size-default: 1.4rem;
-    }
 }
 
 .modal.small {
@@ -96,13 +90,11 @@
 
 .header .closeButton,
 .header .closeButton img {
-    width: 18px;
-    height: 18px;
+    width: var(--size-subheader);
+    height: var(--size-subheader);
 }
 
 .contentContainer {
-    font-size: var(--size-default);
-    font-weight: 400;
     padding: var(--space-half);
 }
 
@@ -139,55 +131,6 @@
     font-weight: 400;
 }
 
-.modalContent p {
-    font-size: var(--size-default);
-    font-weight: 400;
-}
-
-.modalContent > *:first-child {
-    margin-top: 0;
-}
-
-.detail {
-    display: flex;
-    flex-direction: row;
-    justify-content: space-between;
-    align-items: center;
-    min-height: var(--item-height);
-    padding: var(--space-half);
-}
-
-.detail:not(:first-child) {
-    border-bottom: solid 1px var(--background);
-}
-
-.detail label {
-    white-space: nowrap;
-    margin-right: var(--space-half) !important;
-}
-
-.detail label,
-.detail p {
-    margin: 0;
-    line-height: 1;
-}
-
-.detail.description > span {
-    text-align: right;
-}
-
-.buttons {
-    padding: var(--space-quarter);
-}
-
-.buttons button:first-child {
-    margin-right: 10px;
-}
-
-.buttons button {
-    width: 50%;
-}
-
 .dialogButtons {
     display: flex;
     flex-direction: row-reverse;
@@ -239,4 +182,4 @@
     .contentContainer.slim {
         padding-bottom: calc(env(safe-area-inset-bottom, 0));
     }
-}
\ No newline at end of file
+}
diff --git a/frontends/web/src/components/language/language.module.css b/frontends/web/src/components/language/language.module.css
index 8f63edd402..7b482f3f89 100644
--- a/frontends/web/src/components/language/language.module.css
+++ b/frontends/web/src/components/language/language.module.css
@@ -52,8 +52,4 @@
     .link {
         font-size: var(--size-smaller);
     }
-
-    .language {
-        font-size: var(--size-small) !important;
-    }
 }
\ No newline at end of file

From fcb925573f3dc0c39a3e4cb335948c6fd2d441a3 Mon Sep 17 00:00:00 2001
From: thisconnect <this@shiftcrypto.ch>
Date: Mon, 10 Nov 2025 12:44:59 +0100
Subject: [PATCH 17/31] frontend: make settings related components responsive

---
 .../actionable-item.module.css                |  1 -
 .../src/components/message/message.module.css |  4 ++--
 .../web/src/routes/account/add/add.module.css |  4 ++--
 .../account/add/components/steps.module.css   |  2 +-
 .../web/src/routes/device/bitbox02/bip85.tsx  |  2 +-
 .../src/routes/device/bitbox02/passphrase.tsx |  2 +-
 .../routes/device/bitbox02/recovery-words.tsx |  6 +++--
 .../unlock-software-keystore.module.css       |  2 ++
 .../activecurrenciesdropdown.module.css       |  3 ++-
 .../languageDropDownSetting.module.css        |  3 ++-
 .../factory-reset-setting.module.css          |  2 +-
 .../components/mobile-header.module.css       |  2 +-
 .../settingsItem/settingsItem.module.css      |  4 +++-
 .../settings/manage-accounts.module.css       | 22 ++++++++++++++-----
 .../src/routes/settings/manage-accounts.tsx   |  6 +++--
 frontends/web/src/style/layout.css            |  2 +-
 16 files changed, 43 insertions(+), 24 deletions(-)

diff --git a/frontends/web/src/components/actionable-item/actionable-item.module.css b/frontends/web/src/components/actionable-item/actionable-item.module.css
index e9567cd6a4..e783b23674 100644
--- a/frontends/web/src/components/actionable-item/actionable-item.module.css
+++ b/frontends/web/src/components/actionable-item/actionable-item.module.css
@@ -1,5 +1,4 @@
 .container {
-  --size-default: 1.4rem;
   align-items: center;
   background-color: var(--background-secondary);
   border: none;
diff --git a/frontends/web/src/components/message/message.module.css b/frontends/web/src/components/message/message.module.css
index 490c4943d8..842b497640 100644
--- a/frontends/web/src/components/message/message.module.css
+++ b/frontends/web/src/components/message/message.module.css
@@ -19,8 +19,8 @@
 }
 
 .message img {
-    margin-right: 4px;
-    max-width: 30px;
+    margin-right: var(--space-quarter);
+    max-width: var(--size-header);
 }
 
 .message p:last-child {
diff --git a/frontends/web/src/routes/account/add/add.module.css b/frontends/web/src/routes/account/add/add.module.css
index d43d2f0569..96f48416bf 100644
--- a/frontends/web/src/routes/account/add/add.module.css
+++ b/frontends/web/src/routes/account/add/add.module.css
@@ -1,8 +1,8 @@
 .manageContainer {
-    flex-basis: 490px;
+    /* flex-basis: 490px; */
     flex-shrink: 1;
     margin-bottom: var(--header-height);
-    min-height: 390px;
+    min-height: 490px;
     max-height: 100%;
 }
 
diff --git a/frontends/web/src/routes/account/add/components/steps.module.css b/frontends/web/src/routes/account/add/components/steps.module.css
index 0480c56c43..680e85b565 100644
--- a/frontends/web/src/routes/account/add/components/steps.module.css
+++ b/frontends/web/src/routes/account/add/components/steps.module.css
@@ -108,7 +108,7 @@
 }
 
 .content {
-    font-size: var(--size-smaller);
+    font-size: var(--size-small);
     line-height: 1;
     margin: 0;
     min-width: 90px;
diff --git a/frontends/web/src/routes/device/bitbox02/bip85.tsx b/frontends/web/src/routes/device/bitbox02/bip85.tsx
index c4cdbda991..13f2015178 100644
--- a/frontends/web/src/routes/device/bitbox02/bip85.tsx
+++ b/frontends/web/src/routes/device/bitbox02/bip85.tsx
@@ -52,7 +52,7 @@ export const Bip85 = ({
         key="bip85-info-what"
         fullscreen
         verticallyCentered>
-        <ViewHeader title={t('deviceSettings.expert.bip85.what.title')} />
+        <ViewHeader small title={t('deviceSettings.expert.bip85.what.title')} />
         <ViewContent minHeight="280px">
           <Grid>
             <Column>
diff --git a/frontends/web/src/routes/device/bitbox02/passphrase.tsx b/frontends/web/src/routes/device/bitbox02/passphrase.tsx
index 07e4e81ffe..4e0ca84dc8 100644
--- a/frontends/web/src/routes/device/bitbox02/passphrase.tsx
+++ b/frontends/web/src/routes/device/bitbox02/passphrase.tsx
@@ -31,7 +31,7 @@ import { Message } from '@/components/message/message';
 // The enable wizard has five steps that can be navigated by clicking
 // 'back' or 'continue'. On the last step the passphrase will be enabled.
 const FINAL_INFO_STEP = 5;
-const CONTENT_MIN_HEIGHT = '38em';
+const CONTENT_MIN_HEIGHT = 'min(38em, 100vh)';
 
 type TProps = {
   deviceID: string;
diff --git a/frontends/web/src/routes/device/bitbox02/recovery-words.tsx b/frontends/web/src/routes/device/bitbox02/recovery-words.tsx
index f51cf0a087..0667703041 100644
--- a/frontends/web/src/routes/device/bitbox02/recovery-words.tsx
+++ b/frontends/web/src/routes/device/bitbox02/recovery-words.tsx
@@ -26,6 +26,8 @@ import { Button, Checkbox } from '@/components/forms';
 import { PointToBitBox02 } from '@/components/icon';
 import { Message } from '@/components/message/message';
 
+const CONTENT_MIN_HEIGHT = 'min(35em, 100vh)';
+
 type TProps = {
   deviceID: string;
 };
@@ -53,7 +55,7 @@ export const RecoveryWords = ({ deviceID }: TProps) => {
         <View
           key="progress"
           fullscreen
-          minHeight="45em"
+          minHeight={CONTENT_MIN_HEIGHT}
           verticallyCentered>
           <ViewHeader small title={t('backup.showMnemonic.title')} />
           <ViewContent>
@@ -79,7 +81,7 @@ export const RecoveryWords = ({ deviceID }: TProps) => {
     <View
       key="info"
       fullscreen
-      minHeight="45em"
+      minHeight={CONTENT_MIN_HEIGHT}
       verticallyCentered>
       <ViewHeader small title={t('backup.showMnemonic.title')} />
       <ViewContent>
diff --git a/frontends/web/src/routes/settings/components/advanced-settings/unlock-software-keystore.module.css b/frontends/web/src/routes/settings/components/advanced-settings/unlock-software-keystore.module.css
index 2e92836d4a..18076a06b3 100644
--- a/frontends/web/src/routes/settings/components/advanced-settings/unlock-software-keystore.module.css
+++ b/frontends/web/src/routes/settings/components/advanced-settings/unlock-software-keystore.module.css
@@ -20,10 +20,12 @@
 
 .chevronRight {
   bottom: 0;
+  height: var(--size-subheader);
   margin: auto;
   position: absolute;
   right: var(--space-quarter);
   top: 3px;
+  width: var(--size-subheader);
 }
 
 .ejectIconRight {
diff --git a/frontends/web/src/routes/settings/components/appearance/activecurrenciesdropdown.module.css b/frontends/web/src/routes/settings/components/appearance/activecurrenciesdropdown.module.css
index 417a28d4f2..17ae58220d 100644
--- a/frontends/web/src/routes/settings/components/appearance/activecurrenciesdropdown.module.css
+++ b/frontends/web/src/routes/settings/components/appearance/activecurrenciesdropdown.module.css
@@ -10,7 +10,8 @@
 }
 
 .defaultLabel {
-    font-size: var(--size-smaller);
+    font-size: var(--size-small);
     margin: 0;
     text-transform: capitalize;
+    word-break: keep-all;
 }
diff --git a/frontends/web/src/routes/settings/components/appearance/languageDropDownSetting.module.css b/frontends/web/src/routes/settings/components/appearance/languageDropDownSetting.module.css
index 16adc80f15..3daac18d29 100644
--- a/frontends/web/src/routes/settings/components/appearance/languageDropDownSetting.module.css
+++ b/frontends/web/src/routes/settings/components/appearance/languageDropDownSetting.module.css
@@ -3,5 +3,6 @@
 }
 
 .container img {
-    margin-right: var(--space-eight);
+    width: var(--size-default);
+    margin-right: var(--space-quarter);
 }
\ No newline at end of file
diff --git a/frontends/web/src/routes/settings/components/device-settings/factory-reset-setting.module.css b/frontends/web/src/routes/settings/components/device-settings/factory-reset-setting.module.css
index 9052a9aac8..58e4db1636 100644
--- a/frontends/web/src/routes/settings/components/device-settings/factory-reset-setting.module.css
+++ b/frontends/web/src/routes/settings/components/device-settings/factory-reset-setting.module.css
@@ -1,10 +1,10 @@
 .settingNameContainer {
+    align-items: center;
     display: flex;
 }
 
 .settingName {
     color: var(--color-swissred);
-    font-size: 1.6rem;
     margin: 0;
     margin-left: var(--space-quarter);
 }
\ No newline at end of file
diff --git a/frontends/web/src/routes/settings/components/mobile-header.module.css b/frontends/web/src/routes/settings/components/mobile-header.module.css
index 8b5a2e7fcd..894f16ab5e 100644
--- a/frontends/web/src/routes/settings/components/mobile-header.module.css
+++ b/frontends/web/src/routes/settings/components/mobile-header.module.css
@@ -19,7 +19,7 @@
 }
 
 .backButton img {
-    height: 24px;
+    height: var(--size-subheader);
 }
 
 .backButton:focus {
diff --git a/frontends/web/src/routes/settings/components/settingsItem/settingsItem.module.css b/frontends/web/src/routes/settings/components/settingsItem/settingsItem.module.css
index 4c9265aad6..54196f3489 100644
--- a/frontends/web/src/routes/settings/components/settingsItem/settingsItem.module.css
+++ b/frontends/web/src/routes/settings/components/settingsItem/settingsItem.module.css
@@ -19,10 +19,12 @@
 
 .chevronRight {
     bottom: 0;
+    height: var(--size-subheader);
     margin: auto;
     position: absolute;
     right: var(--space-half);
     top: 3px;
+    width: var(--size-subheader);
 }
 
 .content {
@@ -32,7 +34,7 @@
 
 .primaryText {
     color: var(--color-default);
-    font-size: 1.6rem;
+    font-size: var(--size-default);
     margin: 0;
 }
 
diff --git a/frontends/web/src/routes/settings/manage-accounts.module.css b/frontends/web/src/routes/settings/manage-accounts.module.css
index a5d224ff0e..8ce0a75769 100644
--- a/frontends/web/src/routes/settings/manage-accounts.module.css
+++ b/frontends/web/src/routes/settings/manage-accounts.module.css
@@ -58,6 +58,7 @@
 }
 
 .coinLogo {
+    display: block;
     position: relative;
     z-index: 2;
 }
@@ -77,26 +78,28 @@
 
 .editBtn img {
     margin-right: var(--space-quarter);
-    max-width: 18px;
-    height: auto;
+    height: var(--size-default);
     vertical-align: text-bottom;
 }
 
 .toggleLabel {
-    align-items: center;
+    align-items: baseline;
     display: flex;
     justify-content: space-between;
 }
 
 .toggleLabelText {
+    align-items: baseline;
     color: var(--color-secondary);
+    display: flex;
 }
 
 .toggleLabelText img {
     color: var(--color-secondary);
     margin-right: var(--space-quarter);
-    max-width: 18px;
-    vertical-align: bottom;
+    max-height: var(--size-default);
+    height: auto;
+    width: var(--size-default);
 }
 
 .toggle {
@@ -150,7 +153,7 @@
 .token::before {
     background-color: #ddd;
     content: "";
-    height: 22px;
+    height: 4.2rem;
     left: 10px;
     position: absolute;
     top: -13px;
@@ -163,6 +166,13 @@
     top: -7px;
 }
 
+.tokenIcon,
+.token img {
+    background: var(--background-secondary);
+    outline: 5px solid var(--background-secondary);
+    position: relative;
+}
+
 .token img:first-child {
     margin-right: 0;
 }
diff --git a/frontends/web/src/routes/settings/manage-accounts.tsx b/frontends/web/src/routes/settings/manage-accounts.tsx
index d6ffbe8b7e..1a5445643f 100644
--- a/frontends/web/src/routes/settings/manage-accounts.tsx
+++ b/frontends/web/src/routes/settings/manage-accounts.tsx
@@ -186,7 +186,7 @@ export const ManageAccounts = ({ accounts, devices, hasAccounts }: Props) => {
               <span className="unit">({account.coinUnit})</span>
             </span>
           </div>
-          <div className="flex flex-items-center">
+          <div>
             {!account.active ? (
               <p className={`text-small ${style.disabledText || ''}`}>
                 {t('generic.enabled_false')}
@@ -288,7 +288,9 @@ export const ManageAccounts = ({ accounts, devices, hasAccounts }: Props) => {
                         htmlFor={currentlyEditedAccount.code}>
                         <span className={style.toggleLabelText}>
                           <EyeOpenedDark />
-                          {t('newSettings.appearance.enableAccount.title')}
+                          <span>
+                            {t('newSettings.appearance.enableAccount.title')}
+                          </span>
                         </span>
                         <Toggle
                           checked={currentlyEditedAccount.active}
diff --git a/frontends/web/src/style/layout.css b/frontends/web/src/style/layout.css
index f3ad7b6e3d..10792c699a 100644
--- a/frontends/web/src/style/layout.css
+++ b/frontends/web/src/style/layout.css
@@ -154,7 +154,7 @@ button, textarea {
 
 .tabs .tab {
     width: 50%;
-    height: 52px;
+    height: min(5.2rem, 100px);
     border: solid 1px var(--color-gray);
     transition: all .2s ease-out;
 }

From 4e88c36f9e1c9699e9b19909594683e233554784 Mon Sep 17 00:00:00 2001
From: thisconnect <this@shiftcrypto.ch>
Date: Mon, 10 Nov 2025 18:16:50 +0100
Subject: [PATCH 18/31] frontend: improve sidebar in responsive mode

Sidebar can appear on Android tablets, fixed some styles related to
the sidebar component.

Also removed anmiation all (transition) on sidebar labels. Kept
only icons should animate opacity.
---
 .../src/components/keystore/connected-keystore.tsx |  7 ++++++-
 .../web/src/components/sidebar/sidebar.module.css  | 14 +++++---------
 frontends/web/src/style/layout.css                 |  3 ++-
 frontends/web/src/style/variables.css              |  1 +
 4 files changed, 14 insertions(+), 11 deletions(-)

diff --git a/frontends/web/src/components/keystore/connected-keystore.tsx b/frontends/web/src/components/keystore/connected-keystore.tsx
index 6e2c274338..f1dfc964a7 100644
--- a/frontends/web/src/components/keystore/connected-keystore.tsx
+++ b/frontends/web/src/components/keystore/connected-keystore.tsx
@@ -53,7 +53,12 @@ export const ConnectedKeystore = ({
         <>
           {' '}
           <Badge
-            icon={props => <USBSuccess style={{ width: '0.9rem', height: '0.9rem' }} {...props} />}
+            icon={props => (
+              <USBSuccess style={{
+                width: 'min(0.9rem, 12px)',
+                height: 'min(0.9rem, 12px)',
+              }} {...props} />
+            )}
             title={t('device.keystoreConnected')}
             type="success">
             {connectedIconOnly ? undefined : t('device.keystoreConnected')}
diff --git a/frontends/web/src/components/sidebar/sidebar.module.css b/frontends/web/src/components/sidebar/sidebar.module.css
index 3a01efcbce..ddde005919 100644
--- a/frontends/web/src/components/sidebar/sidebar.module.css
+++ b/frontends/web/src/components/sidebar/sidebar.module.css
@@ -93,9 +93,8 @@
 }
 
 .sidebarHeader {
-    font-size: 12px;
-    line-height: 1.3333;
     color: var(--color-secondary);
+    font-size: var(--size-smaller);
 }
 
 .sidebarIconVisible {
@@ -112,15 +111,15 @@
 
 .sidebarItem > a,
 .sidebarItem > button {
-    background-color: transparent;
     align-items: center;
+    background-color: transparent;
     border-radius: 2px;
     color: white;
     cursor: default;
     display: flex;
     flex-direction: row;
-    height: var(--sidebar-item-height);
     justify-content: center;
+    min-height: var(--sidebar-item-height);
     overflow: hidden;
     position: relative;
     text-decoration: none;
@@ -180,15 +179,12 @@ a.sidebarActive .single img,
 }
 
 .sidebarLabel {
-    background-color: transparent;
     color: var(--color-light);
-    line-height: 1;
     flex: 1;
-    padding-top: 0;
-    padding-right: var(--space-default);
     font-size: var(--size-default);
     font-weight: 400;
-    transition: all 0.2s ease;
+    padding-right: var(--space-half);
+    padding-top: 0;
     word-break: break-word;
 }
 
diff --git a/frontends/web/src/style/layout.css b/frontends/web/src/style/layout.css
index 10792c699a..0b3b09a5db 100644
--- a/frontends/web/src/style/layout.css
+++ b/frontends/web/src/style/layout.css
@@ -348,14 +348,15 @@ button, textarea {
 }
 
 .stacked img {
+    display: block;
     transition: opacity 0.2s ease;
 }
 
 .stacked img:last-child {
+    left: 50%;
     opacity: 0;
     position: absolute;
     top: 0;
-    left: 50%;
     transform: translateX(-50%);
 }
 
diff --git a/frontends/web/src/style/variables.css b/frontends/web/src/style/variables.css
index d75032e6f6..5dcd766614 100644
--- a/frontends/web/src/style/variables.css
+++ b/frontends/web/src/style/variables.css
@@ -73,6 +73,7 @@
     --sidebar-item-height: 52px;
     --sidebar-icon-margin: 14px;
     --sidebar-icon-size: 24px;
+    --sidebar-icon-size: min(2.4rem, 28px);
 
     /* header */
     --header-height: 70px;

From cf7362761230fcf3d45ec479b8b92252c4903ab7 Mon Sep 17 00:00:00 2001
From: thisconnect <this@shiftcrypto.ch>
Date: Tue, 11 Nov 2025 10:44:37 +0100
Subject: [PATCH 19/31] test: unclear what to do with view css variable
 overwrites

---
 .../web/src/components/view/view.module.css     | 16 ----------------
 frontends/web/src/style/variables.css           | 17 +++++++++++++++++
 2 files changed, 17 insertions(+), 16 deletions(-)

diff --git a/frontends/web/src/components/view/view.module.css b/frontends/web/src/components/view/view.module.css
index 2a9ca62955..027f95ca9f 100644
--- a/frontends/web/src/components/view/view.module.css
+++ b/frontends/web/src/components/view/view.module.css
@@ -293,22 +293,6 @@
     margin: 0 auto;
 }
 
-@media (min-width: 1200px) {
-    .title {
-        --size-subheader: 2.8rem;
-    }
-    .header,
-    .inner p {
-        --size-default: 2rem;
-    }
-    .fullscreen {
-        --size-default: 1.8rem;
-    }
-    .inner footer p {
-        --size-default: 1.4rem;
-    }
-}
-
 .footer {
     align-items: center;
     display: flex;
diff --git a/frontends/web/src/style/variables.css b/frontends/web/src/style/variables.css
index 5dcd766614..5efbe40c1c 100644
--- a/frontends/web/src/style/variables.css
+++ b/frontends/web/src/style/variables.css
@@ -214,3 +214,20 @@
         --size-default: min(1.6rem, 28px);
     }
 }
+/*
+@media (min-width: 1200px) {
+    .title {
+        --size-subheader: 2.8rem;
+    }
+    .header,
+    .inner p {
+        --size-default: 2rem;
+    }
+    .fullscreen {
+        --size-default: 1.8rem;
+    }
+    .inner footer p {
+        --size-default: 1.4rem;
+    }
+}
+*/
\ No newline at end of file

From 089668fc4596f2988661fb01dde98f9c4d4c46a2 Mon Sep 17 00:00:00 2001
From: thisconnect <this@shiftcrypto.ch>
Date: Tue, 11 Nov 2025 11:41:18 +0100
Subject: [PATCH 20/31] frontend: improve all-accounts overlay in responsive
 mode

---
 .../web/src/routes/accounts/all-accounts.module.css    | 10 +++++-----
 1 file changed, 5 insertions(+), 5 deletions(-)

diff --git a/frontends/web/src/routes/accounts/all-accounts.module.css b/frontends/web/src/routes/accounts/all-accounts.module.css
index 4eaa17d6a9..f8c8c44d6d 100644
--- a/frontends/web/src/routes/accounts/all-accounts.module.css
+++ b/frontends/web/src/routes/accounts/all-accounts.module.css
@@ -1,7 +1,6 @@
 .container {
   display: flex;
   flex-direction: column;
-  font-size: var(--size-small);
   gap: var(--space-half);
   width: 100%;
 }
@@ -57,7 +56,7 @@
   flex-basis: auto;
   flex-shrink: 0;
   flex-grow: 1;
-  font-size: 1.6rem;
+  font-size: var(--size-default);
   justify-content: flex-end;
   margin-left: auto;
   overflow: hidden;
@@ -67,12 +66,13 @@
 .chevron {
   color: var(--color-mediumgray);
   flex-shrink: 0;
-  font-size: 1.8rem;
-  margin-left: 4px;
-  margin-top: 6px;
   margin-right: -8px;
 }
 
+.chevron img {
+  display: block;
+}
+
 .emptyState {
   display: flex;
   flex-direction: column;

From 5729c43279d2a7f989a8cad26a6c49c300ab86f2 Mon Sep 17 00:00:00 2001
From: thisconnect <this@shiftcrypto.ch>
Date: Tue, 11 Nov 2025 11:51:46 +0100
Subject: [PATCH 21/31] 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.
---
 .../amount/conversion-amount.module.css       |  8 +-
 .../headerssync/headerssync.module.css        |  3 +-
 .../components/details.module.css             | 90 +++++++++++++++++++
 .../transactions/transaction.module.css       |  6 +-
 .../web/src/routes/account/account.module.css | 13 +--
 .../src/routes/account/info/info.module.css   |  1 +
 6 files changed, 103 insertions(+), 18 deletions(-)
 create mode 100644 frontends/web/src/components/transactions/components/details.module.css

diff --git a/frontends/web/src/components/amount/conversion-amount.module.css b/frontends/web/src/components/amount/conversion-amount.module.css
index 56a03653f4..ec24484d86 100644
--- a/frontends/web/src/components/amount/conversion-amount.module.css
+++ b/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 {
diff --git a/frontends/web/src/components/headerssync/headerssync.module.css b/frontends/web/src/components/headerssync/headerssync.module.css
index 1bd4dcca90..34f9268af4 100644
--- a/frontends/web/src/components/headerssync/headerssync.module.css
+++ b/frontends/web/src/components/headerssync/headerssync.module.css
@@ -19,7 +19,7 @@
 }
 
 .syncMessage {
-    height: 16px;
+    height: var(--size-default);
     width: 100%;
     max-width: var(--content-width);
     font-size: var(--size-smaller);
@@ -32,7 +32,6 @@
 
 .syncText {
     display: inline-block;
-    height: 100%;
     font-variant: tabular-nums;
 }
 
diff --git a/frontends/web/src/components/transactions/components/details.module.css b/frontends/web/src/components/transactions/components/details.module.css
new file mode 100644
index 0000000000..fb041d2beb
--- /dev/null
+++ b/frontends/web/src/components/transactions/components/details.module.css
@@ -0,0 +1,90 @@
+.currencyUnit {
+    color: var(--color-secondary);
+    font-variant: normal;
+}
+
+.detail,
+.detailInput {
+    display: flex;
+    flex-direction: row;
+    justify-content: space-between;
+    align-items: center;
+    min-height: var(--item-height);
+    padding: var(--space-half);
+}
+
+.detailInput {
+    padding: 0 0 0 var(--space-half);
+}
+
+.detailInput label {
+    flex-shrink: 0;
+    margin-bottom: 0;
+}
+
+.textOnlyInput {
+    margin: 0;
+}
+
+.textOnlyInput input {
+    border: none;
+}
+
+.editButton {
+    background: none;
+    border: none;
+    height: 20px;
+    margin-right: var(--space-half);
+    padding: 0;
+    -webkit-appearance: none;
+    width: 20px;
+}
+
+.editButton:focus {
+    outline: none;
+}
+
+.editButton img {
+    opacity: 0.4;
+    vertical-align: text-bottom;
+    outline: none;
+}
+
+.editButton:hover img {
+    opacity: 0.55;
+}
+
+
+.detail:not(:first-child) {
+    border-top: solid 1px var(--background);
+}
+
+.detail label {
+    margin-right: var(--space-half) !important;
+    word-break: keep-all;
+}
+
+.detail label,
+.detail p {
+    margin: 0;
+    line-height: 1;
+}
+
+.detail.addresses {
+    align-items: baseline;
+    padding-bottom: 0;
+    padding-right: 0;
+    padding-top: 0;
+}
+
+.addresses label {
+    padding: var(--space-half) 0;
+}
+
+.detailAddresses {
+    flex-grow: 1;
+}
+
+.detailAddress + .detailAddress {
+    margin-top: calc(var(--space-quarter) * -1);
+}
diff --git a/frontends/web/src/components/transactions/transaction.module.css b/frontends/web/src/components/transactions/transaction.module.css
index b6d8cff977..b883589fde 100644
--- a/frontends/web/src/components/transactions/transaction.module.css
+++ b/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;
@@ -116,7 +116,7 @@
 }
 .txNoteText {
   color: var(--color-default);
-  font-size: 1.6rem;
+  font-size: var(--size-default);
   line-height: 1.25;
 }
 @media (max-width: 560px) {
@@ -180,7 +180,7 @@
 }
 .txType {
   color: var(--color-default);
-  font-size: 1.6rem;
+  font-size: var(--size-default);
   line-height: 1.25;
 }
 
diff --git a/frontends/web/src/routes/account/account.module.css b/frontends/web/src/routes/account/account.module.css
index 072f5e509f..a81079fda6 100644
--- a/frontends/web/src/routes/account/account.module.css
+++ b/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;
@@ -88,9 +87,9 @@
 }
 
 .accountIcon {
-    width: 18px;
-    height: 18px;
+    height: var(--size-default);
     margin-right: var(--space-eight);
+    width: var(--size-default);
 }
 
 .errorLoadTransactions {
@@ -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);
diff --git a/frontends/web/src/routes/account/info/info.module.css b/frontends/web/src/routes/account/info/info.module.css
index 157e6eeacd..e3dd4546b3 100644
--- a/frontends/web/src/routes/account/info/info.module.css
+++ b/frontends/web/src/routes/account/info/info.module.css
@@ -43,6 +43,7 @@
 .entry {
     align-items: baseline;
     display: flex;
+    flex-wrap: wrap;
     justify-content: space-between;
     margin-bottom: var(--space-half);
 }

From 9e72fbb6c402dcdd51098fd26ad7f8e609abb9de Mon Sep 17 00:00:00 2001
From: thisconnect <this@shiftcrypto.ch>
Date: Tue, 11 Nov 2025 15:30:24 +0100
Subject: [PATCH 22/31] frontend: make recieve view responsive

---
 .../routes/account/receive/receive.module.css | 25 +++++++------------
 .../src/routes/account/receive/receive.tsx    | 16 ++++++------
 2 files changed, 16 insertions(+), 25 deletions(-)

diff --git a/frontends/web/src/routes/account/receive/receive.module.css b/frontends/web/src/routes/account/receive/receive.module.css
index e2578d1cdd..02c17887d0 100644
--- a/frontends/web/src/routes/account/receive/receive.module.css
+++ b/frontends/web/src/routes/account/receive/receive.module.css
@@ -19,21 +19,6 @@
     min-height: 260px;
 }
 
-.arrowLeft,
-.arrowRight {
-    width: 16px;
-    position: relative;
-    top: 3px;
-}
-
-.arrowLeft {
-    margin-right: 3px;
-}
-
-.arrowRight {
-    margin-left: 3px;
-}
-
 .previous,
 .next {
     appearance: none;
@@ -46,6 +31,13 @@
     text-decoration: none;
 }
 
+.previous img,
+.next img {
+    display: block;
+    height: min(2.4rem, 36px);
+    width: min(2.4rem, 36px);
+}
+
 .hide {
     position: absolute;
     top: 0;
@@ -62,11 +54,12 @@
     color: var(--color-secondary);
     cursor: pointer;
     display: inline-block;
+    font-size: var(--size-small);
     text-align: center;
     text-decoration: underline;
     padding: var(--space-quarter);
 }
 
 .messageContainer {
-    margin-top: var(--spacing-default);
+    margin-top: var(--spacing-half);
 }
\ No newline at end of file
diff --git a/frontends/web/src/routes/account/receive/receive.tsx b/frontends/web/src/routes/account/receive/receive.tsx
index ce9351d8be..1a278519c2 100644
--- a/frontends/web/src/routes/account/receive/receive.tsx
+++ b/frontends/web/src/routes/account/receive/receive.tsx
@@ -75,11 +75,9 @@ const AddressTypeDialog = ({
               {t(`receive.scriptType.${scriptType}`)}
             </Radio>
             {scriptType === 'p2tr' && addressType === i && (
-              <div className={style.messageContainer}>
-                <Message type="warning">
-                  {t('receive.taprootWarning')}
-                </Message>
-              </div>
+              <Message type="warning" className={style.messageContainer}>
+                {t('receive.taprootWarning')}
+              </Message>
             )}
           </div>
         ))}
@@ -237,9 +235,9 @@ export const Receive = ({
                         className={style.previous}
                         onClick={previous}>
                         {(verifying || activeIndex === 0) ? (
-                          <ArrowCirlceLeft height="24" width="24" />
+                          <ArrowCirlceLeft />
                         ) : (
-                          <ArrowCirlceLeftActive height="24" width="24" title={t('button.previous')} />
+                          <ArrowCirlceLeftActive title={t('button.previous')} />
                         )}
                       </button>
                     )}
@@ -251,9 +249,9 @@ export const Receive = ({
                         className={style.next}
                         onClick={e => next(e, currentAddresses.length)}>
                         {(verifying || activeIndex >= currentAddresses.length - 1) ? (
-                          <ArrowCirlceRight height="24" width="24" />
+                          <ArrowCirlceRight />
                         ) : (
-                          <ArrowCirlceRightActive height="24" width="24" title={t('button.next')} />
+                          <ArrowCirlceRightActive title={t('button.next')} />
                         )}
                       </button>
                     )}

From d4cacd451c79af5acf2f6cdf375cf07000935ce6 Mon Sep 17 00:00:00 2001
From: thisconnect <this@shiftcrypto.ch>
Date: Wed, 12 Nov 2025 10:44:40 +0100
Subject: [PATCH 23/31] frontend: improve send view in responsive mode

---
 .../mobile-fullscreen-selector.module.css     |  1 +
 .../forms/input-with-dropdown.module.css      |  8 +++---
 .../account/send/coin-control.module.css      |  6 ++++
 .../src/routes/account/send/coin-control.tsx  |  3 +-
 .../components/confirm/confirm.module.css     |  3 ++
 .../send/components/confirm/confirm.tsx       |  4 ++-
 .../inputs/receiver-address-input.module.css  | 16 ++++-------
 .../src/routes/account/send/send.module.css   | 28 ++++++++++++++++---
 .../web/src/routes/account/send/send.tsx      | 26 +++++++++--------
 .../src/routes/account/send/utxos.module.css  |  9 ++++--
 frontends/web/src/style/variables.css         |  1 +
 11 files changed, 70 insertions(+), 35 deletions(-)
 create mode 100644 frontends/web/src/routes/account/send/coin-control.module.css

diff --git a/frontends/web/src/components/dropdown/mobile-fullscreen-selector.module.css b/frontends/web/src/components/dropdown/mobile-fullscreen-selector.module.css
index 1b44160753..3ec28ee1bf 100644
--- a/frontends/web/src/components/dropdown/mobile-fullscreen-selector.module.css
+++ b/frontends/web/src/components/dropdown/mobile-fullscreen-selector.module.css
@@ -78,6 +78,7 @@
     text-align: center;
     left: 50%;
     transform: translateX(-50%);
+    width: calc(100% - 87px);
 }
 
 .searchContainer {
diff --git a/frontends/web/src/components/forms/input-with-dropdown.module.css b/frontends/web/src/components/forms/input-with-dropdown.module.css
index 2e86907ff3..1a0b821b55 100644
--- a/frontends/web/src/components/forms/input-with-dropdown.module.css
+++ b/frontends/web/src/components/forms/input-with-dropdown.module.css
@@ -16,12 +16,12 @@ input.inputField {
     font-family: var(--font-family);
     font-size: var(--size-default);
     font-weight: 400;
-    height: 52px !important;
+    height: var(--input-height);
     padding: 0 var(--space-half);
     width: 100%;
     transition: border-color .2s ease-out;
     will-change: border-color;
-    padding-left: 50px;
+    padding-left: var(--input-qr-button);
     padding-right: 0;
 }
 
@@ -79,7 +79,7 @@ input.inputField::placeholder {
 .dropdown :global(.react-select__single-value) {
     color: var(--color-blue);
     display: flex;
-    font-size: 14px;
+    font-size: var(--size-small);
     justify-content: flex-end;
     max-width: 100%;
     overflow: hidden;
@@ -117,7 +117,7 @@ input.inputField::placeholder {
     border: 1px solid var(--background-quaternary);
     border-left: hidden;
     display: flex;
-    height: 52px;
+    height: var(--input-height);
     justify-content: center;
     padding-left: 0;
     transition: border-color .2s ease-out;
diff --git a/frontends/web/src/routes/account/send/coin-control.module.css b/frontends/web/src/routes/account/send/coin-control.module.css
new file mode 100644
index 0000000000..59bc2de0a4
--- /dev/null
+++ b/frontends/web/src/routes/account/send/coin-control.module.css
@@ -0,0 +1,6 @@
+.coinControlButton {
+    font-size: var(--size-subheader);
+    min-height: 0;
+    padding-left: 0;
+    padding-right: 0;
+}
diff --git a/frontends/web/src/routes/account/send/coin-control.tsx b/frontends/web/src/routes/account/send/coin-control.tsx
index 48e124d13d..d369ff9aba 100644
--- a/frontends/web/src/routes/account/send/coin-control.tsx
+++ b/frontends/web/src/routes/account/send/coin-control.tsx
@@ -21,6 +21,7 @@ import { getConfig } from '@/utils/config';
 import { Button } from '@/components/forms';
 import { TSelectedUTXOs, UTXOs } from './utxos';
 import { isBitcoinBased } from '../utils';
+import style from './coin-control.module.css';
 
 type TProps = {
   account: TAccount;
@@ -68,7 +69,7 @@ export const CoinControl = ({
         }}
         onChange={onSelectedUTXOsChange} />
       <Button
-        className="m-bottom-quarter p-right-none"
+        className={style.coinControlButton}
         transparent
         onClick={() => {
           setShowUTXODialog(showUTXODialog => !showUTXODialog);
diff --git a/frontends/web/src/routes/account/send/components/confirm/confirm.module.css b/frontends/web/src/routes/account/send/components/confirm/confirm.module.css
index 9ac78c054b..241e13f417 100644
--- a/frontends/web/src/routes/account/send/components/confirm/confirm.module.css
+++ b/frontends/web/src/routes/account/send/components/confirm/confirm.module.css
@@ -10,6 +10,7 @@
 .confirmationItemWrapper {
   align-items: baseline;
   display: flex;
+  flex-wrap: wrap;
   justify-content: space-between;
 }
 
@@ -29,6 +30,7 @@
 }
 
 .confirmItem p {
+  flex-grow: 1;
   margin: 0;
   word-break: break-all;
 }
@@ -60,6 +62,7 @@
 .totalWrapper {
   align-items: baseline;
   display: flex;
+  flex-wrap: wrap;
 }
 
 .totalWrapper .totalFiatValue {
diff --git a/frontends/web/src/routes/account/send/components/confirm/confirm.tsx b/frontends/web/src/routes/account/send/components/confirm/confirm.tsx
index 2c357e9e0e..177e755a61 100644
--- a/frontends/web/src/routes/account/send/components/confirm/confirm.tsx
+++ b/frontends/web/src/routes/account/send/components/confirm/confirm.tsx
@@ -158,7 +158,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}
 
diff --git a/frontends/web/src/routes/account/send/components/inputs/receiver-address-input.module.css b/frontends/web/src/routes/account/send/components/inputs/receiver-address-input.module.css
index ed48c5ca7d..ba288cc204 100644
--- a/frontends/web/src/routes/account/send/components/inputs/receiver-address-input.module.css
+++ b/frontends/web/src/routes/account/send/components/inputs/receiver-address-input.module.css
@@ -28,19 +28,15 @@
   cursor: pointer;
   display: flex;
   height: var(--input-height);
-  justify-content: center;
+  justify-content: flex-start;
   padding: 0;
   position: absolute;
-  right: 0.75rem;
-  width: 36px;
+  left: 0;
+  width: var(--input-qr-button);
 }
 
 .qrButton img {
-  width: 1.8rem;
-  height: 1.8rem;
+  height: var(--size-subheader);
+  margin-left: var(--space-half);
+  width: var(--size-subheader);
 }
-
-.withDropdown {
-  left: 8px;
-  margin-top: 3px;
-}
\ No newline at end of file
diff --git a/frontends/web/src/routes/account/send/send.module.css b/frontends/web/src/routes/account/send/send.module.css
index a783378e58..3087b580da 100644
--- a/frontends/web/src/routes/account/send/send.module.css
+++ b/frontends/web/src/routes/account/send/send.module.css
@@ -1,10 +1,30 @@
-.container {
-    margin-top: calc(var(--space-default) * 1.5);
+.sendHeader {
+    align-content: baseline;
+    color: var(--color-secondary);
+    display: flex;
+    flex-direction: row;
+    flex-wrap: wrap;
+    font-size: var(--size-subheader);
+    gap: var(--space-half);
+    justify-content: space-between;
+    margin-bottom: var(--space-quarter);
 }
 
-.coinControlButtonContainer {
-    height: 58px;
+.subTitle {
+    font-size: var(--size-subheader);
+    font-weight: normal;
     margin-bottom: var(--space-quarter);
+    margin-top: 0;
+}
+
+@media (min-width: 769px) {
+    .sendHeader {
+        margin-top: 0;
+    }
+}
+
+.availableBalance {
+    flex-basis: 100%;
 }
 
 .unit {
diff --git a/frontends/web/src/routes/account/send/send.tsx b/frontends/web/src/routes/account/send/send.tsx
index 139208b408..54baf50bdd 100644
--- a/frontends/web/src/routes/account/send/send.tsx
+++ b/frontends/web/src/routes/account/send/send.tsx
@@ -380,19 +380,21 @@ export const Send = ({
           </Header>
           <View>
             <ViewContent>
-              <div>
-                <label className="labelXLarge">{t('send.availableBalance')}</label>
-              </div>
-              <Balance balance={balance} noRotateFiat/>
-              <div className={`flex flex-row flex-between ${style.container || ''}`}>
-                <label className="labelXLarge">{t('send.transactionDetails')}</label>
-                <div className={style.coinControlButtonContainer}>
-                  <CoinControl
-                    account={account}
-                    onSelectedUTXOsChange={handleSelectedUTXOsChange}
-                    onCoinControlDialogActiveChange={setUtxoDialogActive}
-                  />
+              <div className={style.sendHeader}>
+                <div className={style.availableBalance}>
+                  <h2 className={style.subTitle}>
+                    {t('send.availableBalance')}
+                  </h2>
+                  <Balance balance={balance} noRotateFiat/>
                 </div>
+                <h2 className={style.subTitle}>
+                  {t('send.transactionDetails')}
+                </h2>
+                <CoinControl
+                  account={account}
+                  onSelectedUTXOsChange={handleSelectedUTXOsChange}
+                  onCoinControlDialogActiveChange={setUtxoDialogActive}
+                />
               </div>
               <Grid col="1">
                 <Column>
diff --git a/frontends/web/src/routes/account/send/utxos.module.css b/frontends/web/src/routes/account/send/utxos.module.css
index 2022ce08dc..ace83a8973 100644
--- a/frontends/web/src/routes/account/send/utxos.module.css
+++ b/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);
 }
diff --git a/frontends/web/src/style/variables.css b/frontends/web/src/style/variables.css
index 5efbe40c1c..36ebf6bcae 100644
--- a/frontends/web/src/style/variables.css
+++ b/frontends/web/src/style/variables.css
@@ -93,6 +93,7 @@
     --border-width: 0.1rem;
     --button-height: min(5rem, 70px);
     --input-height: min(5.2rem, 72px);
+    --input-qr-button: min(4.2rem, 60px);
 }
 
 :root,

From b11545de1bb0c7051c71bbebe785be94a937de8b Mon Sep 17 00:00:00 2001
From: thisconnect <this@shiftcrypto.ch>
Date: Tue, 18 Nov 2025 20:43:20 +0100
Subject: [PATCH 24/31] frontend: account-overview refactoring

Updated account-overview styling so it aligns with changes from the
last commit (send). Changed header styling, so that the title and
balance positioning match between account and send view.
---
 .../components/transactions/transaction.module.css  |  9 +++++++--
 frontends/web/src/routes/account/account.module.css | 13 +++++++++++--
 frontends/web/src/routes/account/account.tsx        |  4 ++--
 frontends/web/src/style/forms.css                   | 11 -----------
 4 files changed, 20 insertions(+), 17 deletions(-)

diff --git a/frontends/web/src/components/transactions/transaction.module.css b/frontends/web/src/components/transactions/transaction.module.css
index b883589fde..f720aff729 100644
--- a/frontends/web/src/components/transactions/transaction.module.css
+++ b/frontends/web/src/components/transactions/transaction.module.css
@@ -65,6 +65,11 @@
   text-align: right;
   white-space: nowrap;
 }
+@media (max-width: 768px) {
+  .txAmountsColumn {
+    padding-right: var(--space-half);
+  }
+}
 @media (max-width: 560px) {
   .txAmountsColumn {
     flex-shrink: 1;
@@ -73,9 +78,9 @@
     padding-left: 24px;
   }
 }
-@media (max-width: 768px) {
+@media (max-width: 425px) {
   .txAmountsColumn {
-    padding-right: var(--space-half);
+    padding-left: 12px;
   }
 }
 
diff --git a/frontends/web/src/routes/account/account.module.css b/frontends/web/src/routes/account/account.module.css
index a81079fda6..4f6a6e860a 100644
--- a/frontends/web/src/routes/account/account.module.css
+++ b/frontends/web/src/routes/account/account.module.css
@@ -45,12 +45,20 @@
     }
 }
 
+.subTitle {
+    font-size: var(--size-subheader);
+    font-weight: normal;
+    margin-bottom: var(--space-quarter);
+    margin-top: 0;
+}
+
 .balanceHeader {
-    align-items: center;
+    align-items: flex-start;
     display: flex;
     flex-direction: row;
     flex-wrap: wrap;
     margin-bottom: var(--space-half);
+    min-height: var(--button-height);
 }
 
 .actionsContainer {
@@ -60,7 +68,7 @@
     flex-wrap: nowrap;
     gap: var(--space-quarter);
     justify-content: flex-end;
-    margin-top: var(--space-half);
+    margin-top: 0;
     padding-bottom: 0;
 }
 
@@ -127,6 +135,7 @@
     .actionsContainer {
         justify-content: center;
         margin-bottom: var(--space-half);
+        margin-top: var(--space-half);
         padding-bottom: 0;
         width: 100%;
     }
diff --git a/frontends/web/src/routes/account/account.tsx b/frontends/web/src/routes/account/account.tsx
index e1e6345326..c4f427f89b 100644
--- a/frontends/web/src/routes/account/account.tsx
+++ b/frontends/web/src/routes/account/account.tsx
@@ -258,9 +258,9 @@ const RemountAccount = ({
           )}
           <View>
             <ViewHeader>
-              <label className="labelXLarge">
+              <SubTitle className={style.subTitle}>
                 {t('accountSummary.availableBalance')}
-              </label>
+              </SubTitle>
               <div className={style.balanceHeader}>
                 <Balance balance={balance} />
                 {!isAccountEmpty && <ActionButtons {...actionButtonsProps} />}
diff --git a/frontends/web/src/style/forms.css b/frontends/web/src/style/forms.css
index 8bda1d1a82..0999e5a917 100644
--- a/frontends/web/src/style/forms.css
+++ b/frontends/web/src/style/forms.css
@@ -20,11 +20,6 @@ label {
     margin-bottom: var(--space-quarter);
 }
 
-.labelXLarge {
-    font-size: var(--size-subheader);
-    margin-bottom: calc(var(--space-half) * 1.5);
-}
-
 input:invalid,
 input:invalid:focus {
     border-color: var(--color-error);
@@ -48,9 +43,3 @@ input[type="checkbox"]:focus + label::before {
     outline-style: auto;
     outline-width: 4px;
 }
-
-@media (max-width: 768px) {
-    .labelXLarge {
-        margin-bottom: var(--space-half);
-    }
-}
\ No newline at end of file

From 11beebeaa4a96fcde88c6d36b3f02742e6f8715a Mon Sep 17 00:00:00 2001
From: thisconnect <this@shiftcrypto.ch>
Date: Wed, 12 Nov 2025 11:11:03 +0100
Subject: [PATCH 25/31] frontend: cleanup and remove unused icons and css

---
 .../web/src/components/icon/icon.module.css   |  5 --
 frontends/web/src/components/icon/icon.tsx    | 48 -------------------
 2 files changed, 53 deletions(-)
 delete mode 100644 frontends/web/src/components/icon/icon.module.css

diff --git a/frontends/web/src/components/icon/icon.module.css b/frontends/web/src/components/icon/icon.module.css
deleted file mode 100644
index 1caed53d7c..0000000000
--- a/frontends/web/src/components/icon/icon.module.css
+++ /dev/null
@@ -1,5 +0,0 @@
-.expandIcon {
-    stroke: var(--color-gray);
-    width: 18px;
-    height: 18px;
-}
diff --git a/frontends/web/src/components/icon/icon.tsx b/frontends/web/src/components/icon/icon.tsx
index 5c53ba3047..37e842acb2 100644
--- a/frontends/web/src/components/icon/icon.tsx
+++ b/frontends/web/src/components/icon/icon.tsx
@@ -98,44 +98,6 @@ import statusSuccessSVG from './assets/icons/icon-success.svg';
 import statusWarningSVG from './assets/icons/icon-warning.svg';
 import statusErrorSVG from './assets/icons/icon-error.svg';
 import plusSVG from './assets/icons/plus.svg';
-import style from './icon.module.css';
-
-export const ExpandOpen = () => (
-  <svg
-    className={style.expandIcon}
-    xmlns="http://www.w3.org/2000/svg"
-    width="24"
-    height="24"
-    viewBox="0 0 24 24"
-    fill="none"
-    stroke="currentColor"
-    strokeWidth="2"
-    strokeLinecap="round"
-    strokeLinejoin="round">
-    <circle cx="11" cy="11" r="8"></circle>
-    <line x1="21" y1="21" x2="16.65" y2="16.65"></line>
-    <line x1="11" y1="8" x2="11" y2="14"></line>
-    <line x1="8" y1="11" x2="14" y2="11"></line>
-  </svg>
-);
-
-export const ExpandClose = () => (
-  <svg
-    className={style.expandIcon}
-    xmlns="http://www.w3.org/2000/svg"
-    width="24"
-    height="24"
-    viewBox="0 0 24 24"
-    fill="none"
-    stroke="currentColor"
-    strokeWidth="2"
-    strokeLinecap="round"
-    strokeLinejoin="round">
-    <circle cx="11" cy="11" r="8"></circle>
-    <line x1="21" y1="21" x2="16.65" y2="16.65"></line>
-    <line x1="8" y1="11" x2="14" y2="11"></line>
-  </svg>
-);
 
 type SVGProps = JSX.IntrinsicElements['svg'];
 
@@ -152,16 +114,6 @@ export const CaretDown = ({ className, ...props }: SVGProps) => (
   </svg>
 );
 
-type ExpandIconProps = {
-  expand: boolean;
-};
-
-export const ExpandIcon = ({
-  expand = true,
-}: ExpandIconProps) => (
-  expand ? <ExpandOpen /> : <ExpandClose />
-);
-
 type ImgProps = JSX.IntrinsicElements['img'];
 
 export const Abort = (props: ImgProps) => (<img src={abortSVG} draggable={false} {...props} />);

From b8ca4548c6ec63ee8c13b9b9764f1090cd3c1c4e Mon Sep 17 00:00:00 2001
From: thisconnect <this@shiftcrypto.ch>
Date: Thu, 13 Nov 2025 12:59:48 +0100
Subject: [PATCH 26/31] frontend: optimize setup workflow in responsive mode

---
 frontends/web/src/components/icon/combined.module.css  |  2 +-
 .../web/src/routes/device/bitbox02/setup/name.tsx      |  5 ++++-
 .../web/src/routes/device/bitbox02/setup/pairing.tsx   |  5 ++++-
 .../web/src/routes/device/bitbox02/setup/password.tsx  |  5 ++++-
 .../web/src/routes/device/bitbox02/setup/restore.tsx   |  5 ++++-
 .../web/src/routes/device/bitbox02/setup/success.tsx   | 10 ++++++++--
 frontends/web/src/style/base.css                       |  2 +-
 7 files changed, 26 insertions(+), 8 deletions(-)

diff --git a/frontends/web/src/components/icon/combined.module.css b/frontends/web/src/components/icon/combined.module.css
index d1eac139ea..11a9552b31 100644
--- a/frontends/web/src/components/icon/combined.module.css
+++ b/frontends/web/src/components/icon/combined.module.css
@@ -9,7 +9,7 @@
 
 .bitbox02 {
     display: inline-block;
-    max-width: 264px;
+    max-width: min(264px, 80%);
     position: relative;
     right: -16px;
 }
diff --git a/frontends/web/src/routes/device/bitbox02/setup/name.tsx b/frontends/web/src/routes/device/bitbox02/setup/name.tsx
index 067e891e57..8ae623833a 100644
--- a/frontends/web/src/routes/device/bitbox02/setup/name.tsx
+++ b/frontends/web/src/routes/device/bitbox02/setup/name.tsx
@@ -54,7 +54,10 @@ export const SetDeviceName = ({
         withBottomBar
         verticallyCentered
         width="600px">
-        <ViewHeader title={t('bitbox02Wizard.stepCreate.title')}>
+        <ViewHeader
+          small
+          title={t('bitbox02Wizard.stepCreate.title')}
+        >
           <p>{t('bitbox02Wizard.stepCreate.description')}</p>
           {missingSDCardWarning && (
             <Message className="m-bottom-half" type="warning">
diff --git a/frontends/web/src/routes/device/bitbox02/setup/pairing.tsx b/frontends/web/src/routes/device/bitbox02/setup/pairing.tsx
index 2b45ad1f61..7377e823d3 100644
--- a/frontends/web/src/routes/device/bitbox02/setup/pairing.tsx
+++ b/frontends/web/src/routes/device/bitbox02/setup/pairing.tsx
@@ -60,7 +60,10 @@ export const Pairing = ({
       verticallyCentered
       withBottomBar
       width="670px">
-      <ViewHeader title={t('bitbox02Wizard.pairing.title')}>
+      <ViewHeader
+        small
+        title={t('bitbox02Wizard.pairing.title')}
+      >
         { pairingFailed ? (
           <Message key="pairingFailed" type="warning">
             {t('bitbox02Wizard.pairing.failed')}
diff --git a/frontends/web/src/routes/device/bitbox02/setup/password.tsx b/frontends/web/src/routes/device/bitbox02/setup/password.tsx
index 90fe016182..48affed45c 100644
--- a/frontends/web/src/routes/device/bitbox02/setup/password.tsx
+++ b/frontends/web/src/routes/device/bitbox02/setup/password.tsx
@@ -65,7 +65,10 @@ export const SetPasswordWithBackup = ({
       verticallyCentered
       withBottomBar
       width="700px">
-      <ViewHeader title={t('backup.restore.confirmTitle')}>
+      <ViewHeader
+        small
+        title={t('backup.restore.confirmTitle')}
+      >
         { forBackup ? (
           <div>
             <MultilineMarkup tagName="div" markup={t('backup.restore.selectedBackup', {
diff --git a/frontends/web/src/routes/device/bitbox02/setup/restore.tsx b/frontends/web/src/routes/device/bitbox02/setup/restore.tsx
index eaac7ddc6b..5aef6050e9 100644
--- a/frontends/web/src/routes/device/bitbox02/setup/restore.tsx
+++ b/frontends/web/src/routes/device/bitbox02/setup/restore.tsx
@@ -41,7 +41,10 @@ export const RestoreFromSDCardBackup = ({
       verticallyCentered
       withBottomBar
       width="700px">
-      <ViewHeader title={t('backup.restore.confirmTitle')} />
+      <ViewHeader
+        small
+        title={t('backup.restore.confirmTitle')}
+      />
       <ViewContent>
         <BackupsV2
           deviceID={deviceID}
diff --git a/frontends/web/src/routes/device/bitbox02/setup/success.tsx b/frontends/web/src/routes/device/bitbox02/setup/success.tsx
index 8680ffd064..6ff5b023d4 100644
--- a/frontends/web/src/routes/device/bitbox02/setup/success.tsx
+++ b/frontends/web/src/routes/device/bitbox02/setup/success.tsx
@@ -66,7 +66,10 @@ export const RestoreFromSDCardSuccess = ({ onContinue }: TProps) => {
       verticallyCentered
       withBottomBar
       width="700px">
-      <ViewHeader title={t('bitbox02Wizard.stepBackupSuccess.title')} />
+      <ViewHeader
+        small
+        title={t('bitbox02Wizard.stepBackupSuccess.title')}
+      />
       <ViewContent textAlign="left">
         <p>
           {t('bitbox02Wizard.stepCreateSuccess.removeMicroSD')}
@@ -100,7 +103,10 @@ export const RestoreFromMnemonicSuccess = ({ onContinue }: TProps) => {
       verticallyCentered
       withBottomBar
       width="700px">
-      <ViewHeader title={t('bitbox02Wizard.stepBackupSuccess.title')} />
+      <ViewHeader
+        small
+        title={t('bitbox02Wizard.stepBackupSuccess.title')}
+      />
       <ViewContent textAlign="left">
         <p className="m-bottom-default">
           {t('bitbox02Wizard.stepBackupSuccess.fundsSafe')}
diff --git a/frontends/web/src/style/base.css b/frontends/web/src/style/base.css
index e1a38d5d7b..ef6c20e348 100644
--- a/frontends/web/src/style/base.css
+++ b/frontends/web/src/style/base.css
@@ -104,7 +104,7 @@ pre {
     background-color: var(--background-secondary);
     display: block;
     font-family: monospace;
-    font-size: 2rem;
+    font-size: var(--size-default);
     margin: 0 0 var(--space-default) 0;
     padding: var(--space-default);
     text-align: center;

From ef219a5a6f98dbed02674e81a8bb1aa3ac280408 Mon Sep 17 00:00:00 2001
From: thisconnect <this@shiftcrypto.ch>
Date: Thu, 13 Nov 2025 13:31:26 +0100
Subject: [PATCH 27/31] frontend: improve waitign view in responsive mode

---
 .../settingsButton/outlined-settings-button.module.css        | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/frontends/web/src/components/settingsButton/outlined-settings-button.module.css b/frontends/web/src/components/settingsButton/outlined-settings-button.module.css
index f21cacf8df..e8ad54bf51 100644
--- a/frontends/web/src/components/settingsButton/outlined-settings-button.module.css
+++ b/frontends/web/src/components/settingsButton/outlined-settings-button.module.css
@@ -7,6 +7,6 @@
 }
 
 .button img {
-    width: 22px;
-    height: 22px;
+    height: var(--size-default);
+    width: var(--size-default);
 }

From bf8c9ac180125d62948818a4cb13c2a07e08bace Mon Sep 17 00:00:00 2001
From: thisconnect <this@shiftcrypto.ch>
Date: Thu, 13 Nov 2025 14:31:57 +0100
Subject: [PATCH 28/31] frontend: improve bitsurance in responsive mode

---
 .../account/components/insuredtag.module.css  | 23 +++++++++----------
 .../routes/bitsurance/dashboard.module.css    | 11 ++++++++-
 .../web/src/routes/bitsurance/dashboard.tsx   | 14 +++++------
 3 files changed, 28 insertions(+), 20 deletions(-)

diff --git a/frontends/web/src/routes/account/components/insuredtag.module.css b/frontends/web/src/routes/account/components/insuredtag.module.css
index 8d5e5e4e1f..a59ae6bc0c 100644
--- a/frontends/web/src/routes/account/components/insuredtag.module.css
+++ b/frontends/web/src/routes/account/components/insuredtag.module.css
@@ -1,16 +1,15 @@
 .insured {
-    padding: 4px 10px;
-    border-radius: var(--space-half);
-    border: 1px solid;
-    font-size: var(--size-smaller);
-    line-height: 14px;
-    background: var(--color-palegreen);
-    border-color: var(--color-lightgreen);
-    color: var(--color-darkgreen);
-    margin: 0px 10px;
-    text-decoration: none;
-    white-space: nowrap;
-    max-height: 24px;
+  background: var(--color-palegreen);
+  border-radius: var(--space-half);
+  border: 1px solid;
+  border-color: var(--color-lightgreen);
+  color: var(--color-darkgreen);
+  font-size: var(--size-smaller);
+  margin: 0px 10px;
+  max-height: 2.4rem;
+  padding: .4rem 10px;
+  text-decoration: none;
+  white-space: nowrap;
 }
 
 .insured div {
diff --git a/frontends/web/src/routes/bitsurance/dashboard.module.css b/frontends/web/src/routes/bitsurance/dashboard.module.css
index 2a3229782c..0aa9f83068 100644
--- a/frontends/web/src/routes/bitsurance/dashboard.module.css
+++ b/frontends/web/src/routes/bitsurance/dashboard.module.css
@@ -16,7 +16,6 @@
 
 .button {
   font-size: var(--size-default);
-  height: calc(var(--space-default) + var(--space-quarter));
   padding: 0 24px;
 }
 
@@ -26,6 +25,16 @@
   margin-right: var(--space-quarter);
 }
 
+.externalLink {
+  align-items: baseline;
+  display: flex;
+}
+
+.externalLink img {
+  max-height: var(--size-default);
+  max-width: var(--size-default);
+}
+
 .coverageContainer {
   margin: var(--space-half) 0;
 }
diff --git a/frontends/web/src/routes/bitsurance/dashboard.tsx b/frontends/web/src/routes/bitsurance/dashboard.tsx
index e8c59662cd..5070a838d7 100644
--- a/frontends/web/src/routes/bitsurance/dashboard.tsx
+++ b/frontends/web/src/routes/bitsurance/dashboard.tsx
@@ -50,16 +50,16 @@ type TInsurancesByCode = {
 const AccountStatusIcon = ({ status }: TAccountStatusIconProps) => {
   switch (status) {
   case 'active':
-    return <GreenDot width={14} height={20} />;
+    return <GreenDot width={14}/>;
   case 'processing':
   case 'waitpayment':
-    return <YellowDot width={14} height={20} />;
+    return <YellowDot width={14}/>;
   case 'refused':
-    return <RedDot width={14} height={20} />;
+    return <RedDot width={14}/>;
   case 'inactive':
-    return <OrangeDot width={14} height={20} />;
+    return <OrangeDot width={14}/>;
   case 'canceled':
-    return <RedDot width={14} height={20} />;
+    return <RedDot width={14}/>;
   }
 };
 
@@ -200,8 +200,8 @@ export const BitsuranceDashboard = ({ accounts }: TProps) => {
                                   className={`${style.text || ''} ${style.link || ''} m-top-quarter-on-small`}
                                   href={insurance.details.support}
                                 >
-                                  <div className="flex">
-                                    <ExternalLink width={16} />
+                                  <div className={style.externalLink}>
+                                    <ExternalLink />
                                     <span className="m-left-quarter">
                                       {t('bitsurance.dashboard.supportLink')}
                                     </span>

From b8904eddf2f67cbe0ece0188dc029070261aca42 Mon Sep 17 00:00:00 2001
From: thisconnect <this@shiftcrypto.ch>
Date: Mon, 17 Nov 2025 14:29:23 +0100
Subject: [PATCH 29/31] frontend: make copy component responsive and simplify
 styles

The copy component should grow to improve accessibility.

Also removed utility classes in favor of already exsting container
class.
---
 frontends/web/src/components/copy/Copy.module.css | 11 +++++++----
 frontends/web/src/components/copy/Copy.tsx        |  1 -
 frontends/web/src/style/layout.css                |  1 -
 3 files changed, 7 insertions(+), 6 deletions(-)

diff --git a/frontends/web/src/components/copy/Copy.module.css b/frontends/web/src/components/copy/Copy.module.css
index e5b00911fd..ebfa3e8f29 100644
--- a/frontends/web/src/components/copy/Copy.module.css
+++ b/frontends/web/src/components/copy/Copy.module.css
@@ -6,21 +6,20 @@
     cursor: pointer;
     display: flex;
     flex-direction: row;
-    height: 18px;
+    height: var(--size-default);
     justify-content: center;
     margin-top: var(--spacing-half);
-    min-width: 18px !important;
+    max-width: var(--size-default);
     padding: 0;
     position: absolute;
     right: var(--spacing-default);
     top: 10px;
     transition: background-color ease 0.2s;
-    width: 18px;
     will-change: background-color;
 }
 
 .button img {
-    width: 18px;
+    height: var(--size-default);
 }
 
 .button:focus {
@@ -36,6 +35,10 @@
 }
 
 .container {
+    align-items: flex-start;
+    display: flex;
+    flex-direction: row;
+    justify-content: flex-start;
     position: relative;
 }
 
diff --git a/frontends/web/src/components/copy/Copy.tsx b/frontends/web/src/components/copy/Copy.tsx
index 4cc9c223ae..6914bb2a74 100644
--- a/frontends/web/src/components/copy/Copy.tsx
+++ b/frontends/web/src/components/copy/Copy.tsx
@@ -92,7 +92,6 @@ export const CopyableInput = ({
 
   return (
     <div className={[
-      'flex flex-row flex-start flex-items-start',
       style.container,
       className ? className : ''
     ].join(' ')}>
diff --git a/frontends/web/src/style/layout.css b/frontends/web/src/style/layout.css
index 0b3b09a5db..0256d67a78 100644
--- a/frontends/web/src/style/layout.css
+++ b/frontends/web/src/style/layout.css
@@ -8,7 +8,6 @@
 .flex-end { justify-content: flex-end; }
 .flex-items-center { align-items: center; }
 .flex-items-baseline { align-items: baseline; }
-.flex-items-start { align-items: flex-start; }
 .flex-items-end { align-items: flex-end; }
 .flex-items-stretch { align-items: stretch; }
 .flex-wrap { flex-wrap: wrap; }

From 11016f5cb5d453aacb982698863482a9da237137 Mon Sep 17 00:00:00 2001
From: thisconnect <this@shiftcrypto.ch>
Date: Mon, 17 Nov 2025 14:30:16 +0100
Subject: [PATCH 30/31] frontend: make transaction-detail dialog reponsive

---
 .../components/details.module.css             |  2 +-
 .../tx-detail-dialog.module.css               | 31 +++++++++++++------
 .../tx-detail-dialog/tx-detail-dialog.tsx     |  7 +++--
 3 files changed, 27 insertions(+), 13 deletions(-)

diff --git a/frontends/web/src/components/transactions/components/details.module.css b/frontends/web/src/components/transactions/components/details.module.css
index fb041d2beb..0baecc6ad9 100644
--- a/frontends/web/src/components/transactions/components/details.module.css
+++ b/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;
diff --git a/frontends/web/src/components/transactions/components/tx-detail-dialog/tx-detail-dialog.module.css b/frontends/web/src/components/transactions/components/tx-detail-dialog/tx-detail-dialog.module.css
index 860daa54a1..1b792d25f0 100644
--- a/frontends/web/src/components/transactions/components/tx-detail-dialog/tx-detail-dialog.module.css
+++ b/frontends/web/src/components/transactions/components/tx-detail-dialog/tx-detail-dialog.module.css
@@ -4,14 +4,19 @@
 
 .label {
     color: var(--color-default);
-    font-size: 14px;
+    font-size: var(--size-small);
     font-weight: 600;
     margin: 0;
 }
 
+.nowrap {
+    flex-shrink: 0;
+}
+
 .row {
     align-items: center;
     display: flex;
+    flex-wrap: wrap;
     justify-content: space-between;
 }
 
@@ -28,7 +33,7 @@
 .detailAddress {
     padding: 0;
     margin: 0;
-    height: 20px;
+    height: 2rem;
 }
 
 .container {
@@ -51,26 +56,26 @@
 }
 
 .amount {
-    font-size: 24px;
+    font-size: var(--size-header);
     margin: var(--space-quarter) 0;
-    font-weight: 600;
 }
 
 .headerAmountUnit {
-    font-size: 21px;
+    font-size: var(--size-subheader);
 }
 
 .headerFiatUnit {
-    font-size: 16px;
+    font-size: var(--size-small);
 }
 
 .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%;
@@ -92,7 +97,7 @@
 .amountFiat {
     align-items: center;
     display: flex;
-    font-size: 18px;
+    font-size: var(--size-subheader);
     margin-bottom: var(--space-quarter);
 }
 
@@ -114,13 +119,13 @@
 
 .note {
     margin: 0;
-    height: 20px;
     width: 85%;
 }
 
 .note input {
     border: none;
-    height: 20px;
+    height: auto;
+    min-height: 20px;
     padding: 0;
 }
 
@@ -128,12 +133,14 @@
     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;
@@ -162,6 +169,10 @@
     text-decoration: none;
 }
 
+.explorerLink img {
+    max-height: var(--size-default);
+}
+
 .addressOrTxIdContainer {
     display: flex;
     flex-direction: column;
diff --git a/frontends/web/src/components/transactions/components/tx-detail-dialog/tx-detail-dialog.tsx b/frontends/web/src/components/transactions/components/tx-detail-dialog/tx-detail-dialog.tsx
index eeeefbc964..94649d83d6 100644
--- a/frontends/web/src/components/transactions/components/tx-detail-dialog/tx-detail-dialog.tsx
+++ b/frontends/web/src/components/transactions/components/tx-detail-dialog/tx-detail-dialog.tsx
@@ -155,7 +155,10 @@ export const TxDetailsDialog = ({
 
           {/* tx id */}
           <TxDetailRow>
-            <p className={styles.label}>{t('transaction.explorer')}</p>
+            <p className={`
+              ${styles.label || ''}
+              ${styles.nowrap || ''}
+            `}>{t('transaction.explorer')}</p>
             <AddressOrTxId values={[transactionInfo.internalID]} />
           </TxDetailRow>
 
@@ -167,7 +170,7 @@ export const TxDetailsDialog = ({
               className={styles.explorerLink}
               href={explorerURL + transactionInfo.txID}
               title={`${t('transaction.explorerTitle')}\n${explorerURL}${transactionInfo.txID}`}>
-              <ExternalLink width={14} />
+              <ExternalLink />
               {' '}
               {t('transaction.explorerTitle')}
             </A>

From c6bc661ae418d8c03a334b7c804b0f2e8e0c190e Mon Sep 17 00:00:00 2001
From: thisconnect <this@shiftcrypto.ch>
Date: Wed, 19 Nov 2025 00:28:04 +0100
Subject: [PATCH 31/31] frontend: refactore balance and amount-with-unit
 components

---
 .../amount/amount-with-unit.module.css        | 22 ++++++++---
 .../components/amount/amount-with-unit.tsx    | 38 +++++++------------
 .../src/components/amount/amount.module.css   |  9 +++++
 .../amount/conversion-amount.module.css       |  1 +
 .../src/components/balance/balance.module.css | 29 ++++++--------
 .../web/src/components/balance/balance.tsx    | 30 +++++++--------
 .../src/routes/account/send/send.module.css   |  3 +-
 .../web/src/routes/account/send/send.tsx      |  9 +++--
 .../src/routes/account/send/utxos.module.css  | 11 +++++-
 .../web/src/routes/account/send/utxos.tsx     |  2 +-
 .../summary/accountssummary.module.css        |  6 ++-
 .../routes/accounts/all-accounts.module.css   | 31 ++++++++++-----
 .../web/src/routes/accounts/all-accounts.tsx  |  2 +-
 13 files changed, 109 insertions(+), 84 deletions(-)

diff --git a/frontends/web/src/components/amount/amount-with-unit.module.css b/frontends/web/src/components/amount/amount-with-unit.module.css
index 35f1428f14..885372a5ce 100644
--- a/frontends/web/src/components/amount/amount-with-unit.module.css
+++ b/frontends/web/src/components/amount/amount-with-unit.module.css
@@ -7,6 +7,8 @@
 
 .unit {
   font-weight: 400;
+  flex-grow: 0;
+  flex-shrink: 0;
   color: var(--color-secondary);
   font-variant: normal;
   position: relative;
@@ -14,11 +16,24 @@
 }
 
 .availableFiatAmount {
+  align-items: baseline;
   color: var(--color-default);
-  padding-right: var(--space-quarter) !important;
+  display: inline-flex;
+  flex-grow: 0; /* all-accounts */
+  justify-content: flex-end; /* all-accounts */
+  justify-content: flex-start; /* account/send */
+  gap: 0.4ch;
   text-align: right;
 }
 
+.availableFiatAmount.textStart {
+  justify-content: flex-start; /* account/send */
+}
+
+.availableFiatAmount.textEnd {
+  justify-content: flex-end; /* all-accounts */
+}
+
 .rotatable {
   cursor: default;
   font-size: inherit;
@@ -42,9 +57,4 @@
   .fiatRow {
     bottom: 0;
   }
-
-  .availableFiatAmount,
-  .availableFiatUnit {
-    line-height: 24px;
-  }
 }
\ No newline at end of file
diff --git a/frontends/web/src/components/amount/amount-with-unit.tsx b/frontends/web/src/components/amount/amount-with-unit.tsx
index 603f1a6f56..ffe778a19a 100644
--- a/frontends/web/src/components/amount/amount-with-unit.tsx
+++ b/frontends/web/src/components/amount/amount-with-unit.tsx
@@ -24,7 +24,6 @@ import style from './amount-with-unit.module.css';
 
 type TAmountWithUnitProps = {
   amount: TAmountWithConversions | undefined;
-  tableRow?: boolean;
   enableRotateUnit?: boolean;
   sign?: string;
   alwaysShowAmounts?: boolean;
@@ -34,12 +33,11 @@ type TAmountWithUnitProps = {
 
 export const AmountWithUnit = ({
   amount,
-  tableRow,
   enableRotateUnit: rotateUnit,
   sign,
   convertToFiat,
   alwaysShowAmounts = false,
-  unitClassName = ''
+  unitClassName = '',
 }: TAmountWithUnitProps) => {
   const { rotateDefaultCurrency, defaultCurrency, rotateBtcUnit } = useContext(RatesContext);
 
@@ -64,35 +62,27 @@ export const AmountWithUnit = ({
   }
 
   const enableClick = rotateUnit && (convertToFiat || isBitcoinCoin(amount.unit));
-  const formattedAmount = !!displayedAmount ?
-    (
-      <Amount
-        alwaysShowAmounts={alwaysShowAmounts}
-        amount={displayedAmount}
-        unit={displayedUnit}
-        onMobileClick={enableClick ? onClick : undefined}
-      />
-    ) : '---';
-
-  const amountUnit = <AmountUnit unit={displayedUnit} rotateUnit={enableClick ? onClick : undefined} className={unitClassName}/>;
 
-  if (tableRow) {
-    return (
-      <tr className={style.fiatRow}>
-        <td className={style.availableFiatAmount}>{formattedAmount}</td>
-        <td>{amountUnit}</td>
-      </tr>
-    );
-  }
   return (
     <span className={`
       ${style.rates || ''}
+      ${style.availableFiatAmount || ''}
       ${!displayedAmount && style.notAvailable || ''}
     `.trim()}>
       {!!displayedAmount ? sign : ''}
-      {formattedAmount}
+      {!!displayedAmount ? (
+        <Amount
+          alwaysShowAmounts={alwaysShowAmounts}
+          amount={displayedAmount}
+          unit={displayedUnit}
+          onMobileClick={enableClick ? onClick : undefined}
+        />
+      ) : '---'}
       {' '}
-      {amountUnit}
+      <AmountUnit
+        unit={displayedUnit}
+        rotateUnit={enableClick ? onClick : undefined}
+        className={unitClassName}/>
     </span>
   );
 };
diff --git a/frontends/web/src/components/amount/amount.module.css b/frontends/web/src/components/amount/amount.module.css
index 67ac30fc00..3ba56b9c15 100644
--- a/frontends/web/src/components/amount/amount.module.css
+++ b/frontends/web/src/components/amount/amount.module.css
@@ -1,7 +1,16 @@
 .amount {
+    align-items: baseline;
+    display: inline-flex;
+    display: flow-root; /* all-account */
     flex-shrink: 1;
+    flex-basis: auto;
+    flex-grow: 0;
     font-variant: tabular-nums;
+    max-width: 100%;
+    /* max-width: calc(100% - 2ch); */
     overflow: hidden;
+    /* TODO: keep clip? */
+    /* overflow: clip; */
     text-overflow: ellipsis;
 }
 
diff --git a/frontends/web/src/components/amount/conversion-amount.module.css b/frontends/web/src/components/amount/conversion-amount.module.css
index ec24484d86..268aaf43ab 100644
--- a/frontends/web/src/components/amount/conversion-amount.module.css
+++ b/frontends/web/src/components/amount/conversion-amount.module.css
@@ -22,6 +22,7 @@
 .txConversionAmount .txUnit {
   font-size: var(--size-smaller);
   flex-shrink: 0;
+  max-width: 100%;
 }
 
 .txSmallInlineIcon img {
diff --git a/frontends/web/src/components/balance/balance.module.css b/frontends/web/src/components/balance/balance.module.css
index 1071d0f40f..724a013191 100644
--- a/frontends/web/src/components/balance/balance.module.css
+++ b/frontends/web/src/components/balance/balance.module.css
@@ -1,27 +1,22 @@
-.balanceTable {
+.balanceContainer {
+  margin-bottom: var(--space-half);
+  max-width: 100%;
+  /* min-height: var(--button-height); */
+}
+
+.balance {
   align-items: flex-end;
-  border-collapse: collapse;
-  border-spacing: 0;
   display: flex;
   flex-direction: row;
-  position: relative;
-}
-
-.balanceTable tr {
-  display: inline-block;
-  vertical-align: bottom;
-  padding-right: var(--space-half);
-}
-
-.balanceTable td {
+  flex-wrap: wrap;
   font-size: var(--size-large);
   font-weight: 400;
-  line-height: 1.2;
-  padding: 0;
-  vertical-align: baseline;
+  gap: var(--space-half);
+  line-height: 0.8125;
+  position: relative;
 }
 
-.balanceTable td:last-child {
+.unit {
   font-size: var(--size-default);
 }
 
diff --git a/frontends/web/src/components/balance/balance.tsx b/frontends/web/src/components/balance/balance.tsx
index 0e0d566586..af919e3a0b 100644
--- a/frontends/web/src/components/balance/balance.tsx
+++ b/frontends/web/src/components/balance/balance.tsx
@@ -39,22 +39,20 @@ export const Balance = ({
   }
 
   return (
-    <header className={style.balance}>
-      <table className={style.balanceTable}>
-        <tbody data-testid="availableBalance">
-          <AmountWithUnit
-            amount={balance.available}
-            tableRow
-            enableRotateUnit={!noRotateFiat}
-          />
-          <AmountWithUnit
-            amount={balance.available}
-            tableRow
-            enableRotateUnit={!noRotateFiat}
-            convertToFiat
-          />
-        </tbody>
-      </table>
+    <header className={style.balanceContainer}>
+      <div className={style.balance} data-testid="availableBalance">
+        <AmountWithUnit
+          amount={balance.available}
+          enableRotateUnit={!noRotateFiat}
+          unitClassName={style.unit}
+        />
+        <AmountWithUnit
+          amount={balance.available}
+          enableRotateUnit={!noRotateFiat}
+          unitClassName={style.unit}
+          convertToFiat
+        />
+      </div>
       {
         balance.hasIncoming && (
           <p className={style.pendingBalance}>
diff --git a/frontends/web/src/routes/account/send/send.module.css b/frontends/web/src/routes/account/send/send.module.css
index 3087b580da..93a9a8b43a 100644
--- a/frontends/web/src/routes/account/send/send.module.css
+++ b/frontends/web/src/routes/account/send/send.module.css
@@ -11,8 +11,6 @@
 }
 
 .subTitle {
-    font-size: var(--size-subheader);
-    font-weight: normal;
     margin-bottom: var(--space-quarter);
     margin-top: 0;
 }
@@ -25,6 +23,7 @@
 
 .availableBalance {
     flex-basis: 100%;
+    margin-bottom: var(--size-default);
 }
 
 .unit {
diff --git a/frontends/web/src/routes/account/send/send.tsx b/frontends/web/src/routes/account/send/send.tsx
index 54baf50bdd..c3352d96bb 100644
--- a/frontends/web/src/routes/account/send/send.tsx
+++ b/frontends/web/src/routes/account/send/send.tsx
@@ -43,6 +43,7 @@ import { FiatValue } from './components/fiat-value';
 import { TProposalError, txProposalErrorHandling } from './services';
 import { CoinControl } from './coin-control';
 import { connectKeystore } from '@/api/keystores';
+import { SubTitle } from '@/components/title';
 import style from './send.module.css';
 
 type TProps = {
@@ -382,14 +383,14 @@ export const Send = ({
             <ViewContent>
               <div className={style.sendHeader}>
                 <div className={style.availableBalance}>
-                  <h2 className={style.subTitle}>
+                  <SubTitle className={style.subTitle}>
                     {t('send.availableBalance')}
-                  </h2>
+                  </SubTitle>
                   <Balance balance={balance} noRotateFiat/>
                 </div>
-                <h2 className={style.subTitle}>
+                <SubTitle className={style.subTitle}>
                   {t('send.transactionDetails')}
-                </h2>
+                </SubTitle>
                 <CoinControl
                   account={account}
                   onSelectedUTXOsChange={handleSelectedUTXOsChange}
diff --git a/frontends/web/src/routes/account/send/utxos.module.css b/frontends/web/src/routes/account/send/utxos.module.css
index ace83a8973..2eb1a82452 100644
--- a/frontends/web/src/routes/account/send/utxos.module.css
+++ b/frontends/web/src/routes/account/send/utxos.module.css
@@ -1,3 +1,7 @@
+.utxoContainer {
+    color: var(--color-default);
+}
+
 .utxosList {
     list-style: none;
     padding: 0 0 var(--space-half) 0 !important;
@@ -49,12 +53,17 @@
 .amounts {
     display: flex;
     flex-wrap: wrap;
+    gap: var(--space-half);
     line-height: 1;
     padding-bottom: var(--space-quarter);
 }
 
 .amount {
-    margin-right: var(--space-quarter);
+    align-items: baseline;
+    display: flex;
+    flex-basis: auto;
+    gap: var(--space-eight);
+    margin-right: var(--sfpace-quarter);
 }
 
 .label,
diff --git a/frontends/web/src/routes/account/send/utxos.tsx b/frontends/web/src/routes/account/send/utxos.tsx
index 67e32b7e3c..1a4f2fee57 100644
--- a/frontends/web/src/routes/account/send/utxos.tsx
+++ b/frontends/web/src/routes/account/send/utxos.tsx
@@ -103,7 +103,7 @@ export const UTXOs = ({
       return null;
     }
     return (
-      <div key={'utxos-' + scriptType}>
+      <div className={style.utxoContainer} key={'utxos-' + scriptType}>
         <h2 className="subTitle">{ getScriptName(scriptType) }</h2>
         <ul className={style.utxosList}>
           { filteredUTXOs.map(utxo => (
diff --git a/frontends/web/src/routes/account/summary/accountssummary.module.css b/frontends/web/src/routes/account/summary/accountssummary.module.css
index ecbccf75c4..11a7ba6ead 100644
--- a/frontends/web/src/routes/account/summary/accountssummary.module.css
+++ b/frontends/web/src/routes/account/summary/accountssummary.module.css
@@ -76,11 +76,11 @@
     padding-left: calc(24px + var(--space-default));
 }
 
-.table tr td,
+/* .table tr td,
 .table tr td {
     font-size: var(--size-default) !important;
     line-height: 1.5714;
-}
+} */
 
 .table tbody td {
     background-color: var(--background-secondary);
@@ -91,6 +91,8 @@
 }
 
 .summaryTableBalance {
+    display: flex;
+    gap: var(--space-eight);
     white-space: nowrap;
 }
 
diff --git a/frontends/web/src/routes/accounts/all-accounts.module.css b/frontends/web/src/routes/accounts/all-accounts.module.css
index f8c8c44d6d..eb02d4436e 100644
--- a/frontends/web/src/routes/accounts/all-accounts.module.css
+++ b/frontends/web/src/routes/accounts/all-accounts.module.css
@@ -21,17 +21,16 @@
 }
 
 .accountItem {
-  display: flex;
   align-items: center;
-  text-decoration: none;
-  gap: 0;
+  display: flex;
   color: var(--color-text);
+  gap: var(--space-quarter);
+  text-decoration: none;
 }
 
 .accountIcon {
   display: block;
   flex: 0 0 auto;
-  margin-right: var(--space-quarter);
 }
 
 .accountIcon img {
@@ -39,11 +38,11 @@
 }
 
 .accountName {
-  flex-basis: auto;
-  flex-grow: 0;
+  flex-basis: 100%;
+  flex-grow: 1;
   flex-shrink: 1;
   margin: 0;
-  margin-right: var(--space-half);
+  margin-right: 0;
   overflow: hidden;
   text-overflow: ellipsis;
   white-space: nowrap;
@@ -53,20 +52,32 @@
   align-items: baseline;
   color: var(--color-secondary);
   display: flex;
-  flex-basis: auto;
-  flex-shrink: 0;
+  flex-shrink: 1;
   flex-grow: 1;
   font-size: var(--size-default);
   justify-content: flex-end;
   margin-left: auto;
+  max-width: 60%; /**/
   overflow: hidden;
+  overflow: clip;
+  padding-right: var(--space-quarter);
   text-align: right;
 }
 
+.accountBalanceContainer.textEnd {
+
+}
+
+.unit {
+  font-size: var(--size-smaller);
+}
+
 .chevron {
   color: var(--color-mediumgray);
   flex-shrink: 0;
-  margin-right: -8px;
+  margin-right: 0;
+  position: absolute;
+  right: var(--space-eight);
 }
 
 .chevron img {
diff --git a/frontends/web/src/routes/accounts/all-accounts.tsx b/frontends/web/src/routes/accounts/all-accounts.tsx
index 060189b7ab..a6f293f03e 100644
--- a/frontends/web/src/routes/accounts/all-accounts.tsx
+++ b/frontends/web/src/routes/accounts/all-accounts.tsx
@@ -74,7 +74,7 @@ const AccountItem = ({ account }: TAccountItemProp) => {
       </p>
 
       <div className={styles.accountBalanceContainer}>
-        <AmountWithUnit amount={balance} />
+        <AmountWithUnit amount={balance} unitClassName={styles.unit} />
       </div>
       <div className={styles.chevron}>
         <ChevronRightDark />