fix tooltip width

theme/components/Tooltip/Tooltip.ts

@@ -35,7 +35,7 @@ const baseStyle = defineStyle((props) => {
     [$bg.variable]: `colors.${ bg }`,
     [$fg.variable]: `colors.${ fg }`,
     [$arrowBg.variable]: $bg.reference,
-    maxWidth: props.maxWidth || props.maxW || 'unset',
+    maxWidth: props.maxWidth || props.maxW || 'calc(100vw - 8px)',
     marginX: '4px',
   };
 });

ui/marketplace/MarketplaceAppIntegrationIcon.tsx

@@ -33,7 +33,7 @@ const MarketplaceAppIntegrationIcon = ({ external, internalWallet }: Props) => {
       textAlign="center"
       padding={ 2 }
       openDelay={ 300 }
-      maxW={ 400 }
+      maxW={{ base: 'calc(100vw - 8px)', lg: '400px' }}
     >
       <IconSvg
         name={ icon }

ui/shared/HashStringShortenDynamic.tsx

@@ -95,7 +95,7 @@ const HashStringShortenDynamic = ({ hash, fontWeight = '400', isTooltipDisabled,
 
   if (isTruncated) {
     return (
-      <Tooltip label={ hash } isDisabled={ isTooltipDisabled } maxW={{ base: '100vw', lg: '400px' }}>{ content }</Tooltip>
+      <Tooltip label={ hash } isDisabled={ isTooltipDisabled } maxW={{ base: 'calc(100vw - 8px)', lg: '400px' }}>{ content }</Tooltip>
     );
   }
 

ui/shared/Hint.tsx

@@ -28,7 +28,7 @@ const Hint = ({ label, className, tooltipProps, isLoading }: Props) => {
     <Tooltip
       label={ label }
       placement="top"
-      maxW="320px"
+      maxW={{ base: 'calc(100vw - 8px)', lg: '320px' }}
       isOpen={ isOpen }
       { ...tooltipProps }
     >

ui/shared/TruncatedTextTooltip.tsx

@@ -79,7 +79,7 @@ const TruncatedTextTooltip = ({ children, label, placement }: Props) => {
     return (
       <Tooltip
         label={ label }
-        maxW={{ base: '100vw', lg: '400px' }}
+        maxW={{ base: 'calc(100vw - 8px)', lg: '400px' }}
         placement={ placement }
         isOpen={ isOpen }
       >

ui/shared/entities/address/AddressEntity.tsx

@@ -108,7 +108,7 @@ const Content = chakra((props: ContentProps) => {
     );
 
     return (
-      <Tooltip label={ label } maxW={{ base: '100vw', lg: '400px' }}>
+      <Tooltip label={ label } maxW={{ base: 'calc(100vw - 8px)', lg: '400px' }}>
         <Skeleton isLoaded={ !props.isLoading } overflow="hidden" textOverflow="ellipsis" whiteSpace="nowrap" as="span">
           { nameText }
         </Skeleton>

ui/shared/forms/FileSnippet.tsx

@@ -76,7 +76,7 @@ const FileSnippet = ({ file, className, index, onRemove, isDisabled, error }: Pr
             <Tooltip
               label={ error }
               placement="top"
-              maxW="320px"
+              maxW={{ base: 'calc(100vw - 8px)', lg: '320px' }}
             >
               <Box cursor="pointer" display="inherit" onClick={ handleErrorHintIconClick } ml={ 1 }>
                 <IconSvg name="info" boxSize={ 5 } color="error"/>