frontend: debug and display calculated base font and screen width

For debugging purpose this will render the calculated increased
base font size and the screen width.

The screen width can vary depending on Android display size setting.

Author: thisconnect

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

@@ -241,6 +241,12 @@ public void onPageFinished(WebView view, String url) {
                 // This size does not scale dynamically with zoom adjustments and is fixed at 1.6rem.
                 double defaultFontSizeREM = 1.6;
 
+                // Set the base font-size on the html element dynamically and apply a fixed font size to the body.
+                // Also, set a custom data attribute 'data-test' to the calculated base font size percentage for potential debugging.
+                String cssSetup = "document.documentElement.style.fontSize = '" + baseFontSizePercentage + "%';" +
+                                    "document.body.style.fontSize = '" + defaultFontSizeREM + "rem';" +
+                                    "document.body.setAttribute('data-test', '" + baseFontSizePercentage + "%');";
+
                 // 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);

frontends/web/src/components/layout/header.tsx

@@ -46,6 +46,8 @@ const Header = ({
     }
     return false;
   };
+  const test = document.body.getAttribute('data-test');
+  const width = window.screen.width;
 
   return (
     <div className={[style.container, sidebarStatus ? style[sidebarStatus] : ''].join(' ')}>
@@ -65,6 +67,9 @@ const Header = ({
             >
               <GuideActive />
               {t('guide.toggle.open')}
+              <sup>
+                ({test} {width}px)
+              </sup>
             </Button>
           )}
         </div>