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>
>
> </issue_description>
>
> ## Comments on the Issue (you are @copilot in this section)
>
> <comments>
> </comments>
>
</details>
<!-- START COPILOT CODING AGENT SUFFIX -->
- Fixeswhisper-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>
a4d2100459