@blocklet/ui-react 2.13.32 → 2.13.34

package/lib/Footer/brand.js

@@ -57,7 +57,7 @@ const Root = styled("div")`
   .footer-brand-desc {
     white-space: pre-line;
     margin-top: 16px;
-    color: #9397a1;
+    color: ${(props) => props.theme.palette.text.secondary};
   }
 
   ${(props) => props.theme.breakpoints.down("sm")} {

package/lib/Footer/index.js

@@ -73,7 +73,7 @@ Footer.defaultProps = {
 };
 const StyledInternalFooter = styled(InternalFooter)`
   ${({ $bordered, theme }) => `border-top: 1px solid ${$bordered && theme.palette.divider};`}
-  color: ${({ theme }) => theme.palette.grey[400]};
+  color: ${({ theme }) => theme.palette.text.secondary};
   ${({ $bgcolor }) => $bgcolor && `background-color: ${$bgcolor};`}
 `;
 export default withErrorBoundary(withHideWhenEmbed(Footer), {

package/lib/Footer/layout/standard.js

@@ -2,7 +2,6 @@ import { jsx, jsxs } from "react/jsx-runtime";
 import PropTypes from "prop-types";
 import clsx from "clsx";
 import { Box, Container } from "@mui/material";
-import { grey } from "@mui/material/colors";
 import { styled } from "@arcblock/ux/lib/Theme";
 import Row from "./row.js";
 function StandardLayout({ elements, data, className, ...rest }) {
@@ -28,7 +27,7 @@ function StandardLayout({ elements, data, className, ...rest }) {
           ]
         }
       ),
-      /* @__PURE__ */ jsx(Box, { sx: { mb: 3, borderTop: { xs: `1px solid ${grey[200]}`, md: 0 } }, children: elements.navigation })
+      /* @__PURE__ */ jsx(Box, { sx: ({ palette }) => ({ mb: 3, borderTop: { xs: `1px solid ${palette.grey[200]}`, md: 0 } }), children: elements.navigation })
     ] });
   } else {
     topSection = /* @__PURE__ */ jsxs(

package/lib/Footer/links.js

@@ -128,7 +128,7 @@ Links.defaultProps = {
 };
 const Root = styled("div")`
   overflow: hidden;
-  color: ${({ theme }) => theme.palette.grey[400]};
+  color: ${({ theme }) => theme.palette.text.secondary};
   .footer-links-inner {
     display: flex;
     justify-content: space-between;
@@ -221,7 +221,7 @@ const Root = styled("div")`
         top: 50%;
         transform: translate(0, -50%);
         height: 1em;
-        border-left: 1px solid ${(props) => props.theme.palette.grey[400]};
+        border-left: 1px solid ${(props) => props.theme.palette.text.secondary};
       }
     }
   }

package/lib/Footer/social-media.js

@@ -39,7 +39,7 @@ const Root = styled("div")`
   justify-content: center;
   gap: 20px;
   a {
-    color: ${(props) => props.theme.palette.grey[400]};
+    color: ${(props) => props.theme.palette.text.secondary};
     text-decoration: none;
     transition: color 0.2s ease-in-out;
     &:hover {

package/lib/UserCenter/components/config-profile.js

@@ -70,7 +70,7 @@ export default function ConfigProfile({ user, onSave }) {
               size: "small",
               IconComponent: (props) => /* @__PURE__ */ jsx(ArrowDownwardIcon, { ...props, width: 20, height: 20 }),
               sx: {
-                minWidth: 300,
+                minWidth: 200,
                 "&:hover": {
                   "fieldset.MuiOutlinedInput-notchedOutline": {
                     borderColor: "divider"

package/lib/UserCenter/components/danger-zone.js

@@ -100,7 +100,8 @@ export default function DangerZone() {
           display: "flex",
           alignItems: "center",
           gap: 1,
-          justifyContent: "space-between"
+          justifyContent: "space-between",
+          flexWrap: "wrap"
         },
         children: [
           /* @__PURE__ */ jsxs(Box, { children: [

package/lib/UserCenter/components/editable-field.js

@@ -203,6 +203,7 @@ function EditableField({
                       whiteSpace: "pre-wrap",
                       ...inline ? { whiteSpace: "nowrap", overflow: "hidden", textOverflow: "ellipsis" } : {}
                     },
+                    component: "div",
                     onMouseEnter: handleMouseEnter,
                     onMouseLeave: handleMouseLeave,
                     children: renderValue ? renderValue(value) : value

package/lib/UserCenter/components/notification.d.ts

@@ -1,4 +1,5 @@
 import { User } from '../../@types';
-export default function Notification({ user }: {
+export default function Notification({ user, isMobile }: {
     user: User;
+    isMobile: boolean;
 }): import("react").JSX.Element;

package/lib/UserCenter/components/notification.js

@@ -9,6 +9,7 @@ import Toast from "@arcblock/ux/lib/Toast";
 import { getWalletDid } from "@arcblock/ux/lib/SessionUser/libs/utils";
 import { translate } from "@arcblock/ux/lib/Locale/util";
 import { useLocaleContext } from "@arcblock/ux/lib/Locale/context";
+import DID from "@arcblock/ux/lib/DID";
 import { translations } from "../libs/locales.js";
 import WebhookItem from "./webhook-item.js";
 import { formatAxiosError } from "../libs/utils.js";
@@ -17,7 +18,8 @@ function NotificationItem({
   title,
   description,
   value,
-  onChange
+  onChange,
+  isMobile
 }) {
   return /* @__PURE__ */ jsx(
     Switch,
@@ -31,9 +33,10 @@ function NotificationItem({
             sx: {
               fontSize: 14,
               display: "flex",
-              flexFlow: "wrap",
+              flexFlow: isMobile ? "wrap" : "nowrap",
               columnGap: 1,
-              flex: 1
+              flex: 1,
+              whiteSpace: "nowrap"
             },
             children: [
               title,
@@ -47,7 +50,7 @@ function NotificationItem({
     }
   );
 }
-export default function Notification({ user }) {
+export default function Notification({ user, isMobile }) {
   const { locale } = useLocaleContext();
   const t = useMemoizedFn((key, data = {}) => {
     return translate(translations, key, locale, "en", data);
@@ -175,15 +178,29 @@ export default function Notification({ user }) {
             NotificationItem,
             {
               value: notifications.wallet,
+              isMobile,
               title: t("walletNotification"),
               onChange: (event) => handleChangeSwitch("wallet", event.target.checked),
-              description: getWalletDid(user) && /* @__PURE__ */ jsx(Typography, { component: "span", color: "text.secondary", fontSize: 13, children: getWalletDid(user) })
+              description: getWalletDid(user) && /* @__PURE__ */ jsx(
+                DID,
+                {
+                  did: getWalletDid(user),
+                  showQrcode: false,
+                  showAvatar: !isMobile,
+                  copyable: true,
+                  compact: true,
+                  responsive: true,
+                  locale,
+                  startChars: isMobile ? 2 : 6
+                }
+              )
             }
           ),
           /* @__PURE__ */ jsx(
             NotificationItem,
             {
               value: notifications.email,
+              isMobile,
               onChange: (event) => handleChangeSwitch("email", event.target.checked),
               title: t("emailNotification"),
               description: user?.email && /* @__PURE__ */ jsx(Typography, { component: "span", color: "text.secondary", fontSize: 13, children: user?.email })
@@ -192,6 +209,7 @@ export default function Notification({ user }) {
           /* @__PURE__ */ jsx(
             NotificationItem,
             {
+              isMobile,
               value: notifications.push,
               title: t("pushNotification"),
               onChange: (event) => handleChangeSwitch("push", event.target.checked)

package/lib/UserCenter/components/settings.d.ts

@@ -1,9 +1,10 @@
 import type { BoxProps } from '@mui/material';
 import { User, UserCenterTab } from '../../@types';
-export default function Settings({ user, settings, onSave, ...rest }: {
+export default function Settings({ user, settings, onSave, isMobile, ...rest }: {
     user: User;
     onSave: (type: 'privacy' | 'profile') => void;
     settings: {
         userCenterTabs: UserCenterTab[];
     };
+    isMobile: boolean;
 } & BoxProps): import("react").JSX.Element;

package/lib/UserCenter/components/settings.js

@@ -18,6 +18,7 @@ export default function Settings({
   user,
   settings,
   onSave,
+  isMobile,
   ...rest
 }) {
   const { locale } = useLocaleContext();
@@ -47,7 +48,7 @@ export default function Settings({
       {
         label: t("notificationManagement"),
         value: "notification",
-        content: /* @__PURE__ */ jsx(Notification, { user })
+        content: /* @__PURE__ */ jsx(Notification, { user, isMobile })
       },
       {
         label: t("thirdPartyLogin.title"),
@@ -82,7 +83,7 @@ export default function Settings({
         }
       }
     ].filter(Boolean);
-  }, [user, privacyConfigList]);
+  }, [user, privacyConfigList, isMobile]);
   useEffect(() => {
     const id = window.location.hash.slice(1);
     if (id) {

package/lib/UserCenter/components/user-center.js

@@ -238,7 +238,8 @@ export default function UserCenter({
             await session.refresh();
           }
           return null;
-        }
+        },
+        isMobile
       }
     );
   }, [userState.data, userCenterTabs, privacyState.data, privacyState.runAsync]);
@@ -452,7 +453,7 @@ export default function UserCenter({
                         fontWeight: 400
                       }
                     },
-                    ".MuiTabs-scroller": {
+                    ".MuiTabs-root": {
                       "&:after": {
                         content: '""',
                         display: "block",

package/lib/UserSessions/components/user-sessions.js

@@ -20,6 +20,7 @@ import {
   useMediaQuery
 } from "@mui/material";
 import { memo, useEffect } from "react";
+import { mergeSx } from "@arcblock/ux/lib/Util/style";
 import useMobile from "../../hooks/use-mobile.js";
 import UserSessionInfo from "./user-session-info.js";
 import { client } from "../../libs/client.js";
@@ -33,6 +34,11 @@ const parseUa = (ua) => {
   const result = parser.getResult();
   return result;
 };
+const textRightStyle = {
+  display: "flex",
+  justifyContent: "flex-end",
+  textAlign: "right"
+};
 const queue = new PQueue({ concurrency: 1 });
 const UserSessionIp = memo(({ userSession, isMobile = false }) => {
   const currentState = useReactive({
@@ -49,13 +55,25 @@ const UserSessionIp = memo(({ userSession, isMobile = false }) => {
       }
     });
   }, [currentState, userSession.lastLoginIp]);
-  return /* @__PURE__ */ jsx(Box, { ...isMobile && { display: "flex", alignItems: "center", justifyContent: "flex-end", gap: 1 }, children: currentState.ipRegion ? /* @__PURE__ */ jsxs(Fragment, { children: [
-    /* @__PURE__ */ jsx(Typography, { variant: "body2", children: currentState.ipRegion }),
-    /* @__PURE__ */ jsx(Typography, { variant: "body2", color: "grey", children: userSession.lastLoginIp || t("unknown") })
-  ] }) : /* @__PURE__ */ jsxs(Fragment, { children: [
-    /* @__PURE__ */ jsx(Typography, { children: userSession.lastLoginIp || t("unknown") }),
-    currentState.loading ? /* @__PURE__ */ jsx(Typography, { variant: "body2", color: "grey", sx: { textAlign: "center" }, children: /* @__PURE__ */ jsx(CircularProgress, { size: 12, color: "inherit" }) }) : null
-  ] }) });
+  return /* @__PURE__ */ jsx(
+    Box,
+    {
+      ...isMobile && {
+        display: "flex",
+        alignItems: "center",
+        justifyContent: "flex-end",
+        gap: 1,
+        flexWrap: "wrap"
+      },
+      children: currentState.ipRegion ? /* @__PURE__ */ jsxs(Fragment, { children: [
+        /* @__PURE__ */ jsx(Typography, { variant: "body2", children: currentState.ipRegion }),
+        /* @__PURE__ */ jsx(Typography, { variant: "body2", color: "grey", children: userSession.lastLoginIp || t("unknown") })
+      ] }) : /* @__PURE__ */ jsxs(Fragment, { children: [
+        /* @__PURE__ */ jsx(Typography, { children: userSession.lastLoginIp || t("unknown") }),
+        currentState.loading ? /* @__PURE__ */ jsx(Typography, { variant: "body2", color: "grey", sx: { textAlign: "center" }, children: /* @__PURE__ */ jsx(CircularProgress, { size: 12, color: "inherit" }) }) : null
+      ] })
+    }
+  );
 });
 export default function UserSessions({
   user,
@@ -115,6 +133,9 @@ export default function UserSessions({
     }
     return userSessionsCountMap[status] === 0;
   }, [safeData, currentVisitorId]);
+  const mergeStyle = useCreation(() => {
+    return mergeSx({}, isMobile ? textRightStyle : {});
+  }, [isMobile]);
   const logout = useMemoizedFn(({ visitorId }) => {
     confirmApi.open({
       title: t("logoutThisSession"),
@@ -210,8 +231,8 @@ export default function UserSessions({
       options: {
         customBodyRenderLite: (rawIndex) => {
           const x = safeData[rawIndex];
-          const result = parseUa(x.ua);
-          return /* @__PURE__ */ jsx(Box, { sx: isMobile ? { textAlign: "right" } : {}, children: [result.os?.name, result.os?.version].filter(Boolean).join("/") || t("unknown") });
+          const result = parseUa(x?.ua);
+          return /* @__PURE__ */ jsx(Box, { sx: mergeStyle, children: [result.os?.name, result.os?.version].filter(Boolean).join("/") || t("unknown") });
         }
       }
     },
@@ -221,8 +242,8 @@ export default function UserSessions({
       options: {
         customBodyRenderLite: (rawIndex) => {
           const x = safeData[rawIndex];
-          const result = parseUa(x.ua);
-          return /* @__PURE__ */ jsx(Box, { sx: isMobile ? { textAlign: "right" } : {}, children: [result.browser?.name, result.browser?.version].filter(Boolean).join("/") || t("unknown") });
+          const result = parseUa(x?.ua);
+          return /* @__PURE__ */ jsx(Box, { sx: mergeStyle, children: [result.browser?.name, result.browser?.version].filter(Boolean).join("/") || t("unknown") });
         }
       }
     },
@@ -232,7 +253,7 @@ export default function UserSessions({
       options: {
         customBodyRenderLite: (rawIndex) => {
           const x = safeData[rawIndex];
-          return /* @__PURE__ */ jsx(Box, { sx: isMobile ? { textAlign: "right" } : {}, children: x.extra?.walletOS || t("unknown") });
+          return /* @__PURE__ */ jsx(Box, { sx: mergeStyle, children: x.extra?.walletOS || t("unknown") });
         }
       }
     },
@@ -242,7 +263,7 @@ export default function UserSessions({
       options: {
         customBodyRenderLite: (rawIndex) => {
           const x = safeData[rawIndex];
-          return /* @__PURE__ */ jsx(Box, { sx: { minWidth: 150, maxWidth: 250, ...isMobile && { textAlign: "right" } }, children: /* @__PURE__ */ jsx(UserSessionInfo, { sessionUser: x.user, user }) });
+          return /* @__PURE__ */ jsx(Box, { sx: mergeSx({ minWidth: 150, maxWidth: 250 }, isMobile ? textRightStyle : {}), children: /* @__PURE__ */ jsx(UserSessionInfo, { sessionUser: x.user, user }) });
         }
       }
     },
@@ -252,7 +273,7 @@ export default function UserSessions({
       options: {
         customBodyRenderLite: (rawIndex) => {
           const x = safeData[rawIndex];
-          return /* @__PURE__ */ jsx(Box, { sx: isMobile ? { textAlign: "right" } : {}, children: x.createdAt ? /* @__PURE__ */ jsx(RelativeTime, { value: x.createdAt, relativeRange: 3 * 86400 * 1e3, locale }) : t("unknown") });
+          return /* @__PURE__ */ jsx(Box, { sx: mergeStyle, children: x.createdAt ? /* @__PURE__ */ jsx(RelativeTime, { value: x.createdAt, relativeRange: 3 * 86400 * 1e3, locale }) : t("unknown") });
         }
       }
     },
@@ -262,7 +283,7 @@ export default function UserSessions({
       options: {
         customBodyRenderLite: (rawIndex) => {
           const x = safeData[rawIndex];
-          return /* @__PURE__ */ jsx(Box, { sx: isMobile ? { textAlign: "right" } : {}, children: x.status === "expired" ? t("expired") : /* @__PURE__ */ jsx(RelativeTime, { value: x.updatedAt, relativeRange: 3 * 86400 * 1e3, locale }) });
+          return /* @__PURE__ */ jsx(Box, { sx: mergeStyle, children: x.status === "expired" ? t("expired") : /* @__PURE__ */ jsx(RelativeTime, { value: x.updatedAt, relativeRange: 3 * 86400 * 1e3, locale }) });
         }
       }
     },
@@ -282,7 +303,7 @@ export default function UserSessions({
       options: {
         customBodyRenderLite: (rawIndex) => {
           const x = safeData[rawIndex];
-          return /* @__PURE__ */ jsx(Box, { sx: isMobile ? { textAlign: "right" } : {}, children: /* @__PURE__ */ jsx(
+          return /* @__PURE__ */ jsx(Box, { sx: mergeStyle, children: /* @__PURE__ */ jsx(
             Button,
             {
               sx: {

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@blocklet/ui-react",
-  "version": "2.13.32",
+  "version": "2.13.34",
   "description": "Some useful front-end web components that can be used in Blocklets.",
   "keywords": [
     "react",
@@ -34,8 +34,8 @@
   "dependencies": {
     "@abtnode/constant": "^1.16.43",
     "@abtnode/util": "^1.16.43",
-    "@arcblock/bridge": "^2.13.32",
-    "@arcblock/react-hooks": "^2.13.32",
+    "@arcblock/bridge": "^2.13.34",
+    "@arcblock/react-hooks": "^2.13.34",
     "@arcblock/ws": "^1.20.8",
     "@blocklet/constant": "^1.16.43",
     "@blocklet/did-space-react": "^1.0.51",
@@ -94,5 +94,5 @@
     "jest": "^29.7.0",
     "unbuild": "^2.0.0"
   },
-  "gitHead": "87fa6cebba886885a5c2ac78c786c71599fb5f7a"
+  "gitHead": "2dd874ee643777fe089a0d02183543497d0c8f39"
 }

package/src/Footer/brand.jsx

@@ -68,7 +68,7 @@ const Root = styled('div')`
   .footer-brand-desc {
     white-space: pre-line;
     margin-top: 16px;
-    color: #9397a1;
+    color: ${(props) => props.theme.palette.text.secondary};
   }
 
   ${(props) => props.theme.breakpoints.down('sm')} {

package/src/Footer/index.jsx

@@ -89,7 +89,7 @@ Footer.defaultProps = {
 
 const StyledInternalFooter = styled(InternalFooter)`
   ${({ $bordered, theme }) => `border-top: 1px solid ${$bordered && theme.palette.divider};`}
-  color: ${({ theme }) => theme.palette.grey[400]};
+  color: ${({ theme }) => theme.palette.text.secondary};
   ${({ $bgcolor }) => $bgcolor && `background-color: ${$bgcolor};`}
 `;
 

package/src/Footer/layout/standard.jsx

@@ -1,7 +1,6 @@
 import PropTypes from 'prop-types';
 import clsx from 'clsx';
 import { Box, Container } from '@mui/material';
-import { grey } from '@mui/material/colors';
 import { styled } from '@arcblock/ux/lib/Theme';
 
 import Row from './row';
@@ -31,7 +30,9 @@ function StandardLayout({ elements, data, className, ...rest }) {
           <Box>{elements.brand}</Box>
           <Box lineHeight={1}>{elements.socialMedia}</Box>
         </Box>
-        <Box sx={{ mb: 3, borderTop: { xs: `1px solid ${grey[200]}`, md: 0 } }}>{elements.navigation}</Box>
+        <Box sx={({ palette }) => ({ mb: 3, borderTop: { xs: `1px solid ${palette.grey[200]}`, md: 0 } })}>
+          {elements.navigation}
+        </Box>
       </Container>
     );
   } else {

package/src/Footer/links.jsx

@@ -167,7 +167,7 @@ Links.defaultProps = {
 
 const Root = styled('div')`
   overflow: hidden;
-  color: ${({ theme }) => theme.palette.grey[400]};
+  color: ${({ theme }) => theme.palette.text.secondary};
   .footer-links-inner {
     display: flex;
     justify-content: space-between;
@@ -260,7 +260,7 @@ const Root = styled('div')`
         top: 50%;
         transform: translate(0, -50%);
         height: 1em;
-        border-left: 1px solid ${(props) => props.theme.palette.grey[400]};
+        border-left: 1px solid ${(props) => props.theme.palette.text.secondary};
       }
     }
   }

package/src/Footer/social-media.jsx

@@ -46,7 +46,7 @@ const Root = styled('div')`
   justify-content: center;
   gap: 20px;
   a {
-    color: ${(props) => props.theme.palette.grey[400]};
+    color: ${(props) => props.theme.palette.text.secondary};
     text-decoration: none;
     transition: color 0.2s ease-in-out;
     &:hover {

package/src/UserCenter/components/config-profile.tsx

@@ -69,7 +69,7 @@ export default function ConfigProfile({ user, onSave }: { user: User; onSave: (t
           // eslint-disable-next-line react/no-unstable-nested-components
           IconComponent={(props) => <ArrowDownwardIcon {...props} width={20} height={20} />}
           sx={{
-            minWidth: 300,
+            minWidth: 200,
             '&:hover': {
               'fieldset.MuiOutlinedInput-notchedOutline': {
                 borderColor: 'divider',

package/src/UserCenter/components/danger-zone.tsx

@@ -110,6 +110,7 @@ export default function DangerZone() {
             alignItems: 'center',
             gap: 1,
             justifyContent: 'space-between',
+            flexWrap: 'wrap',
           }}>
           <Box>
             <Typography

package/src/UserCenter/components/editable-field.tsx

@@ -230,6 +230,7 @@ function EditableField({
                 whiteSpace: 'pre-wrap',
                 ...(inline ? { whiteSpace: 'nowrap', overflow: 'hidden', textOverflow: 'ellipsis' } : {}),
               }}
+              component="div"
               onMouseEnter={handleMouseEnter}
               onMouseLeave={handleMouseLeave}>
               {renderValue ? renderValue(value) : value}

package/src/UserCenter/components/notification.tsx

@@ -10,6 +10,7 @@ import { getWalletDid } from '@arcblock/ux/lib/SessionUser/libs/utils';
 import { translate } from '@arcblock/ux/lib/Locale/util';
 import { useLocaleContext } from '@arcblock/ux/lib/Locale/context';
 import { AxiosError } from 'axios';
+import DID from '@arcblock/ux/lib/DID';
 
 import { translations } from '../libs/locales';
 import WebhookItem from './webhook-item';
@@ -22,11 +23,13 @@ function NotificationItem({
   description,
   value,
   onChange,
+  isMobile,
 }: {
   title?: string;
   description?: React.ReactNode;
   value: boolean;
   onChange: (event: ChangeEvent<HTMLInputElement>) => void;
+  isMobile: boolean;
 }) {
   return (
     <Switch
@@ -38,9 +41,10 @@ function NotificationItem({
             sx={{
               fontSize: 14,
               display: 'flex',
-              flexFlow: 'wrap',
+              flexFlow: isMobile ? 'wrap' : 'nowrap',
               columnGap: 1,
               flex: 1,
+              whiteSpace: 'nowrap',
             }}>
             {title}
             {description}
@@ -53,7 +57,7 @@ function NotificationItem({
   );
 }
 
-export default function Notification({ user }: { user: User }) {
+export default function Notification({ user, isMobile }: { user: User; isMobile: boolean }) {
   const { locale } = useLocaleContext();
   const t = useMemoizedFn((key, data = {}) => {
     return translate(translations, key, locale, 'en', data);
@@ -184,18 +188,27 @@ export default function Notification({ user }: { user: User }) {
         }}>
         <NotificationItem
           value={notifications.wallet}
+          isMobile={isMobile}
           title={t('walletNotification')}
           onChange={(event: ChangeEvent<HTMLInputElement>) => handleChangeSwitch('wallet', event.target.checked)}
           description={
             getWalletDid(user) && (
-              <Typography component="span" color="text.secondary" fontSize={13}>
-                {getWalletDid(user)}
-              </Typography>
+              <DID
+                did={getWalletDid(user)}
+                showQrcode={false}
+                showAvatar={!isMobile}
+                copyable
+                compact
+                responsive
+                locale={locale}
+                startChars={isMobile ? 2 : 6}
+              />
             )
           }
         />
         <NotificationItem
           value={notifications.email}
+          isMobile={isMobile}
           onChange={(event: ChangeEvent<HTMLInputElement>) => handleChangeSwitch('email', event.target.checked)}
           title={t('emailNotification')}
           description={
@@ -207,6 +220,7 @@ export default function Notification({ user }: { user: User }) {
           }
         />
         <NotificationItem
+          isMobile={isMobile}
           value={notifications.push}
           title={t('pushNotification')}
           onChange={(event: ChangeEvent<HTMLInputElement>) => handleChangeSwitch('push', event.target.checked)}

package/src/UserCenter/components/settings.tsx

@@ -20,6 +20,7 @@ export default function Settings({
   user,
   settings,
   onSave,
+  isMobile,
   ...rest
 }: {
   user: User;
@@ -27,6 +28,7 @@ export default function Settings({
   settings: {
     userCenterTabs: UserCenterTab[];
   };
+  isMobile: boolean;
 } & BoxProps) {
   const { locale } = useLocaleContext();
   const browser = useBrowser();
@@ -57,7 +59,7 @@ export default function Settings({
       {
         label: t('notificationManagement'),
         value: 'notification',
-        content: <Notification user={user} />,
+        content: <Notification user={user} isMobile={isMobile} />,
       },
       {
         label: t('thirdPartyLogin.title'),
@@ -91,7 +93,7 @@ export default function Settings({
         },
       },
     ].filter(Boolean);
-  }, [user, privacyConfigList]);
+  }, [user, privacyConfigList, isMobile]);
 
   // 支持 hash 锚点定位
   useEffect(() => {

package/src/UserCenter/components/user-center.tsx

@@ -286,6 +286,7 @@ export default function UserCenter({
           }
           return null;
         }}
+        isMobile={isMobile}
       />
     );
   }, [userState.data, userCenterTabs, privacyState.data, privacyState.runAsync]);
@@ -533,7 +534,7 @@ export default function UserCenter({
                       fontWeight: 400,
                     },
                   },
-                  '.MuiTabs-scroller': {
+                  '.MuiTabs-root': {
                     '&:after': {
                       content: '""',
                       display: 'block',

package/src/UserSessions/components/user-sessions.tsx

@@ -22,6 +22,7 @@ import {
 } from '@mui/material';
 import { memo, ReactElement, useEffect } from 'react';
 import { UserSession } from '@blocklet/js-sdk';
+import { mergeSx } from '@arcblock/ux/lib/Util/style';
 
 import useMobile from '../../hooks/use-mobile';
 import UserSessionInfo from './user-session-info';
@@ -39,6 +40,12 @@ const parseUa = (ua: string) => {
   return result;
 };
 
+const textRightStyle = {
+  display: 'flex',
+  justifyContent: 'flex-end',
+  textAlign: 'right',
+};
+
 const queue = new PQueue({ concurrency: 1 });
 
 const UserSessionIp = memo(({ userSession, isMobile = false }: { userSession: any; isMobile: boolean }) => {
@@ -60,7 +67,14 @@ const UserSessionIp = memo(({ userSession, isMobile = false }: { userSession: an
   }, [currentState, userSession.lastLoginIp]);
 
   return (
-    <Box {...(isMobile && { display: 'flex', alignItems: 'center', justifyContent: 'flex-end', gap: 1 })}>
+    <Box
+      {...(isMobile && {
+        display: 'flex',
+        alignItems: 'center',
+        justifyContent: 'flex-end',
+        gap: 1,
+        flexWrap: 'wrap',
+      })}>
       {currentState.ipRegion ? (
         <>
           <Typography variant="body2">{currentState.ipRegion}</Typography>
@@ -160,6 +174,10 @@ export default function UserSessions({
     return userSessionsCountMap[status] === 0;
   }, [safeData, currentVisitorId]);
 
+  const mergeStyle = useCreation(() => {
+    return mergeSx({}, isMobile ? textRightStyle : {});
+  }, [isMobile]);
+
   const logout = useMemoizedFn(({ visitorId }) => {
     confirmApi.open({
       title: t('logoutThisSession'),
@@ -249,11 +267,9 @@ export default function UserSessions({
       options: {
         customBodyRenderLite: (rawIndex: number) => {
           const x = safeData[rawIndex];
-          const result = parseUa(x.ua);
+          const result = parseUa(x?.ua);
           return (
-            <Box sx={isMobile ? { textAlign: 'right' } : {}}>
-              {[result.os?.name, result.os?.version].filter(Boolean).join('/') || t('unknown')}
-            </Box>
+            <Box sx={mergeStyle}>{[result.os?.name, result.os?.version].filter(Boolean).join('/') || t('unknown')}</Box>
           );
         },
       },
@@ -264,9 +280,9 @@ export default function UserSessions({
       options: {
         customBodyRenderLite: (rawIndex: number) => {
           const x = safeData[rawIndex];
-          const result = parseUa(x.ua);
+          const result = parseUa(x?.ua);
           return (
-            <Box sx={isMobile ? { textAlign: 'right' } : {}}>
+            <Box sx={mergeStyle}>
               {[result.browser?.name, result.browser?.version].filter(Boolean).join('/') || t('unknown')}
             </Box>
           );
@@ -279,7 +295,7 @@ export default function UserSessions({
       options: {
         customBodyRenderLite: (rawIndex: number) => {
           const x = safeData[rawIndex];
-          return <Box sx={isMobile ? { textAlign: 'right' } : {}}>{x.extra?.walletOS || t('unknown')}</Box>;
+          return <Box sx={mergeStyle}>{x.extra?.walletOS || t('unknown')}</Box>;
         },
       },
     },
@@ -290,7 +306,7 @@ export default function UserSessions({
         customBodyRenderLite: (rawIndex: number) => {
           const x = safeData[rawIndex];
           return (
-            <Box sx={{ minWidth: 150, maxWidth: 250, ...(isMobile && { textAlign: 'right' }) }}>
+            <Box sx={mergeSx({ minWidth: 150, maxWidth: 250 }, isMobile ? textRightStyle : {})}>
               <UserSessionInfo sessionUser={x.user} user={user} />
             </Box>
           );
@@ -304,7 +320,7 @@ export default function UserSessions({
         customBodyRenderLite: (rawIndex: number) => {
           const x = safeData[rawIndex];
           return (
-            <Box sx={isMobile ? { textAlign: 'right' } : {}}>
+            <Box sx={mergeStyle}>
               {x.createdAt ? (
                 <RelativeTime value={x.createdAt} relativeRange={3 * 86400 * 1000} locale={locale} />
               ) : (
@@ -322,7 +338,7 @@ export default function UserSessions({
         customBodyRenderLite: (rawIndex: number) => {
           const x = safeData[rawIndex];
           return (
-            <Box sx={isMobile ? { textAlign: 'right' } : {}}>
+            <Box sx={mergeStyle}>
               {x.status === 'expired' ? (
                 t('expired')
               ) : (
@@ -350,7 +366,7 @@ export default function UserSessions({
         customBodyRenderLite: (rawIndex: number) => {
           const x = safeData[rawIndex];
           return (
-            <Box sx={isMobile ? { textAlign: 'right' } : {}}>
+            <Box sx={mergeStyle}>
               <Button
                 sx={{
                   whiteSpace: 'nowrap',