Coder/aurum
1
0
Fork 0
mirror of https://github.com/Zproger/Aurum.git synced 2026-10-13 19:16:40 +07:00
Code Issues Packages Projects Releases Wiki Activity

fix: allocation list stretched full-width with few coins

Browse Source 
The coin list next to the donut was flex-1, so with only one or two
holdings it stretched across whatever space was left in the card and the
percent/amount columns ended up stranded far from the coin's icon and name.
Capped the list at a fixed width and centered the donut+list group instead.

Co-Authored-By: Claude Sonnet 5 <noreply@anthropic.com>
Claude-Session: https://claude.ai/code/session_01855PiW5Wd8n4aRW4n9kByY
This commit is contained in:
ZProger
2026-08-30 04:49:04 +03:00
parent 7a23ed1ff8
commit 7dd9c83457
1 changed files with 5 additions and 2 deletions
Download Patch File Download Diff File Expand all files Collapse all files

7
frontend/src/components/crypto/CryptoAllocationBody.tsx
View File

@@ -93,7 +93,7 @@ export function CryptoAllocationBody({ holdings, isLoading, hidden }: CryptoAllo
const donutData = slices.map((slice) => ({ ...slice, percent: (slice.amount / total) * 100 })); const donutData = slices.map((slice) => ({ ...slice, percent: (slice.amount / total) * 100 }));
return ( return (
<div className="flex flex-col items-center gap-4 sm:flex-row sm:items-center sm:gap-6"> <div className="flex flex-col items-center gap-4 sm:flex-row sm:items-center sm:justify-center sm:gap-8">
<div className="h-48 w-48 shrink-0 sm:h-56 sm:w-56"> <div className="h-48 w-48 shrink-0 sm:h-56 sm:w-56">
<ResponsiveContainer width="100%" height="100%"> <ResponsiveContainer width="100%" height="100%">
<PieChart> <PieChart>
@@ -117,7 +117,10 @@ export function CryptoAllocationBody({ holdings, isLoading, hidden }: CryptoAllo
</ResponsiveContainer> </ResponsiveContainer>
</div> </div>
<ul className="w-full min-w-0 flex-1 divide-y divide-gridline"> {/* Capped width, not flex-1 — otherwise with few/short coin names the
row stretches across whatever's left of the card and the percent/
amount columns end up stranded far from the coin they describe. */}
<ul className="w-full min-w-0 divide-y divide-gridline sm:w-72">
{donutData.map((slice) => ( {donutData.map((slice) => (
<li key={slice.key} className="flex items-center gap-3 py-2 first:pt-0"> <li key={slice.key} className="flex items-center gap-3 py-2 first:pt-0">
{slice.thumbUrl ? ( {slice.thumbUrl ? (