fix: mf-5108 tooltip overflow

[zhouhanseng]

Description

https://mask.atlassian.net/browse/MF-5108

Closes # (NO_ISSUE)

Type of change

• Documentation
• Code refactoring (Restructuring existing code w/o changing its observable behavior)
• Bug fix (non-breaking change which fixes an issue)
• New feature (non-breaking change which adds functionality)
• Breaking change (a fix or feature that would make something no longer possible to do/require old user must upgrade their Mask Network to this new version)

Previews

Checklist

• My code follows the style guidelines of this project.
• I have performed a self-review of my own code.
  • I have removed all in development console.logs
  • I have removed all commented code.
• I have commented on my code, particularly in hard-to-understand areas.
• I have read Internationalization Guide and moved text fields to the i18n JSON file.

If this PR depends on external APIs:

• I have configured those APIs with CORS headers to let extension requests get passed.
  • chrome extension: chrome-extension://[id]
  • firefox extension: moz-extension://[id]
• I have delegated all web requests to the background service via the internal RPC bridge.

[UncleBill]

Try https://github.com/DimensionDev/Maskbook/blob/develop/packages/theme/src/Components/Boundary/index.tsx and https://github.com/DimensionDev/Maskbook/blob/develop/packages/theme/src/hooks/useBoundedPopperProps.ts

[zhouhanseng]

@UncleBill Try <Boundary /> and useBoundedPopperProps both, not work.

[UncleBill]

@zhouhanseng Try this

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
index 93be6d220..cb8e82df6 100644
--- 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 { Boundary, makeStyles } 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,25 @@ 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/shared/src/UI/components/ReversedAddress/index.tsx b/packages/shared/src/UI/components/ReversedAddress/index.tsx
index 5dca99f00..b6b7f6213 100644
--- a/packages/shared/src/UI/components/ReversedAddress/index.tsx
+++ b/packages/shared/src/UI/components/ReversedAddress/index.tsx
@@ -2,7 +2,7 @@ import { type ComponentProps, memo } from 'react'
 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> {
@@ -20,13 +20,21 @@ export const ReversedAddress = memo<ReverseAddressProps>(({ address, pluginID, s
     const showDomain = !!domain && Others.isValidDomain(domain)
     const uiLabel = showDomain ? Others.formatDomainName(domain) : Others.formatAddress(address, size) ?? address
     const hasEllipsis = showDomain ? uiLabel !== domain : !isSameAddress(uiLabel, address)
+    const popperProps = useBoundedPopperProps()
     const node = (
         <Typography fontWeight={700} {...rest}>
             {uiLabel}
         </Typography>
     )
-
-    return hasEllipsis ? <ShadowRootTooltip title={showDomain ? domain : address}>{node}</ShadowRootTooltip> : node
+    return hasEllipsis ? (
+        <ShadowRootTooltip
+            PopperProps={{ ...popperProps, style: { whiteSpace: 'break-spaces', zIndex: 10 } }}
+            title={showDomain ? domain : address}>
+            {node}
+        </ShadowRootTooltip>
+    ) : (
+        node
+    )
 })
 
 ReversedAddress.displayName = 'ReversedAddress'

[UncleBill]

ignore all whitespace

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
index 93be6d220..cb8e82df6 100644
--- 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 { Boundary, makeStyles } 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,6 +151,7 @@ export const WalletAssetsUI = memo<WalletAssetsUIProps>(function WalletAssetsUI(
                     pluginID={NetworkPluginID.PLUGIN_EVM}
                     account={account}
                     defaultCollectionId={params.get(SEARCH_KEY) || undefined}>
+                    <Boundary>
                         <Box className={classes.panels}>
                             <RestorableScroll scrollKey="assets">
                                 <TabPanel value={WalletAssetTabs.Tokens} className={classes.tabPanel}>
@@ -168,6 +169,7 @@ export const WalletAssetsUI = memo<WalletAssetsUIProps>(function WalletAssetsUI(
                                 </TabPanel>
                             </RestorableScroll>
                         </Box>
+                    </Boundary>
                 </UserAssetsProvider>
             </TabContext>
         </div>
diff --git a/packages/shared/src/UI/components/ReversedAddress/index.tsx b/packages/shared/src/UI/components/ReversedAddress/index.tsx
index 5dca99f00..b6b7f6213 100644
--- a/packages/shared/src/UI/components/ReversedAddress/index.tsx
+++ b/packages/shared/src/UI/components/ReversedAddress/index.tsx
@@ -2,7 +2,7 @@ import { type ComponentProps, memo } from 'react'
 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> {
@@ -20,13 +20,21 @@ export const ReversedAddress = memo<ReverseAddressProps>(({ address, pluginID, s
     const showDomain = !!domain && Others.isValidDomain(domain)
     const uiLabel = showDomain ? Others.formatDomainName(domain) : Others.formatAddress(address, size) ?? address
     const hasEllipsis = showDomain ? uiLabel !== domain : !isSameAddress(uiLabel, address)
+    const popperProps = useBoundedPopperProps()
     const node = (
         <Typography fontWeight={700} {...rest}>
             {uiLabel}
         </Typography>
     )
-
-    return hasEllipsis ? <ShadowRootTooltip title={showDomain ? domain : address}>{node}</ShadowRootTooltip> : node
+    return hasEllipsis ? (
+        <ShadowRootTooltip
+            PopperProps={{ ...popperProps, style: { whiteSpace: 'break-spaces', zIndex: 10 } }}
+            title={showDomain ? domain : address}>
+            {node}
+        </ShadowRootTooltip>
+    ) : (
+        node
+    )
 })
 
 ReversedAddress.displayName = 'ReversedAddress'

[guanbinrui]

Need approval from @UncleBill.

[zhouhanseng]

@UncleBill Works now, thank you!

[UncleBill]

@guanbinrui done