From a4d2100459fde6a2f9a2becdd0807a0eae3dfd65 Mon Sep 17 00:00:00 2001
From: Copilot <198982749+Copilot@users.noreply.github.com>
Date: Thu, 26 Feb 2026 09:15:23 +0100
Subject: [PATCH] fix: prevent gain/loss sign from wrapping off the amount
 (#158)
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

The `+`/`-` sign and the formatted amount are separate text nodes inside
the same `<span>`, allowing the browser to break between them when
horizontal space is tight — leaving the sign orphaned on a separate
line.

## Changes

- **`account-balance-chart.tsx`, `account-list-card.tsx`,
`account-balance-card.tsx`**: Added `whitespace-nowrap` to the gain/loss
amount `<span>` in all three components

```diff
- className={`text-right font-mono tabular-nums ${...}`}
+ className={`whitespace-nowrap text-right font-mono tabular-nums ${...}`}
```

<!-- START COPILOT ORIGINAL PROMPT -->



<details>

<summary>Original prompt</summary>

>
> ----
>
> *This section details on the original issue you should resolve*
>
> <issue_title>The gain/lost amount is broken in two lines by the symbol
when there is no enough space</issue_title>
>
<issue_description>![ResizedImage_2026-02-25_18-12-15_5005.png](https://github.com/user-attachments/assets/70285291-ceca-4116-ad05-df8e97007e41)
>
> </issue_description>
>
> ## Comments on the Issue (you are @copilot in this section)
>
> <comments>
> </comments>
>


</details>



<!-- START COPILOT CODING AGENT SUFFIX -->

- Fixes whisper-money/whisper-money#157

<!-- START COPILOT CODING AGENT TIPS -->
---

💡 You can make Copilot smarter by setting up custom instructions,
customizing its development environment and configuring Model Context
Protocol (MCP) servers. Learn more [Copilot coding agent
tips](https://gh.io/copilot-coding-agent-tips) in the docs.

---------

Co-authored-by: copilot-swe-agent[bot] <198982749+Copilot@users.noreply.github.com>
Co-authored-by: victor-falcon <238766+victor-falcon@users.noreply.github.com>
---
 resources/js/components/accounts/account-balance-chart.tsx | 2 +-
 resources/js/components/accounts/account-list-card.tsx     | 2 +-
 resources/js/components/dashboard/account-balance-card.tsx | 2 +-
 3 files changed, 3 insertions(+), 3 deletions(-)

diff --git a/resources/js/components/accounts/account-balance-chart.tsx b/resources/js/components/accounts/account-balance-chart.tsx
index 9b949fac..b3ad5c7f 100644
--- a/resources/js/components/accounts/account-balance-chart.tsx
+++ b/resources/js/components/accounts/account-balance-chart.tsx
@@ -106,7 +106,7 @@ function InvestmentTooltipContent({
                                 {__('Gain/loss')}
                             </span>
                             <span
-                                className={`font-mono font-medium tabular-nums ${gain >= 0 ? 'text-green-600 dark:text-green-400' : 'text-red-600 dark:text-red-400'}`}
+                                className={`whitespace-nowrap font-mono font-medium tabular-nums ${gain >= 0 ? 'text-green-600 dark:text-green-400' : 'text-red-600 dark:text-red-400'}`}
                             >
                                 {gain >= 0 ? '+' : ''}
                                 {valueFormatter(gain)}
diff --git a/resources/js/components/accounts/account-list-card.tsx b/resources/js/components/accounts/account-list-card.tsx
index c31c645d..58278935 100644
--- a/resources/js/components/accounts/account-list-card.tsx
+++ b/resources/js/components/accounts/account-list-card.tsx
@@ -176,7 +176,7 @@ export function AccountListCard({
                                                                     )}
                                                                 </span>
                                                                 <span
-                                                                    className={`text-right font-mono tabular-nums ${gain >= 0 ? 'text-green-600 dark:text-green-400' : 'text-red-600 dark:text-red-400'}`}
+                                                                    className={`whitespace-nowrap text-right font-mono tabular-nums ${gain >= 0 ? 'text-green-600 dark:text-green-400' : 'text-red-600 dark:text-red-400'}`}
                                                                 >
                                                                     {gain >= 0
                                                                         ? '+'
diff --git a/resources/js/components/dashboard/account-balance-card.tsx b/resources/js/components/dashboard/account-balance-card.tsx
index a00f5865..d54efa6f 100644
--- a/resources/js/components/dashboard/account-balance-card.tsx
+++ b/resources/js/components/dashboard/account-balance-card.tsx
@@ -161,7 +161,7 @@ export function AccountBalanceCard({
                                                                     )}
                                                                 </span>
                                                                 <span
-                                                                    className={`text-right font-mono tabular-nums ${gain >= 0 ? 'text-green-600 dark:text-green-400' : 'text-red-600 dark:text-red-400'}`}
+                                                                    className={`whitespace-nowrap text-right font-mono tabular-nums ${gain >= 0 ? 'text-green-600 dark:text-green-400' : 'text-red-600 dark:text-red-400'}`}
                                                                 >
                                                                     {gain >= 0
                                                                         ? '+'