Align symbol with amount (#920)

* Align symbol with amount * Add fragment to fix key err
penumbra-zone · Apr 12, 2024 · 70be476 · 70be476
1 parent 76302da
commit 70be476
Show file tree

Hide file tree

Showing 2 changed files with 6 additions and 5 deletions.
diff --git a/apps/minifront/src/components/dashboard/assets-table/index.tsx b/apps/minifront/src/components/dashboard/assets-table/index.tsx
@@ -13,6 +13,7 @@ import {
 import { ValueViewComponent } from '@penumbra-zone/ui/components/ui/tx/view/value';
 import { throwIfPraxNotConnectedTimeout } from '@penumbra-zone/client';
 import { EquivalentValues } from './equivalent-values';
+import { Fragment } from 'react';
 
 export const AssetsLoader: LoaderFunction = async (): Promise<BalancesByAccount[]> => {
   await throwIfPraxNotConnectedTimeout();
@@ -39,8 +40,8 @@ export default function AssetsTable() {
   return (
     <Table>
       {balancesByAccount.map(account => (
-        <>
-          <TableHeader key={account.account} className='group'>
+        <Fragment key={account.account}>
+          <TableHeader className='group'>
             <TableRow>
               <TableHead colSpan={2}>
                 <div className='flex max-w-full flex-col justify-center gap-2 pt-8 group-[:first-of-type]:pt-0 md:flex-row'>
@@ -74,7 +75,7 @@ export default function AssetsTable() {
               </TableRow>
             ))}
           </TableBody>
-        </>
+        </Fragment>
       ))}
     </Table>
   );

diff --git a/packages/ui/components/ui/tx/view/value/index.tsx b/packages/ui/components/ui/tx/view/value/index.tsx
@@ -49,7 +49,7 @@ export const ValueViewComponent = ({
             </div>
           )}
           {showValue && (
-            <span className='leading-[15px]'>
+            <span className='-mb-0.5 leading-[15px]'>
               {variant === 'equivalent' && <>~ </>}
               {formattedAmount}
             </span>
@@ -68,7 +68,7 @@ export const ValueViewComponent = ({
     const encodedAssetId = getDisplayDenomFromView(view);
     return (
       <div className='flex font-mono'>
-        <p className='truncate text-[15px] leading-[22px]'>
+        <p className='-mb-0.5 truncate text-[15px] leading-[22px]'>
           {fromBaseUnitAmount(amount, 0).toFormat()}
         </p>
         <span className='truncate font-mono text-sm italic text-foreground'>{encodedAssetId}</span>