RomanNum3ral
/
whisper-money
mirror of https://github.com/whisper-money/whisper-money.git
1
0
Fork 0
Code Issues Packages Projects Releases Wiki Activity

feat(accounts): stack the account card vertically on mobile 

On small screens the accounts list card now stacks name, amount and
trend in a single left-aligned column, and hides the bank-name subtitle
(the bank logo already conveys it). Desktop keeps the two-column layout.
This commit is contained in:
Víctor Falcón 2026-06-20 20:00:59 +02:00
parent a6cfb9194f
commit 67f9f271e4
1 changed files with 4 additions and 4 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

8
resources/js/components/accounts/account-list-card.tsx
View File

@ -163,7 +163,7 @@ export function AccountListCard({
/>
</h3>
</Link>
<div className="flex items-center gap-2 text-sm text-muted-foreground">
<div className="hidden items-center gap-2 text-sm text-muted-foreground sm:flex">
{hasMortgage &&
linkedLoanMetrics.loanAccount ? (
<span className="flex items-center gap-1">
@ -199,9 +199,9 @@ export function AccountListCard({
</div>
</div>
</div>
<div className="flex shrink-0 flex-col items-end">
<div className="flex shrink-0 flex-col items-start sm:items-end">
{isConnected ? (
<div className="-mr-2 px-2 py-1">
<div className="-ml-2 px-2 py-1 sm:-mr-2 sm:ml-0">
<AmountDisplay
amountInCents={displayBalance}
currencyCode={currencyCode}
@ -213,7 +213,7 @@ export function AccountListCard({
<button
type="button"
onClick={() => setUpdateBalanceOpen(true)}
className="-mr-2 cursor-pointer rounded-md px-2 py-1 transition-colors hover:bg-muted"
className="-ml-2 cursor-pointer rounded-md px-2 py-1 transition-colors hover:bg-muted sm:-mr-2 sm:ml-0"
>
<AmountDisplay
amountInCents={displayBalance}