From d0501d87dbc66e39537f2b91af08106381862501 Mon Sep 17 00:00:00 2001
From: typist <git@mail.typist.cc>
Date: Thu, 30 Oct 2025 09:22:27 +0800
Subject: [PATCH] refactor: improve currency display and layout in tool
 component

- Updated currency display to enhance clarity by separating symbol, code, and name into distinct elements.
- Adjusted styling for better alignment and responsiveness in the currency selection interface.
- Improved overall user experience by refining the layout of currency information in the Card component.
---
 src/components/tool/currency.tsx | 12 +++++++-----
 1 file changed, 7 insertions(+), 5 deletions(-)

diff --git a/src/components/tool/currency.tsx b/src/components/tool/currency.tsx
index b447d6f..306d0e0 100644
--- a/src/components/tool/currency.tsx
+++ b/src/components/tool/currency.tsx
@@ -350,13 +350,12 @@ const Tool: FC = () => {
                           }}
                         >
                           <Check
-                            className={`mr-2 size-4 ${
+                            className={`mr-2 size-4 flex-shrink-0 ${
                               isSelected ? "opacity-100" : "opacity-0"
                             }`}
                           />
-                          <span className="flex-1">
-                            {currency.symbol} {currency.code} - {currency.name}
-                          </span>
+                          <span className="inline-block w-8 text-right flex-shrink-0">{currency.symbol}</span>
+                          <span className="ml-2">{currency.code}</span>
                         </CommandItem>
                       );
                     })}
@@ -420,7 +419,10 @@ const Tool: FC = () => {
                 <Card key={code} className="flex flex-col">
                   <CardHeader className="pb-3">
                     <CardTitle className="text-sm font-medium text-muted-foreground">
-                      {currency.symbol} {currency.code} - {currency.name}
+                      <div className="leading-tight">
+                        <div>{currency.symbol} {currency.code}</div>
+                        <div className="text-xs font-normal mt-1">{currency.name}</div>
+                      </div>
                     </CardTitle>
                   </CardHeader>
                   <CardContent>