Auto-resize coins count

Coins count will still break lines if the value can be fit in multiple lines (for accessibility), but it won't escape it's box and damage page design.

Web/Presenters/templates/User/Settings.xml

@@ -347,16 +347,22 @@
             <center>{tr("also_you_can_transfer_points", $thisUser->getCoins(), rawurlencode($csrfToken))|noescape}</center>
         </div>
         <div style="width: 22%; float: right;">
-            <p style="margin: 0; font-size: medium; text-align: center;">
-                <b>
-                    {_on_your_account}<br/>
-                    <span style="font-size: 50px;">{$thisUser->getCoins()}</span><br/>
-                    {_points_count}<br/><br/>
+            <div style="margin: 0; font-size: medium; text-align: center; font-weight: 900;">
+                {_on_your_account}
+                <div style="width: 100%; height: 60px; font-weight: 100;" id="balance">{$thisUser->getCoins()}</div>
+                {_points_count}<br/>
                 <small><a href="?act=finance.top-up">[{_have_voucher}?]</a></small>
-                </b>
             </p>
         </div>
         
+        {script "js/node_modules/textfit/textFit.min.js"}
+        <script>
+            let balance = document.querySelector("#balance");
+            
+            balance.style.width = Math.ceil(balance.parentNode.getBoundingClientRect().width) + "px";
+            textFit(balance, { alignVert: true });
+        </script>
+        
         {elseif $isFinanceTU}
         
         <p>{_voucher_explanation} {_voucher_explanation_ex}</p>

Web/static/js/package.json

@@ -14,6 +14,7 @@
     "react-dom-factories": "^1.0.2",
     "requirejs": "^2.3.6",
     "soundjs": "^1.0.1",
+    "textfit": "^2.4.0",
     "umbrellajs": "^3.1.0"
   }
 }

Web/static/js/yarn.lock

@@ -271,6 +271,11 @@ soundjs@^1.0.1:
   resolved "https://registry.yarnpkg.com/soundjs/-/soundjs-1.0.1.tgz#99970542d28d0df2a1ebd061ae75c961a98c8180"
   integrity sha512-MgFPvmKYfpcNiE3X5XybNvScie3DMQlZgmNzUn4puBcpw64f4LqjH/fhM8Sb/eTJ8hK57Crr7mWy0bfJOqPj6Q==
 
+textfit@^2.4.0:
+  version "2.4.0"
+  resolved "https://registry.yarnpkg.com/textfit/-/textfit-2.4.0.tgz#80cba8006bfb9c3d9d552739257957bdda95c79c"
+  integrity sha512-/x4aoY5+/tJmu+iwpBH1yw75TFp86M6X15SvaaY/Eep7YySQYtqdOifEtfvVyMwzl7SZ+G4RQw00FD9g5R6i1Q==
+
 trim-extra-html-whitespace@1.3.0:
   version "1.3.0"
   resolved "https://registry.yarnpkg.com/trim-extra-html-whitespace/-/trim-extra-html-whitespace-1.3.0.tgz#b47efb0d1a5f2a56a85cc45cea525651e93404cf"