Frontend responsive fontsize android

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

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

@@ -1,51 +1,53 @@
-.balanceTable {
-  align-items: flex-end;
-  border-collapse: collapse;
-  border-spacing: 0;
-  display: flex;
-  flex-direction: row;
-  position: relative;
+.balanceContainer {
+  color: var(--color-default);
+  max-width: 100%;
 }
 
-.balanceTable tr {
-  display: inline-block;
-  vertical-align: bottom;
-  padding-right: var(--space-half);
+.availableBalanceTitle {
+  color: var(--color-secondary);
+  line-height: 1.5;
+  margin-bottom: 10px;
 }
 
-.balanceTable td {
+.balance {
+  align-items: baseline;
+  display: flex;
+  flex-direction: row;
+  flex-wrap: wrap;
   font-size: var(--size-large);
   font-weight: 400;
-  line-height: 1.2;
-  padding: 0;
-  vertical-align: baseline;
+  gap: var(--space-eight) var(--space-half);
+  min-height: 37px;
+  position: relative;
 }
 
-.balanceTable td:last-child {
-  font-size: var(--size-default);
+.unit {
+  font-size: var(--size-header);
 }
 
 .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);
 }
 
-@media (max-width: 768px) {
+.incomingBalance {
+  display: inline-flex;
+  flex-wrap: wrap;
+  gap: .4ch;
+}
 
-  .balanceTable {
-    display: inline-block;
-    margin: 0 auto;
-  }
+@media (max-width: 768px) {
 
-  .balanceTable td {
+  .balance {
     font-size: var(--size-header);
-    line-height: 1.5;
+    min-height: auto;
   }
 
   .pendingBalance {
     padding-top: var(--space-quarter);
   }
+
 }

frontends/web/src/components/balance/balance.test.tsx

@@ -102,8 +102,9 @@ describe('components/balance/balance', () => {
       }
     };
     const { getByTestId } = render(<Balance balance={MOCK_BALANCE} />);
-    expect(getByTestId('availableBalance').textContent).toBe('0.005BTC512USD');
-    expect(getByTestId('incomingBalance').textContent).toBe('+0.003 BTC / 512 USD');
+    expect(getByTestId('availableBalance').textContent).toBe('0.005 BTC 512 USD');
+    expect(getByTestId('incomingBalance').textContent).toContain('+0.003 BTC');
+    expect(getByTestId('incomingBalance').textContent).toContain('512 USD');
   });
 });
 
@@ -176,8 +177,9 @@ describe('components/balance/balance', () => {
       }
     };
     const { getByTestId } = render(<Balance balance={MOCK_BALANCE} />);
-    expect(getByTestId('availableBalance').textContent).toBe('0.005BTC512USD');
-    expect(getByTestId('incomingBalance').textContent).toBe('+0.003 BTC / 1,511.99 USD');
+    expect(getByTestId('availableBalance').textContent).toBe('0.005 BTC 512 USD');
+    expect(getByTestId('incomingBalance').textContent).toContain('+0.003 BTC');
+    expect(getByTestId('incomingBalance').textContent).toContain('1,511.99 USD');
   });
   afterEach(() => {
     vi.restoreAllMocks();