style: 修复移动端上部分样式问题

web/src/components/SectionHeader.tsx

@@ -11,7 +11,7 @@ export const SectionHeader: React.FC<SectionHeaderProps> = React.memo(
   (props) => {
     const [visible, setVisible] = useState(false);
     return (
-      <div className="h-12 relative flex items-center px-4 py-0 text-base font-bold flex-shrink-0 thin-line-bottom">
+      <div className="h-12 relative flex items-center py-0 text-base font-bold flex-shrink-0 thin-line-bottom">
         {React.isValidElement(props.menu) ? (
           <Dropdown
             onVisibleChange={setVisible}
@@ -20,7 +20,7 @@ export const SectionHeader: React.FC<SectionHeaderProps> = React.memo(
             trigger={['click']}
           >
             <div className="cursor-pointer flex flex-1">
-              <header className="flex-1 truncate">{props.children}</header>
+              <header className="flex-1 truncate px-4">{props.children}</header>
               <Icon
                 className={clsx('text-2xl transition-transform transform', {
                   'rotate-180': visible,
@@ -32,7 +32,7 @@ export const SectionHeader: React.FC<SectionHeaderProps> = React.memo(
             </div>
           </Dropdown>
         ) : (
-          <header className="flex-1 truncate">{props.children}</header>
+          <header className="flex-1 truncate px-4">{props.children}</header>
         )}
       </div>
     );

web/src/components/modals/SettingsView/Account.tsx

@@ -66,8 +66,8 @@ export const SettingsAccount: React.FC = React.memo(() => {
 
   return (
     <div>
-      <div className="flex">
+      <div className="flex flex-wrap">
-        <div className="w-1/3">
+        <div className="w-1/3 mobile:w-full">
           <AvatarUploader
             className="text-4xl"
             circle={true}
@@ -76,7 +76,7 @@ export const SettingsAccount: React.FC = React.memo(() => {
             <Avatar size={128} src={userInfo.avatar} name={userInfo.nickname} />
           </AvatarUploader>
         </div>
-        <div className="w-2/3">
+        <div className="w-2/3 mobile:w-full">
           <FullModalField
             title={t('用户昵称')}
             value={userInfo.nickname}

web/src/routes/Entry/index.tsx

@@ -16,7 +16,7 @@ export const EntryRoute = React.memo(() => {
       <div
         className={clsx(
           styles.entryLeft,
-          'entry-left w-142 sm:w-full pt-40 bg-gray-600 min-h-full flex justify-center bg-repeat-y'
+          'entry-left w-142 sm:w-full pt-40 px-4 bg-gray-600 min-h-full flex justify-center bg-repeat-y'
         )}
         style={{ backgroundImage: `url(${loginPatternUrl})` }}
       >