From 5d2b4b1c528675c0b3d66a83d007f3bd9aee87e5 Mon Sep 17 00:00:00 2001 From: Benny Powers Date: Mon, 25 May 2026 10:43:32 +0300 Subject: [PATCH] Fix portfolio performance overflow on narrow viewports Use viewport width check instead of User-Agent-based device detection for precision reduction. `ngx-device-detector` classifies devices by User-Agent string, so desktop browsers at narrow widths never trigger the `deviceType === 'mobile'` check, leaving precision at 2 decimals and causing the currency code to overflow. Replace with `window.matchMedia` at the Bootstrap `sm` breakpoint, and add a CSS `@media` safety net to remove `min-width` on narrow viewports. Assisted-By: Claude Opus 4.6 (1M context) --- .../components/home-overview/home-overview.component.ts | 2 +- .../portfolio-performance.component.scss | 7 +++++++ 2 files changed, 8 insertions(+), 1 deletion(-) diff --git a/apps/client/src/app/components/home-overview/home-overview.component.ts b/apps/client/src/app/components/home-overview/home-overview.component.ts index ad3556536..689c75a0f 100644 --- a/apps/client/src/app/components/home-overview/home-overview.component.ts +++ b/apps/client/src/app/components/home-overview/home-overview.component.ts @@ -143,7 +143,7 @@ export class GfHomeOverviewComponent implements OnInit { this.precision.set(2); if ( - this.deviceType() === 'mobile' && + window.matchMedia('(max-width: 575.98px)').matches && performance.currentValueInBaseCurrency >= NUMERICAL_PRECISION_THRESHOLD_6_FIGURES ) { diff --git a/apps/client/src/app/components/portfolio-performance/portfolio-performance.component.scss b/apps/client/src/app/components/portfolio-performance/portfolio-performance.component.scss index 6f703255f..8c6e6236b 100644 --- a/apps/client/src/app/components/portfolio-performance/portfolio-performance.component.scss +++ b/apps/client/src/app/components/portfolio-performance/portfolio-performance.component.scss @@ -20,4 +20,11 @@ font-variant-numeric: tabular-nums; } } + + @media (max-width: 575.98px) { + .currency-container, + .status-container { + min-width: 0; + } + } }