fix: fix swap price alignment

rango-exchange · Jul 20, 2024 · e8e3bbb · e8e3bbb
1 parent 9416939
commit e8e3bbb
Show file tree

Hide file tree

Showing 2 changed files with 6 additions and 1 deletion.
diff --git a/widget/ui/src/components/TokenAmount/TokenAmount.styles.ts b/widget/ui/src/components/TokenAmount/TokenAmount.styles.ts
@@ -27,3 +27,7 @@ export const usdValueStyles = css({
   display: 'flex',
   paddingTop: '$5',
 });
+
+export const tooltipRootStyle = {
+  width: 'fit-content',
+};
diff --git a/widget/ui/src/components/TokenAmount/TokenAmount.tsx b/widget/ui/src/components/TokenAmount/TokenAmount.tsx
@@ -12,6 +12,7 @@ import { Typography } from '../Typography';
 import {
   Container,
   tokenAmountStyles,
+  tooltipRootStyle,
   usdValueStyles,
 } from './TokenAmount.styles';
 
@@ -34,6 +35,7 @@ export function TokenAmount(props: PropTypes) {
           )}
           <div>
             <NumericTooltip
+              styles={{ root: tooltipRootStyle }}
               content={props.price.realValue}
               open={!props.price.realValue ? false : undefined}
               container={props.tooltipContainer}>
@@ -64,7 +66,6 @@ export function TokenAmount(props: PropTypes) {
                 <Typography size="small" variant="body">
                   {`~$${props.price.usdValue}`}
                 </Typography>
-                <Divider direction="horizontal" size={4} />
               </ValueTypography>
             )}
           </NumericTooltip>