From 7dd9c83457289a9ba1b229721ccaed7215d9979f Mon Sep 17 00:00:00 2001
From: ZProger <zproger@users.noreply.github.com>
Date: Sun, 30 Aug 2026 04:49:04 +0300
Subject: [PATCH] fix: allocation list stretched full-width with few coins

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
---
 frontend/src/components/crypto/CryptoAllocationBody.tsx | 7 +++++--
 1 file changed, 5 insertions(+), 2 deletions(-)

diff --git a/frontend/src/components/crypto/CryptoAllocationBody.tsx b/frontend/src/components/crypto/CryptoAllocationBody.tsx
index 15f29df..67dc3dc 100644
--- a/frontend/src/components/crypto/CryptoAllocationBody.tsx
+++ b/frontend/src/components/crypto/CryptoAllocationBody.tsx
@@ -93,7 +93,7 @@ export function CryptoAllocationBody({ holdings, isLoading, hidden }: CryptoAllo
   const donutData = slices.map((slice) => ({ ...slice, percent: (slice.amount / total) * 100 }));
 
   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">
         <ResponsiveContainer width="100%" height="100%">
           <PieChart>
@@ -117,7 +117,10 @@ export function CryptoAllocationBody({ holdings, isLoading, hidden }: CryptoAllo
         </ResponsiveContainer>
       </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) => (
           <li key={slice.key} className="flex items-center gap-3 py-2 first:pt-0">
             {slice.thumbUrl ? (