prevent wallet balance overflow

components/header.js

@@ -136,7 +136,7 @@ function StackerCorner ({ dropNavKey }) {
       <NavProfileMenu me={me} dropNavKey={dropNavKey} />
       <Nav.Item>
         <Link href='/wallet' passHref legacyBehavior>
-          <Nav.Link eventKey='wallet' className='text-success px-0 text-nowrap'>
+          <Nav.Link eventKey='wallet' className='text-success text-monospace px-0 text-nowrap'>
             <WalletSummary me={me} />
           </Nav.Link>
         </Link>

components/hidden-wallet-summary.js

@@ -16,9 +16,9 @@ export default function HiddenWalletSummary ({ abbreviate, fixedWidth }) {
   return (
     <span
       ref={ref} style={{ width: fixedWidth ? width : undefined }}
-      className='d-inline-block' align='right' onPointerEnter={() => setHover(true)} onPointerLeave={() => setHover(false)}
+      className='d-inline-block text-monospace' align='right' onPointerEnter={() => setHover(true)} onPointerLeave={() => setHover(false)}
     >
-      {hover ? (abbreviate ? abbrNum(me.sats) : numWithUnits(me.sats, { abbreviate: false })) : '*****'}
+      {hover ? (abbreviate ? abbrNum(me.sats) : numWithUnits(me.sats, { abbreviate: false })) : '******'}
     </span>
   )
 }

styles/globals.scss

@@ -150,6 +150,10 @@ $btn-close-bg: none;
   }
 }
 
+.text-monospace {
+  font-family: monospace;
+}
+
 #nprogress .bar {
   background: var(--bs-primary) !important;
   height: 2px !important;