Frontend responsive fontsize android

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

frontends/web/src/components/actionable-item/actionable-item.module.css

@@ -1,5 +1,4 @@
 .container {
-  --size-default: 14px;
   align-items: center;
   background-color: var(--background-secondary);
   border: none;

frontends/web/src/components/amount/amount-with-unit.module.css

@@ -1,25 +1,39 @@
 .rates {
   cursor: default;
-  line-height: 1;
   margin: 0;
   max-width: 100%;
   white-space: nowrap;
 }
 
 .unit {
   font-weight: 400;
+  flex-grow: 0;
+  flex-shrink: 0;
   color: var(--color-secondary);
   font-variant: normal;
   position: relative;
   cursor: default;
 }
 
 .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;
@@ -43,9 +57,4 @@
   .fiatRow {
     bottom: 0;
   }
-
-  .availableFiatAmount,
-  .availableFiatUnit {
-    line-height: 24px;
-  }
 }

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>
   );
 };

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;
 }
 

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

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

frontends/web/src/components/aopp/aopp.module.css

@@ -42,6 +42,6 @@
 }
 @media (min-width: 1200px) {
     .message {
-        --size-default: 18px;
+        --size-default: 1.8rem;
     }
 }

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;
@@ -19,7 +19,7 @@
 }
 
 .badgeIcon {
-  max-width: 10px;
+  max-width: 1rem;
 }
 
 .withChildren .badgeIcon {
@@ -28,7 +28,7 @@
 
 @media (max-width: 382px) {
   .badge {
-      font-size: 10px;
+      font-size: 1rem;
   }
 }
 

frontends/web/src/components/balance/balance.module.css

@@ -1,33 +1,28 @@
-.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);
 }
 
 .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);

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}>

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: min(1.2rem, 20px);
     flex-direction: column;
     gap: 4px;
     justify-content: center;

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;
 }
 

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(' ')}>