Merge branch 'frontend-responsive-fontsize-android'

Author: thisconnect

CHANGELOG.md

@@ -9,6 +9,7 @@
 - Sort backups from newest to oldest in manage backups
 - Android: fix display of external links from Bitrefill
 - fix language sometimes not persistent across app restarts
+- Android: make the UI work with responsive font sizes and adhere to OS font size settings 
 
 ## v4.49.0
 - Bundle BitBox02 Nova firmware version v9.24.0

frontends/android/BitBoxApp/app/src/main/java/ch/shiftcrypto/bitboxapp/WebViewClient.java

@@ -14,15 +14,46 @@ public class WebViewClient extends android.webkit.WebViewClient {
     private final String baseUrl;
     private final AssetManager assets;
     private final Application appContext;
+    private final int initialZoom;
 
-    public WebViewClient(String baseUrl, AssetManager assets, Application appContext) {
+    public WebViewClient(String baseUrl, AssetManager assets, Application appContext, int initialZoom) {
         this.assets = assets;
         this.appContext = appContext;
         this.baseUrl = baseUrl;
+        this.initialZoom = initialZoom;
     }
     @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) initialZoom / 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 cssSetupInjected =
+            "(function() {" +
+            "   function applyCss() {" +
+            "       document.documentElement.style.fontSize='" + baseFontSizePercentage + "%';" +
+            "       document.body.style.fontSize='" + defaultFontSizeREM + "rem';" +
+            "   }" +
+            "   if (document.readyState === 'complete' || document.readyState === 'interactive') {" +
+            "       applyCss();" +
+            "   } else {" +
+            "       document.addEventListener('DOMContentLoaded', applyCss);" +
+            "   }" +
+            "})();";
+
+        // Execute the CSS setup in the WebView.
+        view.evaluateJavascript(cssSetupInjected, null);
+
         // override the default readText method, that doesn't work
         // because of read permission denied.
         view.evaluateJavascript(

frontends/android/BitBoxApp/app/src/main/java/ch/shiftcrypto/bitboxapp/WebViewManager.java

@@ -94,7 +94,9 @@ public void initialize(WebView webView) {
         settings.setDomStorageEnabled(true);
         settings.setMediaPlaybackRequiresUserGesture(false);
         // webView.setWebContentsDebuggingEnabled(true); // enable remote debugging in chrome://inspect/#devices
-        webView.setWebViewClient(new WebViewClient(BASE_URL, activity.getAssets(), activity.getApplication()));
+        // Retrieve the current text zoom setting to adjust the base font size in the WebView.
+        int initialZoom = webView.getSettings().getTextZoom();
+        webView.setWebViewClient(new WebViewClient(BASE_URL, activity.getAssets(), activity.getApplication(), initialZoom));
         webView.setWebChromeClient(webChromeClient);
         webView.addJavascriptInterface(new JavascriptBridge(activity), "android");
         webView.loadUrl(BASE_URL + "index.html");

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

@@ -1,13 +1,11 @@
 .container {
-  --size-default: 14px;
   align-items: center;
   background-color: var(--background-secondary);
   border: none;
   color: var(--color-default);
   display: flex;
   font-size: var(--size-default);
   justify-content: space-between;
-  line-height: 1.571428;
   padding: 16px;
   text-align: left;
   width: 100%;

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

@@ -1,22 +1,26 @@
 .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 {
-  color: var(--color-default);
-  padding-right: var(--space-quarter) !important;
+  align-items: baseline;
+  display: inline-flex;
+  flex-grow: 0;
+  justify-content: flex-start;
+  gap: 0.4ch;
   text-align: right;
 }
 
@@ -43,9 +47,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,6 +1,12 @@
 .amount {
+    align-items: baseline;
+    display: inline-flex;
+    display: flow-root; /* flow-root seems to work better on all-account. keeping inline-flex as fallback */
     flex-shrink: 1;
+    flex-basis: auto;
+    flex-grow: 0;
     font-variant: tabular-nums;
+    max-width: 100%;
     overflow: hidden;
     text-overflow: ellipsis;
 }

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

@@ -14,19 +14,19 @@
 .txPrefix,
 .txUnit {
   color: var(--color-secondary);
-  font-size: 14px;
-  line-height: 1.285714;
+  font-size: var(--size-small);
   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: var(--size-xsmall);
   }
 }