Merge 1c7b73bd37 into e58a694c77

CHANGELOG.md

@@ -5,6 +5,12 @@ All notable changes to this project will be documented in this file.
 The format is based on [Keep a Changelog](https://keepachangelog.com/en/1.0.0/),
 and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0.html).
 
+## Unreleased
+
+### Changed
+
+- Improved the styling of the portfolio performance on the overview tab of the home page
+
 ## 3.34.0 - 2026-07-25
 
 ### Changed

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

@@ -82,16 +82,16 @@
         </div>
       </div>
     </div>
-    <div class="overview-container row mt-1">
+    <div class="mt-1 row">
       <div class="col">
         <gf-portfolio-performance
-          class="pb-4"
           [errors]="errors()"
           [isLoading]="isLoadingPerformance()"
           [locale]="user()?.settings?.locale"
           [performance]="performance()"
           [precision]="precision()"
           [showDetails]="showDetails()"
+          [size]="performanceSize()"
           [unit]="unit()"
         />
       </div>

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

@@ -1,6 +1,6 @@
 <div class="container p-0">
   <div class="no-gutters row">
-    <div class="status-container text-muted text-right">
+    <div class="pr-1 status-container text-muted text-right">
       @if (errors()?.length > 0 && !isLoading()) {
         <ion-icon
           i18n-title
@@ -24,11 +24,12 @@
     }
     <div
       class="display-4 font-weight-bold m-0 text-center value-container"
+      [class.medium]="size() === 'medium'"
       [hidden]="isLoading()"
     >
       <span #value id="value"></span>
     </div>
-    <div class="currency-container flex-grow-1 px-1">
+    <div class="currency-container flex-grow-1 pl-1">
       {{ unit() }}
     </div>
   </div>

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';