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) <noreply@anthropic.com>

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
         ) {

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;
+    }
+  }
 }