fix: mf-5108 tooltip overflow (#10524)

* fix: tooltip overflow * chore: reply code review * chore: reply code review * chore: reply code review
DimensionDev · Aug 21, 2023 · eedd294 · eedd294
1 parent f62325b
commit eedd294
Show file tree

Hide file tree

Showing 4 changed files with 37 additions and 24 deletions.
diff --git a/packages/mask/src/extension/popups/pages/Wallet/components/ActivityList/ActivityItem.tsx b/packages/mask/src/extension/popups/pages/Wallet/components/ActivityList/ActivityItem.tsx
@@ -2,7 +2,7 @@ import { Icons } from '@masknet/icons'
 import { ImageIcon, NetworkIcon, ProgressiveText, ReversedAddress } from '@masknet/shared'
 import { NetworkPluginID } from '@masknet/shared-base'
 import { useEverSeen } from '@masknet/shared-base-ui'
-import { TextOverflowTooltip, makeStyles } from '@masknet/theme'
+import { TextOverflowTooltip, makeStyles, useBoundedPopperProps } from '@masknet/theme'
 import {
     useAccount,
     useNativeToken,
@@ -225,6 +225,7 @@ export const ActivityItem = memo<ActivityItemProps>(function ActivityItem({ tran
     const loadingToAddress =
         transaction.type === 'transfer' ? !receiverAddress && (loadingTx || loadingTxInput) : !toAddress && loadingTx
     const isOut = isSameAddress(fromAddress, account)
+    const popperProps = useBoundedPopperProps()
 
     return (
         <ListItem
@@ -274,7 +275,7 @@ export const ActivityItem = memo<ActivityItemProps>(function ActivityItem({ tran
                     return (
                         <Typography key={i} className={classes.asset}>
                             <strong className={classes.amount}>{`${isSend ? '-' : '+'} ${amount} `}</strong>
-                            <TextOverflowTooltip title={token.symbol}>
+                            <TextOverflowTooltip title={token.symbol} PopperProps={popperProps}>
                                 <span className={classes.symbol}>{token.symbol}</span>
                             </TextOverflowTooltip>
                         </Typography>

diff --git a/packages/mask/src/extension/popups/pages/Wallet/components/WalletAssets/index.tsx b/packages/mask/src/extension/popups/pages/Wallet/components/WalletAssets/index.tsx
@@ -1,7 +1,7 @@
 import { Icons } from '@masknet/icons'
 import { RestorableScroll, UserAssetsProvider } from '@masknet/shared'
 import { NetworkPluginID, PopupRoutes } from '@masknet/shared-base'
-import { makeStyles } from '@masknet/theme'
+import { makeStyles, Boundary } from '@masknet/theme'
 import { useAccount, useChainContext, useWallet } from '@masknet/web3-hooks-base'
 import { TabContext, TabList, TabPanel } from '@mui/lab'
 import { Box, Button, Tab, styled, tabClasses, tabsClasses } from '@mui/material'
@@ -151,23 +151,26 @@ export const WalletAssetsUI = memo<WalletAssetsUIProps>(function WalletAssetsUI(
                     pluginID={NetworkPluginID.PLUGIN_EVM}
                     account={account}
                     defaultCollectionId={params.get(SEARCH_KEY) || undefined}>
-                    <Box className={classes.panels}>
-                        <RestorableScroll scrollKey="assets">
-                            <TabPanel value={WalletAssetTabs.Tokens} className={classes.tabPanel}>
-                                <AssetsList />
-                            </TabPanel>
-                        </RestorableScroll>
-                        <TabPanel value={WalletAssetTabs.Collectibles} className={classes.tabPanel}>
-                            <RestorableScroll scrollKey="collectibles" targetRef={scrollTargetRef}>
-                                <WalletCollections onAddToken={onAddToken} scrollTargetRef={scrollTargetRef} />
+                    <Boundary>
+                        <Box className={classes.panels}>
+                            <RestorableScroll scrollKey="assets">
+                                <TabPanel value={WalletAssetTabs.Tokens} className={classes.tabPanel}>
+                                    <AssetsList />
+                                </TabPanel>
                             </RestorableScroll>
-                        </TabPanel>
-                        <RestorableScroll scrollKey="activities">
-                            <TabPanel value={WalletAssetTabs.Activity} className={classes.tabPanel}>
-                                <ActivityList />
+                            <TabPanel value={WalletAssetTabs.Collectibles} className={classes.tabPanel}>
+                                <RestorableScroll scrollKey="collectibles" targetRef={scrollTargetRef}>
+                                    <WalletCollections onAddToken={onAddToken} scrollTargetRef={scrollTargetRef} />
+                                </RestorableScroll>
                             </TabPanel>
-                        </RestorableScroll>
-                    </Box>
+
+                            <RestorableScroll scrollKey="activities">
+                                <TabPanel value={WalletAssetTabs.Activity} className={classes.tabPanel}>
+                                    <ActivityList />
+                                </TabPanel>
+                            </RestorableScroll>
+                        </Box>
+                    </Boundary>
                 </UserAssetsProvider>
             </TabContext>
         </div>

diff --git a/packages/mask/src/extension/popups/pages/Wallet/components/WalletHeader/UI.tsx b/packages/mask/src/extension/popups/pages/Wallet/components/WalletHeader/UI.tsx
@@ -14,12 +14,12 @@ import { WalletAssetsValue } from './WalletAssetsValue.js'
 
 const useStyles = makeStyles<{ disabled: boolean }>()((theme, { disabled }) => ({
     container: {
-        background:
-            'linear-gradient(180deg, rgba(255, 255, 255, 0) 0%, rgba(255, 255, 255, 0.8) 100%), linear-gradient(90deg, rgba(98, 126, 234, 0.2) 0%, rgba(59, 153, 252, 0.2) 100%)',
         padding: '16px',
+        lineHeight: 0,
         // padding bottom space for assets tabs
         paddingBottom: !disabled ? 34 : 16,
-        lineHeight: 0,
+        background:
+            'linear-gradient(180deg, rgba(255, 255, 255, 0) 0%, rgba(255, 255, 255, 0.8) 100%), linear-gradient(90deg, rgba(98, 126, 234, 0.2) 0%, rgba(59, 153, 252, 0.2) 100%)',
     },
     topbar: {
         display: 'flex',

diff --git a/packages/shared/src/UI/components/ReversedAddress/index.tsx b/packages/shared/src/UI/components/ReversedAddress/index.tsx
@@ -1,8 +1,8 @@
 import { type ComponentProps, memo } from 'react'
-import type { NetworkPluginID } from '@masknet/shared-base'
+import { type NetworkPluginID } from '@masknet/shared-base'
 import { useReverseAddress, useWeb3Others } from '@masknet/web3-hooks-base'
 import { Typography } from '@mui/material'
-import { ShadowRootTooltip } from '@masknet/theme'
+import { ShadowRootTooltip, useBoundedPopperProps } from '@masknet/theme'
 import { isSameAddress } from '@masknet/web3-shared-base'
 
 export interface ReverseAddressProps extends ComponentProps<typeof Typography> {
@@ -25,8 +25,17 @@ export const ReversedAddress = memo<ReverseAddressProps>(({ address, pluginID, s
             {uiLabel}
         </Typography>
     )
+    const popperProps = useBoundedPopperProps()
 
-    return hasEllipsis ? <ShadowRootTooltip title={showDomain ? domain : address}>{node}</ShadowRootTooltip> : node
+    return hasEllipsis ? (
+        <ShadowRootTooltip
+            title={showDomain ? domain : address}
+            PopperProps={{ ...popperProps, style: { whiteSpace: 'break-spaces', zIndex: 10 } }}>
+            {node}
+        </ShadowRootTooltip>
+    ) : (
+        node
+    )
 })
 
 ReversedAddress.displayName = 'ReversedAddress'