fix: improve portfolio value display on mobile

[billcode124]

Summary

Fixes the portfolio value display on mobile screens so the full amount and currency can be viewed without horizontal scrolling.

Changes

• Updated the portfolio value layout for small screens
• Prevented the amount and currency from overflowing the viewport
• Added responsive handling to stack or abbreviate the value when necessary
• Preserved the existing desktop layout and display behavior

Testing

• Tested the portfolio value at mobile viewport sizes
• Verified the full value remains readable without horizontal scrolling
• Verified desktop and larger-screen behavior remains unchanged

Validation

npm test
npm run lint
npm run typecheck

Scope

The change is limited to the portfolio value responsive display and does not alter unrelated portfolio functionality.

closes #453

[vercel]

@billcode124 is attempting to deploy a commit to the David Dada's projects Team on Vercel.

A member of the Team first needs to authorize it.

[drips-wave]

@billcode124 Great news! 🎉 Based on an automated assessment of this PR, the linked Wave issue(s) no longer count against your application limits.

You can now already apply to more issues while waiting for a review of this PR. Keep up the great work! 🚀

Learn more about application limits

[sshdopey]

Thanks for tackling this! The responsive stacking for the portfolio value on mobile looks like a solid approach, and the tests and CSS updates show real effort. I appreciate that you kept the desktop layout intact. Nice work! ❤️

[sshdopey]

Approved! 🎉 I couldn't auto-merge this just yet (it may need a rebase or have a check still running). A maintainer can merge it whenever it's ready.