feat: fix tooltip content & market show isolation

Author: cuzz-venus

apps/evm/src/components/InfoIcon/index.tsx

@@ -9,15 +9,21 @@ export interface InfoIconProps {
   iconName?: IconName;
   iconClassName?: string;
   className?: string;
+  tooltipContentClassName?: string;
 }
 
 export const InfoIcon = ({
   tooltip,
   className,
   iconName = 'info',
   iconClassName,
+  tooltipContentClassName,
 }: InfoIconProps) => (
-  <Tooltip className={cn('inline-flex align-sub', className)} content={tooltip}>
+  <Tooltip
+    className={cn('inline-flex align-sub', className)}
+    contentClassName={tooltipContentClassName}
+    content={tooltip}
+  >
     <Icon className={iconClassName} name={iconName} />
   </Tooltip>
 );

apps/evm/src/components/IsolatedAssetIndicator/index.tsx

@@ -16,6 +16,7 @@ export const IsolatedAssetIndicator: React.FC<IsolatedAssetIndicatorProps> = ({
 
       <InfoIcon
         iconClassName="text-yellow"
+        tooltipContentClassName="max-w-fit"
         tooltip={t('marketTable.assetColumn.isolatedTooltip')}
       />
     </span>

apps/evm/src/components/Tooltip/index.tsx

@@ -13,10 +13,17 @@ import { TooltipContent } from './TooltipContent';
 
 export interface TooltipProps extends TooltipPrimitiveProps {
   className?: string;
+  contentClassName?: string;
   content: string | React.ReactNode;
 }
 
-export const Tooltip = ({ className, content, children, ...props }: TooltipProps) => {
+export const Tooltip = ({
+  className,
+  contentClassName,
+  content,
+  children,
+  ...props
+}: TooltipProps) => {
   const [isTooltipOpened, setIsTooltipOpened] = useState(false);
   const isMdOrUp = useBreakpointUp('md');
 
@@ -42,7 +49,7 @@ export const Tooltip = ({ className, content, children, ...props }: TooltipProps
         </Trigger>
         <TooltipContent
           onPointerDownOutside={e => e.preventDefault()}
-          className={cn('block p-3 z-9999 shadow', !isMdOrUp && 'hidden')}
+          className={cn('block p-3 z-9999 shadow', !isMdOrUp && 'hidden', contentClassName)}
         >
           {content}
           <Arrow className="fill-lightGrey w-[14px] h-[7px]" />