Improve styling

apps/client/src/app/components/home-overview/home-overview.component.ts

@@ -5,7 +5,8 @@ import { UserService } from '@ghostfolio/client/services/user/user.service';
 import {
   DEFAULT_CURRENCY,
   DEFAULT_DATE_RANGE,
-  NUMERICAL_PRECISION_THRESHOLD_6_FIGURES
+  NUMERICAL_PRECISION_THRESHOLD_6_FIGURES,
+  NUMERICAL_PRECISION_THRESHOLD_7_FIGURES
 } from '@ghostfolio/common/config';
 import {
   AssetProfileIdentifier,
@@ -51,6 +52,7 @@ export class GfHomeOverviewComponent implements OnInit {
   protected readonly isLoadingPerformance = signal(true);
   protected readonly performance = signal<PortfolioPerformance | null>(null);
   protected readonly performanceLabel = $localize`Performance`;
+  protected readonly performanceSize = signal<'large' | 'medium'>('large');
   protected readonly precision = signal(2);
   protected readonly user = signal<User | null>(null);
 
@@ -143,6 +145,7 @@ export class GfHomeOverviewComponent implements OnInit {
         );
 
         this.precision.set(2);
+        this.performanceSize.set('large');
 
         if (
           this.deviceType() === 'mobile' &&
@@ -150,6 +153,13 @@ export class GfHomeOverviewComponent implements OnInit {
             NUMERICAL_PRECISION_THRESHOLD_6_FIGURES
         ) {
           this.precision.set(0);
+
+          if (
+            performance.currentValueInBaseCurrency >=
+            NUMERICAL_PRECISION_THRESHOLD_7_FIGURES
+          ) {
+            this.performanceSize.set('medium');
+          }
         }
 
         this.isLoadingPerformance.set(false);

apps/client/src/app/components/home-overview/home-overview.html

@@ -91,6 +91,7 @@
           [performance]="performance()"
           [precision]="precision()"
           [showDetails]="showDetails()"
+          [size]="performanceSize()"
           [unit]="unit()"
         />
       </div>

apps/client/src/app/components/portfolio-performance/portfolio-performance.component.html

@@ -24,6 +24,7 @@
     }
     <div
       class="display-4 font-weight-bold m-0 text-center value-container"
+      [class.medium]="size() === 'medium'"
       [hidden]="isLoading()"
     >
       <span #value id="value"></span>

apps/client/src/app/components/portfolio-performance/portfolio-performance.component.scss

@@ -16,6 +16,10 @@
   }
 
   .value-container {
+    &.medium {
+      font-size: 2rem;
+    }
+
     #value {
       font-variant-numeric: tabular-nums;
     }

apps/client/src/app/components/portfolio-performance/portfolio-performance.component.ts

@@ -44,6 +44,7 @@ export class GfPortfolioPerformanceComponent {
     }
   });
   public readonly showDetails = input<boolean>(false);
+  public readonly size = input<'large' | 'medium'>('large');
   public readonly unit = input.required<string>();
 
   private readonly value =

libs/common/src/lib/config.ts

@@ -233,6 +233,7 @@ export const NUMERICAL_PRECISION_THRESHOLD_3_FIGURES = 100;
 export const NUMERICAL_PRECISION_THRESHOLD_4_FIGURES = 1000;
 export const NUMERICAL_PRECISION_THRESHOLD_5_FIGURES = 10000;
 export const NUMERICAL_PRECISION_THRESHOLD_6_FIGURES = 100000;
+export const NUMERICAL_PRECISION_THRESHOLD_7_FIGURES = 1000000;
 
 export const PROPERTY_API_KEY_GHOSTFOLIO = 'API_KEY_GHOSTFOLIO';
 export const PROPERTY_API_KEY_OPENROUTER = 'API_KEY_OPENROUTER';