fix: standardise balance and branding footer

- Add a shared formatBalance helper (3 decimals + ℏ) and use it for the
  menu and profile balances so they no longer differ in precision/unit.
- Let the branding page grow with its content so the fixed action bar no
  longer overlaps the last card.

Signed-off-by: Alex Piatakov <alex.piatakov@swirldslabs.com>

Author: Pyatakov

frontend/src/app/utils/balance.ts

@@ -0,0 +1,13 @@
+const HBAR_SYMBOL = 'ℏ';
+
+/** Standardise a balance for display: 3 decimals + ℏ. Non-numeric input is passed through. */
+export function formatBalance(balance: string | number | null | undefined): string {
+    if (balance === null || balance === undefined || balance === '') {
+        return '';
+    }
+    const value = typeof balance === 'number' ? balance : parseFloat(balance);
+    if (!isFinite(value)) {
+        return typeof balance === 'string' ? balance : '';
+    }
+    return `${value.toFixed(3)} ${HBAR_SYMBOL}`;
+}

frontend/src/app/utils/index.ts

@@ -4,3 +4,4 @@ export { EntityAccess, EntityGroup } from "./permissions-entity";
 export { PermissionsGroup } from "./permissions";
 export { MergeUtils } from "./merge-utils";
 export { getUserInitials } from "./user-initials";
+export { formatBalance } from "./balance";

frontend/src/app/views/branding/branding.component.scss

@@ -1,4 +1,10 @@
 .guardian-page {
+    // The shared .guardian-page is height: 100% + flex, so a plain padding-bottom
+    // can't reserve room for the fixed actions bar — overflowing content scrolls
+    // flush under it. Let the page grow with its content instead so the padding
+    // becomes real scroll space below the last card.
+    height: auto;
+    min-height: 100%;
     padding-bottom: 88px;
 }
 

frontend/src/app/views/new-header/new-header.component.ts

@@ -1,7 +1,7 @@
 import { Component, Input, OnInit, OnDestroy, AfterViewInit, ElementRef, ViewChild, NgZone, AfterViewChecked } from '@angular/core';
 import { MenuItem } from 'primeng/api';
 import { getMenuItems, NavbarMenuItem } from './menu.model';
-import { getUserInitials } from '../../utils';
+import { formatBalance, getUserInitials } from '../../utils';
 import { MenuLayout, MenuLayoutService } from '../../services/menu-layout.service';
 import { IUser, UserCategory, UserPermissions, UserRole } from '@guardian/interfaces';
 import { AuthStateService } from '../../services/auth-state.service';
@@ -96,8 +96,7 @@ export class NewHeaderComponent implements OnInit, OnDestroy, AfterViewChecked {
         this.ws = this.webSocketService.profileSubscribe((event) => {
             if (event.type === 'PROFILE_BALANCE') {
                 if (event.data && event.data.balance) {
-                    const b = parseFloat(event.data.balance);
-                    this.balance = `${b.toFixed(3)} ${event.data.unit}`;
+                    this.balance = formatBalance(event.data.balance);
                 } else {
                     this.balance = 'N\\A';
                     this.balanceType = '';
@@ -166,15 +165,7 @@ export class NewHeaderComponent implements OnInit, OnDestroy, AfterViewChecked {
         this.auth.balance().subscribe((balance: any) => {
             if (balance && balance.balance) {
                 const b = parseFloat(balance.balance);
-                if (b > 999) {
-                    this.balance = `${b.toFixed(0)} ${balance.unit}`;
-                } else if (b > 99) {
-                    this.balance = `${b.toFixed(2)} ${balance.unit}`;
-                } else if (b > 9) {
-                    this.balance = `${b.toFixed(3)} ${balance.unit}`;
-                } else {
-                    this.balance = `${b.toFixed(4)} ${balance.unit}`;
-                }
+                this.balance = formatBalance(b);
                 if (b > 100) {
                     this.balanceType = 'normal';
                 } else if (b > 20) {

frontend/src/app/views/root-profile/root-profile.component.html

@@ -65,7 +65,7 @@
             </div>
             <div class="profile-row">
               <span class="profile-label">Balance</span>
-              <span class="profile-value">{{ balance }}</span>
+              <span class="profile-value">{{ formatBalance(balance) }}</span>
             </div>
           </div>
         </p-card>

frontend/src/app/views/root-profile/root-profile.component.ts

@@ -26,7 +26,7 @@ import { ToastrService } from 'ngx-toastr';
 import { AppTheme, AppThemeOption, AppThemeService } from '../../services/app-theme.service';
 import { MenuLayout, MenuLayoutOption, MenuLayoutService } from '../../services/menu-layout.service';
 import { DocWidgetService } from '../../services/doc-widget.service';
-import { getUserInitials } from '../../utils';
+import { formatBalance, getUserInitials } from '../../utils';
 
 enum OperationMode {
     None,
@@ -865,6 +865,10 @@ export class RootProfileComponent implements OnInit, OnDestroy {
         return getUserInitials(username);
     }
 
+    formatBalance(balance: string | null): string {
+        return formatBalance(balance);
+    }
+
     formatRole(role: string | undefined): string {
         if (!role) { return ''; }
         return role.split('_').map(w => w.charAt(0).toUpperCase() + w.slice(1).toLowerCase()).join(' ');