Skip to content

fix(dashboard): stop Account Balances and Investments from clipping their own numbers #159

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
KenTaniguchi-R merged 1 commit into from
Sep 6, 2026
Merged

fix(dashboard): stop Account Balances and Investments from clipping their own numbers #159

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
14 changes: 11 additions & 3 deletions src/components/organisms/widgets/account-balances.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -35,9 +35,17 @@ export function AccountBalancesWidget({ data }: AccountBalancesWidgetProps) {
{/* Account and balance are a real two-column table. The widget shows no
visible headers, so they are screen-reader only -- without them the
balances read as an undifferentiated run of numbers. */}
<div className="flex-1 overflow-y-auto">
<table className="w-full">
<div className="flex-1 overflow-y-auto overflow-x-hidden">
{/* table-fixed pins the balance column to a fixed width so it can
never be pushed past the card's edge -- without it the balance
column grows to fit its content and drags a horizontal scrollbar
(and the card's own overflow-hidden) along with it. */}
<table className="w-full table-fixed">
<caption className="sr-only">Account balances</caption>
<colgroup>
<col />
<col className="w-24" />
</colgroup>
<thead className="sr-only">
<tr>
<th scope="col">Account</th>
Expand All @@ -58,7 +66,7 @@ export function AccountBalancesWidget({ data }: AccountBalancesWidgetProps) {
<span className="truncate text-sm">{accountDisplayName(account.name)}</span>
</div>
</td>
<td className="px-1 py-1.5 text-right">
<td className="px-1 py-1.5 text-right whitespace-nowrap">
<BalanceDisplay
amount={account.currentBalance}
currency={account.currency ?? "USD"}
Expand Down
4 changes: 2 additions & 2 deletions src/components/organisms/widgets/investments-widget.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -49,10 +49,10 @@ export function InvestmentsWidget({
the list scrolls rather than clipping. The min-height matters for
anyone whose saved layout still has this widget at one row — without
it `flex-1` resolves to zero there and the list vanishes entirely. */}
<ul className="flex min-h-10 flex-1 flex-col gap-2 overflow-y-auto">
<ul className="flex min-h-10 flex-1 flex-col gap-2 overflow-y-auto overflow-x-hidden">
{topHoldings.map((h) => (
<li key={holdingLabel(h)} className="flex flex-col gap-1">
<div className="flex items-baseline justify-between gap-2">
<div className="flex min-w-0 items-baseline justify-between gap-2">
<span className="truncate text-sm font-medium">{holdingLabel(h)}</span>
<span className="shrink-0 text-sm tabular-nums">
{centsToDisplay(h.currentValue)}
Expand Down