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

@@ -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">
+                          <span className="inline-block w-8 text-right flex-shrink-0">{currency.symbol}</span>
-                            {currency.symbol} {currency.code} - {currency.name}
+                          <span className="ml-2">{currency.code}</span>
-                          </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>