From 18d5f4c273366c3421e24a9ceb3739d4ed351825 Mon Sep 17 00:00:00 2001
From: moonrailgun <moonrailgun@gmail.com>
Date: Sat, 25 Sep 2021 15:15:32 +0800
Subject: [PATCH] =?UTF-8?q?style:=20=E4=BF=AE=E5=A4=8D=E7=A7=BB=E5=8A=A8?=
 =?UTF-8?q?=E7=AB=AF=E4=B8=8A=E9=83=A8=E5=88=86=E6=A0=B7=E5=BC=8F=E9=97=AE?=
 =?UTF-8?q?=E9=A2=98?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 web/src/components/SectionHeader.tsx               | 6 +++---
 web/src/components/modals/SettingsView/Account.tsx | 6 +++---
 web/src/routes/Entry/index.tsx                     | 2 +-
 3 files changed, 7 insertions(+), 7 deletions(-)

diff --git a/web/src/components/SectionHeader.tsx b/web/src/components/SectionHeader.tsx
index 089f121d..b3ed6b06 100644
--- a/web/src/components/SectionHeader.tsx
+++ b/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>
     );
diff --git a/web/src/components/modals/SettingsView/Account.tsx b/web/src/components/modals/SettingsView/Account.tsx
index afcd3410..fe404cb1 100644
--- a/web/src/components/modals/SettingsView/Account.tsx
+++ b/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="w-1/3">
+      <div className="flex flex-wrap">
+        <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}
diff --git a/web/src/routes/Entry/index.tsx b/web/src/routes/Entry/index.tsx
index 1f633b61..8a2c251e 100644
--- a/web/src/routes/Entry/index.tsx
+++ b/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})` }}
       >