diff --git a/app/electron/main.js b/app/electron/main.js
index e13885f0b..11a7f1c83 100644
--- a/app/electron/main.js
+++ b/app/electron/main.js
@@ -178,6 +178,8 @@ const boot = () => {
     backgroundColor: '#FFF', // 桌面端主窗体背景色设置为 `#FFF` Fix https://github.com/siyuan-note/siyuan/issues/4544
     width: windowState.width,
     height: windowState.height,
+    minWidth: 493,
+    minHeight: 376,
     x,
     y,
     fullscreenable: true,
diff --git a/app/src/assets/scss/_form.scss b/app/src/assets/scss/_form.scss
index 3ace72119..c28d3a2a2 100644
--- a/app/src/assets/scss/_form.scss
+++ b/app/src/assets/scss/_form.scss
@@ -56,7 +56,6 @@
   &__icona {
     position: relative;
     color: var(--b3-theme-on-surface);
-    flex: 1;
 
     &-icon {
       position: absolute;
diff --git a/app/src/assets/scss/_function.scss b/app/src/assets/scss/_function.scss
index ae5e07393..99e806dc6 100644
--- a/app/src/assets/scss/_function.scss
+++ b/app/src/assets/scss/_function.scss
@@ -90,6 +90,10 @@
     flex-shrink: 0;
   }
 
+  &__size96 {
+    width: 96px;
+  }
+
   &__rotate {
     animation: rotate 2s infinite linear;
   }
diff --git a/app/src/assets/scss/_responsive.scss b/app/src/assets/scss/_responsive.scss
new file mode 100644
index 000000000..50a66bc9f
--- /dev/null
+++ b/app/src/assets/scss/_responsive.scss
@@ -0,0 +1,45 @@
+@media (max-width: 750px) {
+  .config {
+    &__panel {
+      & > .b3-tab-bar {
+        width: auto;
+
+        .b3-list-item__text {
+          display: none;
+        }
+
+        .b3-list-item--big .b3-list-item__graphic {
+          margin-right: 0;
+        }
+      }
+
+      .config-query label {
+        width: 100%;
+        margin-top: 8px;
+      }
+
+      .config-account {
+        flex-direction: column;
+        min-height: 100%;
+      }
+
+      .b3-form__icona {
+        margin-top: 8px;
+      }
+    }
+
+    &__item {
+      flex-wrap: wrap;
+
+      & > .b3-text-field,
+      & > .b3-select,
+      .b3-slider,
+      & > .b3-button,
+      & > .b3-tooltips,
+      &-line {
+        width: 100%;
+        margin-top: 8px;
+      }
+    }
+  }
+}
diff --git a/app/src/assets/scss/base.scss b/app/src/assets/scss/base.scss
index ed4361431..2b8ad395c 100644
--- a/app/src/assets/scss/base.scss
+++ b/app/src/assets/scss/base.scss
@@ -22,6 +22,7 @@
 @import "card";
 @import "menu";
 @import "color";
+@import "responsive";
 // un refactor
 @import "protyle";
 @import "typography";
@@ -285,6 +286,16 @@ progressLoading: 400
 }
 
 .config {
+  &__panel {
+    & > .b3-tab-bar {
+      user-select: none;
+      width: 180px;
+      overflow: auto;
+      padding: 8px 0;
+      box-sizing: border-box
+    }
+  }
+
   &-query {
     display: flex;
     flex-wrap: wrap;
@@ -335,6 +346,7 @@ progressLoading: 400
       margin-bottom: 82px;
       width: 100%;
       flex: 1;
+      min-height: 128px;
     }
 
     &__info {
@@ -378,6 +390,7 @@ progressLoading: 400
   &-about__logo {
     display: flex;
     align-items: center;
+    flex-wrap: wrap;
 
     img {
       height: 24px;
diff --git a/app/src/assets/scss/mobile.scss b/app/src/assets/scss/mobile.scss
index 08d4a2585..e244afa15 100644
--- a/app/src/assets/scss/mobile.scss
+++ b/app/src/assets/scss/mobile.scss
@@ -18,6 +18,7 @@
 @import "reset";
 @import "function";
 @import "color";
+@import "responsive";
 // un refactor
 @import "protyle";
 @import "typography";
diff --git a/app/src/config/about.ts b/app/src/config/about.ts
index 6615d5144..88507fc8c 100644
--- a/app/src/config/about.ts
+++ b/app/src/config/about.ts
@@ -57,7 +57,7 @@ export const about = {
     <div class="fn__space"></div>
     <input class="b3-switch fn__flex-center" id="networkServe" type="checkbox"${window.siyuan.config.system.networkServe ? " checked" : ""}>
 </label>
-<label class="b3-label${isBrowser() ? " fn__none" : " fn__flex"}">
+<label class="b3-label config__item${isBrowser() ? " fn__none" : " fn__flex"}">
     <div class="fn__flex-1">
        ${window.siyuan.languages.about2}
         <div class="b3-label__text">${window.siyuan.languages.about3.replace("${port}", location.port)}</div>
@@ -68,7 +68,7 @@ export const about = {
         <svg><use xlink:href="#iconLink"></use></svg>${window.siyuan.languages.about4}
     </button>
 </label>
-<label class="b3-label fn__flex">
+<label class="b3-label fn__flex config__item">
     <div class="fn__flex-1">
         ${window.siyuan.languages.about5}
         <div class="b3-label__text">${window.siyuan.languages.about6}</div>
@@ -78,37 +78,37 @@ export const about = {
         <svg><use xlink:href="#iconLock"></use></svg>${window.siyuan.languages.config}
     </button>
 </label>
-<div class="b3-label fn__flex">
+<div class="b3-label fn__flex config__item">
     <div class="fn__flex-1 fn__flex-center">
         ${window.siyuan.languages.dataRepoKey}
         <div class="b3-label__text">${window.siyuan.languages.dataRepoKeyTip1}</div>
         <div class="b3-label__text ft__error">${window.siyuan.languages.dataRepoKeyTip2}</div>
     </div>
     <div class="fn__space"></div>
-    <div class="fn__size200 fn__flex-center${window.siyuan.config.repo.key ? " fn__none" : ""}">
-        <button class="b3-button b3-button--outline fn__size200" id="importKey">
+    <div class="fn__size200 config__item-line fn__flex-center${window.siyuan.config.repo.key ? " fn__none" : ""}">
+        <button class="b3-button b3-button--outline fn__block" id="importKey">
             <svg><use xlink:href="#iconDownload"></use></svg>${window.siyuan.languages.importKey}
         </button>
         <div class="fn__hr"></div>
-        <button class="b3-button b3-button--outline fn__size200" id="initKey">
+        <button class="b3-button b3-button--outline fn__block" id="initKey">
             <svg><use xlink:href="#iconLock"></use></svg>${window.siyuan.languages.genKey}
         </button>
         <div class="fn__hr"></div>
-        <button class="b3-button b3-button--outline fn__size200" id="initKeyByPW">
+        <button class="b3-button b3-button--outline fn__block" id="initKeyByPW">
             <svg><use xlink:href="#iconHand"></use></svg>${window.siyuan.languages.genKeyByPW}
         </button>
     </div>
-    <div class="fn__size200 fn__flex-center${window.siyuan.config.repo.key ? "" : " fn__none"}">
-        <button class="b3-button b3-button--outline fn__size200" id="copyKey">
+    <div class="fn__size200 config__item-line fn__flex-center${window.siyuan.config.repo.key ? "" : " fn__none"}">
+        <button class="b3-button b3-button--outline fn__block" id="copyKey">
             <svg><use xlink:href="#iconCopy"></use></svg>${window.siyuan.languages.copyKey}
         </button>
         <div class="fn__hr"></div>
-        <button class="b3-button b3-button--outline fn__size200" id="resetRepo">
+        <button class="b3-button b3-button--outline fn__block" id="resetRepo">
             <svg><use xlink:href="#iconTrashcan"></use></svg>${window.siyuan.languages.resetRepo}
         </button>
     </div>
 </div>
-<label class="fn__flex b3-label">
+<label class="fn__flex b3-label config__item">
     <div class="fn__flex-1">
         ${window.siyuan.languages.systemLog}
         <div class="b3-label__text">${window.siyuan.languages.systemLogTip}</div>
@@ -118,24 +118,24 @@ export const about = {
         <svg><use xlink:href="#iconUpload"></use></svg>${window.siyuan.languages.export}
     </button>
 </label>
-<label class="fn__flex b3-label">
+<label class="fn__flex b3-label config__item">
     <div class="fn__flex-1">
         ${window.siyuan.languages.currentVer} v${Constants.SIYUAN_VERSION}
         <span id="isInsider"></span>
         <div class="b3-label__text">${window.siyuan.languages.visitAnnouncements}</div>
     </div>
     <div class="fn__space"></div>
-    <div class="fn__flex-center fn__size200">
-        <button id="checkUpdateBtn" class="b3-button b3-button--outline fn__size200">
+    <div class="fn__flex-center fn__size200 config__item-line">
+        <button id="checkUpdateBtn" class="b3-button b3-button--outline fn__block">
             <svg><use xlink:href="#iconRefresh"></use></svg>${window.siyuan.languages.checkUpdate}
         </button>
         <div class="fn__hr${isBrowser() ? "" : " fn__none"}"></div>
-        <button id="menuSafeQuit" class="b3-button b3-button--outline fn__size200${isBrowser() ? "" : " fn__none"}">
+        <button id="menuSafeQuit" class="b3-button b3-button--outline fn__block${isBrowser() ? "" : " fn__none"}">
             <svg><use xlink:href="#iconQuit"></use></svg>${window.siyuan.languages.safeQuit}
         </button>
     </div>
 </label>
-<label class="fn__flex b3-label${isBrowser() ? " fn__none" : ""}">
+<label class="fn__flex config__item b3-label${isBrowser() ? " fn__none" : ""}">
     <div class="fn__flex-1">
         <div class="fn__flex">
             ${window.siyuan.languages.about7}
@@ -147,7 +147,7 @@ export const about = {
     <div class="fn__space"></div>
     <select id="workspaceDir" class="fn__flex-center b3-select fn__size200"></select>
 </label>
-<label class="fn__flex b3-label">
+<label class="fn__flex config__item  b3-label">
     <div class="fn__flex-1">
         ${window.siyuan.languages.about13}
          <div class="b3-label__text">${window.siyuan.languages.about14}</div>
@@ -160,18 +160,18 @@ export const about = {
     <div class="b3-label__text">
         ${window.siyuan.languages.about17}
     </div>
-    <div class="b3-label__text fn__flex" style="padding: 4px 0 4px 4px;">
+    <div class="b3-label__text fn__flex config__item" style="padding: 4px 0 4px 4px;">
         <select id="aboutScheme" class="b3-select">
             <option value="" ${window.siyuan.config.system.networkProxy.scheme === "" ? "selected" : ""}>${window.siyuan.languages.directConnection}</option>
             <option value="socks5" ${window.siyuan.config.system.networkProxy.scheme === "socks5" ? "selected" : ""}>SOCKS5</option>
             <option value="https" ${window.siyuan.config.system.networkProxy.scheme === "https" ? "selected" : ""}>HTTPS</option>
         </select>
         <span class="fn__space"></span>
-        <input id="aboutHost" placeholder="Host/IP" class="b3-text-field fn__flex-1 fn__block" value="${window.siyuan.config.system.networkProxy.host}"/>
+        <input id="aboutHost" placeholder="Host/IP" class="b3-text-field fn__block" value="${window.siyuan.config.system.networkProxy.host}"/>
         <span class="fn__space"></span>
-        <input id="aboutPort" placeholder="Port" class="b3-text-field fn__flex-1 fn__block" value="${window.siyuan.config.system.networkProxy.port}" type="number"/>
+        <input id="aboutPort" placeholder="Port" class="b3-text-field fn__block" value="${window.siyuan.config.system.networkProxy.port}" type="number"/>
         <span class="fn__space"></span>
-        <button id="aboutConfirm" class="b3-button b3-button--outline">${window.siyuan.languages.confirm}</button>
+        <button id="aboutConfirm" class="b3-button fn__size200 b3-button--outline">${window.siyuan.languages.confirm}</button>
     </div>
 </div>
 <div class="b3-label">
diff --git a/app/src/config/appearance.ts b/app/src/config/appearance.ts
index af162350e..e85fb8f41 100644
--- a/app/src/config/appearance.ts
+++ b/app/src/config/appearance.ts
@@ -14,7 +14,7 @@ import {loadAssets} from "../util/assets";
 export const appearance = {
     element: undefined as Element,
     genHTML: () => {
-        return `<label class="fn__flex b3-label">
+        return `<label class="fn__flex b3-label config__item">
     <div class="fn__flex-1">
         ${window.siyuan.languages.appearance4}
         <div class="b3-label__text">${window.siyuan.languages.appearance5}</div>
@@ -33,7 +33,7 @@ export const appearance = {
         <a href="javascript:void(0)" ${isBrowser() ? " class='fn__none'" : ""} id="appearanceOpenTheme" class="fn__flex-center">${window.siyuan.languages.appearance9}</a>
     </div>
     <div class="fn__hr"></div>
-    <label class="fn__flex">
+    <label class="fn__flex config__item">
         <div class="fn__flex-center fn__flex-1 ft__on-surface">
             ${window.siyuan.languages.theme11}
         </div>
@@ -43,7 +43,7 @@ export const appearance = {
         </select>
     </label>
     <div class="fn__hr"></div>
-    <label class="fn__flex">
+    <label class="fn__flex config__item">
         <div class="fn__flex-center fn__flex-1 ft__on-surface">
             ${window.siyuan.languages.theme12}
         </div>
@@ -53,7 +53,7 @@ export const appearance = {
         </select>
     </label>
 </div>
-<label class="fn__flex b3-label">
+<label class="fn__flex b3-label config__item">
     <div class="fn__flex-1">
         <div class="fn__flex">
             ${window.siyuan.languages.icon}
@@ -72,7 +72,7 @@ export const appearance = {
         ${window.siyuan.languages.appearance1}
     </div>
     <div class="fn__hr"></div>
-    <label class="fn__flex">
+    <label class="fn__flex config__item">
         <div class="fn__flex-center fn__flex-1 ft__on-surface">${window.siyuan.languages.appearance2}</div>
         <span class="fn__space"></span>
         <select id="codeBlockThemeLight" class="b3-select fn__size200">
@@ -80,7 +80,7 @@ export const appearance = {
         </select>
     </label>
     <div class="fn__hr"></div>
-    <label class="fn__flex">
+    <label class="fn__flex config__item">
         <div class="fn__flex-center fn__flex-1 ft__on-surface">${window.siyuan.languages.appearance3}</div>
         <span class="fn__space"></span>
         <select id="codeBlockThemeDark" class="b3-select fn__size200">
@@ -88,7 +88,7 @@ export const appearance = {
         </select>
     </label>
 </div></div>
-<label class="fn__flex b3-label">
+<label class="fn__flex b3-label config__item">
     <div class="fn__flex-1">
         ${window.siyuan.languages.language}
         <div class="b3-label__text">${window.siyuan.languages.language1}</div>
@@ -96,7 +96,7 @@ export const appearance = {
     <span class="fn__space"></span>
     <select id="lang" class="b3-select fn__flex-center fn__size200">${genOptions(window.siyuan.config.langs, window.siyuan.config.appearance.lang)}</select>
 </label>
-<label class="b3-label${isBrowser() ? " fn__none" : " fn__flex"}">
+<label class="b3-label config__item${isBrowser() ? " fn__none" : " fn__flex"}">
     <div class="fn__flex-1">
         ${window.siyuan.languages.customEmoji}
         <div class="b3-label__text">${window.siyuan.languages.customEmojiTip}</div>
@@ -107,7 +107,7 @@ export const appearance = {
         ${window.siyuan.languages.refresh}
     </button>
 </label>
-<label class="b3-label fn__flex">
+<label class="b3-label fn__flex config__item">
    <div class="fn__flex-1">
         ${window.siyuan.languages.resetLayout}
         <div class="b3-label__text">${window.siyuan.languages.appearance6}</div>
@@ -117,7 +117,7 @@ export const appearance = {
         <svg><use xlink:href="#iconUndo"></use></svg>${window.siyuan.languages.reset}
     </button>
 </label>
-<label class="b3-label fn__flex">
+<label class="b3-label fn__flex config__item">
     <div class="fn__flex-1 fn__flex-center">
         ${window.siyuan.languages.codeSnippet}
     </div>
@@ -126,7 +126,7 @@ export const appearance = {
         <svg><use xlink:href="#iconSettings"></use></svg>${window.siyuan.languages.config}
     </button>
 </label>
-<label class="b3-label fn__flex">
+<label class="b3-label fn__flex config__item">
     <div class="fn__flex-1 fn__flex-center">
         ${window.siyuan.languages.theme13} 
     </div>
diff --git a/app/src/config/editor.ts b/app/src/config/editor.ts
index c502ec599..2fb331b28 100644
--- a/app/src/config/editor.ts
+++ b/app/src/config/editor.ts
@@ -173,7 +173,7 @@ export const editor = {
     <span class="fn__space"></span>
     <input class="b3-switch fn__flex-center" id="virtualBlockRef" type="checkbox"${window.siyuan.config.editor.virtualBlockRef ? " checked" : ""}/>
 </label>
-<label class="fn__flex b3-label">
+<label class="fn__flex b3-label config__item">
     <div class="fn__flex-1">
         ${window.siyuan.languages.md9}
         <div class="b3-label__text">${window.siyuan.languages.md36}</div>
@@ -181,7 +181,7 @@ export const editor = {
     <span class="fn__space"></span>
     <input class="b3-text-field fn__flex-center fn__size200" id="virtualBlockRefInclude" value="${window.siyuan.config.editor.virtualBlockRefInclude}" />
 </label>
-<label class="fn__flex b3-label">
+<label class="fn__flex b3-label config__item">
     <div class="fn__flex-1">
         ${window.siyuan.languages.md35}
         <div class="b3-label__text">${window.siyuan.languages.md36}</div>
@@ -190,7 +190,7 @@ export const editor = {
     <span class="fn__space"></span>
     <input class="b3-text-field fn__flex-center fn__size200" id="virtualBlockRefExclude" value="${window.siyuan.config.editor.virtualBlockRefExclude}" />
 </label>
-<label class="fn__flex b3-label">
+<label class="fn__flex b3-label config__item">
     <div class="fn__flex-1">
         ${window.siyuan.languages.md39}
         <div class="b3-label__text">${window.siyuan.languages.md40}</div>
@@ -198,7 +198,7 @@ export const editor = {
     <span class="fn__space"></span>
     <input class="b3-text-field fn__flex-center fn__size200" id="plantUMLServePath" value="${window.siyuan.config.editor.plantUMLServePath}"/>
 </label>
-<label class="fn__flex b3-label">
+<label class="fn__flex b3-label config__item">
     <div class="fn__flex-1">
         ${window.siyuan.languages.dynamicLoadBlocks}
         <div class="b3-label__text">${window.siyuan.languages.dynamicLoadBlocksTip}</div>
@@ -206,7 +206,7 @@ export const editor = {
     <span class="fn__space"></span>
     <input class="b3-text-field fn__flex-center fn__size200" id="dynamicLoadBlocks" type="number" min="48" max="1024" value="${window.siyuan.config.editor.dynamicLoadBlocks}"/>
 </label>
-<label class="fn__flex b3-label">
+<label class="fn__flex b3-label config__item">
     <div class="fn__flex-1">
         ${window.siyuan.languages.md37}
         <div class="b3-label__text">${window.siyuan.languages.md38}</div>
@@ -214,7 +214,7 @@ export const editor = {
     <span class="fn__space"></span>
     <input class="b3-text-field fn__flex-center fn__size200" id="blockRefDynamicAnchorTextMaxLen" type="number" min="1" max="5120" value="${window.siyuan.config.editor.blockRefDynamicAnchorTextMaxLen}"/>
 </label>
-<label class="fn__flex b3-label">
+<label class="fn__flex b3-label config__item">
     <div class="fn__flex-1">
         ${window.siyuan.languages.generateHistory}
         <div class="b3-label__text">${window.siyuan.languages.generateHistoryInterval}</div>
@@ -222,7 +222,7 @@ export const editor = {
     <span class="fn__space"></span>
     <input class="b3-text-field fn__flex-center fn__size200" id="generateHistoryInterval" type="number" min="0" max="120" value="${window.siyuan.config.editor.generateHistoryInterval}"/>
 </label>
-<label class="fn__flex b3-label">
+<label class="fn__flex b3-label config__item">
     <div class="fn__flex-1">
         ${window.siyuan.languages.historyRetentionDays} 
         <a href="javascript:void(0)" id="clearHistory">${window.siyuan.languages.clearHistory}</a>
@@ -231,7 +231,7 @@ export const editor = {
     <span class="fn__space"></span>
     <input class="b3-text-field fn__flex-center fn__size200" id="historyRetentionDays" type="number" min="0" max="120" value="${window.siyuan.config.editor.historyRetentionDays}"/>
 </label>
-<label class="fn__flex b3-label">
+<label class="fn__flex b3-label config__item">
     <div class="fn__flex-1">
         ${window.siyuan.languages.font}
         <div class="b3-label__text">${window.siyuan.languages.font1}</div>
@@ -239,7 +239,7 @@ export const editor = {
     <span class="fn__space"></span>
     ${fontFamilyHTML}
 </label>
-<label class="fn__flex b3-label">
+<label class="fn__flex b3-label config__item">
     <div class="fn__flex-1">
         ${window.siyuan.languages.fontSize}
         <div class="b3-label__text">${window.siyuan.languages.fontSizeTip}</div>
@@ -249,7 +249,7 @@ export const editor = {
         <input class="b3-slider fn__size200" id="fontSize" max="72" min="9" step="1" type="range" value="${window.siyuan.config.editor.fontSize}">
     </div>
 </label>
-<label class="fn__flex b3-label">
+<label class="fn__flex b3-label config__item">
     <div class="fn__flex-1">
         ${window.siyuan.languages.md29}
         <div class="b3-label__text">${window.siyuan.languages.md30}</div>
diff --git a/app/src/config/exportConfig.ts b/app/src/config/exportConfig.ts
index 9e97e2137..bb7f49a3a 100644
--- a/app/src/config/exportConfig.ts
+++ b/app/src/config/exportConfig.ts
@@ -35,7 +35,7 @@ export const exportConfig = {
     <span class="fn__space"></span>
     <input class="b3-switch fn__flex-center" id="addFooter" type="checkbox"${window.siyuan.config.export.addFooter ? " checked" : ""}/>
 </label>
-<label class="fn__flex b3-label">
+<label class="fn__flex b3-label config__item">
     <div class="fn__flex-1">
         ${window.siyuan.languages.blockRef}
         <div class="b3-label__text">${window.siyuan.languages.export11}</div>
@@ -47,7 +47,7 @@ export const exportConfig = {
         <option value="4" ${window.siyuan.config.export.blockRefMode === 4 ? "selected" : ""}>${window.siyuan.languages.export4}</option>
     </select>
 </label>
-<label class="fn__flex b3-label">
+<label class="fn__flex b3-label config__item">
     <div class="fn__flex-1">
         ${window.siyuan.languages.blockEmbed}
         <div class="b3-label__text">${window.siyuan.languages.export12}</div>
@@ -58,7 +58,7 @@ export const exportConfig = {
         <option value="1" ${window.siyuan.config.export.blockEmbedMode === 1 ? "selected" : ""}>${window.siyuan.languages.export1}</option>
     </select>
 </label>
-<label class="fn__flex b3-label">
+<label class="fn__flex b3-label config__item">
     <div class="fn__flex-1">
         ${window.siyuan.languages.export5}
         <div class="b3-label__text">${window.siyuan.languages.export6}</div>
@@ -69,37 +69,37 @@ export const exportConfig = {
         <option value="1" ${window.siyuan.config.export.fileAnnotationRefMode === 1 ? "selected" : ""}>${window.siyuan.languages.export8}</option>
     </select>
 </label>
-<label class="fn__flex b3-label">
+<label class="fn__flex b3-label config__item">
     <div class="fn__flex-1">
         ${window.siyuan.languages.export13}
         <div class="b3-label__text">${window.siyuan.languages.export14}</div>
     </div>
     <span class="fn__space"></span>
-    <input class="b3-text-field fn__flex-center" id="blockRefTextLeft" style="width: 96px">
+    <input class="b3-text-field fn__flex-center fn__size96" id="blockRefTextLeft">
     <span class="fn__space"></span>
-    <input class="b3-text-field fn__flex-center" id="blockRefTextRight" style="width: 96px">
+    <input class="b3-text-field fn__flex-center fn__size96" id="blockRefTextRight">
 </label>
-<label class="fn__flex b3-label">
+<label class="fn__flex b3-label config__item">
     <div class="fn__flex-1">
         ${window.siyuan.languages.export15}
         <div class="b3-label__text">${window.siyuan.languages.export16}</div>
     </div>
     <span class="fn__space"></span>
-    <input class="b3-text-field fn__flex-center" id="tagOpenMarker" style="width: 96px">
+    <input class="b3-text-field fn__flex-center fn__size96" id="tagOpenMarker">
     <span class="fn__space"></span>
-    <input class="b3-text-field fn__flex-center" id="tagCloseMarker" style="width: 96px">
+    <input class="b3-text-field fn__flex-center fn__size96" id="tagCloseMarker">
 </label>
-<label class="fn__flex b3-label${isBrowser() ? " fn__none" : ""}">
+<label class="fn__flex b3-label config__item${isBrowser() ? " fn__none" : ""}">
     <div class="fn__flex-1">
         ${window.siyuan.languages.export19}
         <span class="fn__space"></span>
-        <a href="javascript:void(0)" id="pandocBinPath">${window.siyuan.config.export.pandocBin}</a>
+        <a href="javascript:void(0)" id="pandocBinPath" style="word-break: break-all">${window.siyuan.config.export.pandocBin}</a>
         <div class="b3-label__text">${window.siyuan.languages.export20}</div>
     </div>
     <span class="fn__space"></span>
     <button class="b3-button b3-button--outline fn__flex-center fn__size200" id="pandocBin"><svg><use xlink:href="#iconSettings"></use></svg>${window.siyuan.languages.config}</button>
 </label>
-<label class="fn__flex b3-label">
+<label class="fn__flex b3-label config__item">
     <div class="fn__flex-1 fn__flex-center">
         ${window.siyuan.languages.export} Data
         <div class="b3-label__text">${window.siyuan.languages.exportDataTip}</div>
@@ -107,7 +107,7 @@ export const exportConfig = {
     <span class="fn__space"></span>
     <button class="b3-button b3-button--outline fn__flex-center fn__size200" id="exportData"><svg><use xlink:href="#iconUpload"></use></svg>${window.siyuan.languages.export}</button>
 </label>
-<div class="fn__flex b3-label">
+<div class="fn__flex b3-label config__item">
     <div class="fn__flex-1 fn__flex-center">
         ${window.siyuan.languages.import} Data
         <div class="b3-label__text">${window.siyuan.languages.importDataTip}</div>
diff --git a/app/src/config/fileTree.ts b/app/src/config/fileTree.ts
index 4204aa561..26b2e7056 100644
--- a/app/src/config/fileTree.ts
+++ b/app/src/config/fileTree.ts
@@ -43,7 +43,7 @@ export const fileTree = {
     <span class="fn__space"></span>
     <input class="b3-switch fn__flex-center" id="removeDocWithoutConfirm" type="checkbox"${window.siyuan.config.fileTree.removeDocWithoutConfirm ? " checked" : ""}/>
 </label>
-<label class="fn__flex b3-label">
+<label class="fn__flex b3-label config__item">
     <div class="fn__flex-1">
         ${window.siyuan.languages.fileTree12}
         <div class="b3-label__text">${window.siyuan.languages.fileTree13}</div>
@@ -51,7 +51,7 @@ export const fileTree = {
     <span class="fn__space"></span>
     <input class="b3-text-field fn__flex-center fn__size200" id="createDocNameTemplate" value="">
 </label>
-<label class="b3-label fn__flex">
+<label class="b3-label fn__flex config__item">
     <div class="fn__flex-1">
         ${window.siyuan.languages.fileTree5}
         <div class="b3-label__text">${window.siyuan.languages.fileTree6}</div>
@@ -59,7 +59,7 @@ export const fileTree = {
     <span class="fn__space"></span>
     <input class="b3-text-field fn__flex-center fn__size200" id="refCreateSavePath" value="${window.siyuan.config.fileTree.refCreateSavePath}">
 </label>
-<label class="fn__flex b3-label">
+<label class="fn__flex b3-label config__item">
     <div class="fn__flex-1">
         ${window.siyuan.languages.fileTree16}
         <div class="b3-label__text">${window.siyuan.languages.fileTree17}</div>
@@ -67,7 +67,7 @@ export const fileTree = {
     <span class="fn__space"></span>
     <input class="b3-text-field fn__flex-center fn__size200" id="maxListCount" type="number" min="1" max="10240" value="${window.siyuan.config.fileTree.maxListCount}">
 </label>
-<label class="fn__flex b3-label">
+<label class="fn__flex b3-label config__item">
     <div class="fn__flex-1">
         ${window.siyuan.languages.tabLimit}
         <div class="b3-label__text">${window.siyuan.languages.tabLimit1}</div>
diff --git a/app/src/config/index.ts b/app/src/config/index.ts
index 5d1a45e62..ef6d999cf 100644
--- a/app/src/config/index.ts
+++ b/app/src/config/index.ts
@@ -22,23 +22,23 @@ export const openSetting = () => {
     if (exitDialog) {
         return exitDialog;
     }
-    const height = Math.min(window.innerHeight * .9, Math.max(window.innerHeight * .7, 52 * 11));
+    const height = Math.min(window.innerHeight * .9 - 42, Math.max(window.innerHeight * .7, 52 * 11));
     const dialog = new Dialog({
         content: `<div class="fn__flex-column" style="border-radius: 4px;overflow: hidden;position: relative">
 <div class="b3-form__icon search__header"><svg style="left: 14px;" class="b3-form__icon-icon"><use xlink:href="#iconSearch"></use></svg><input class="b3-text-field b3-text-field--text fn__block b3-form__icon-input"></div>
-<div class="fn__flex-1 fn__flex">
-  <ul class="b3-tab-bar b3-list b3-list--background" style="user-select:none;width: 180px;height:${height}px;overflow: auto;padding: 8px 0;box-sizing: border-box">
-    <li data-name="editor" class="b3-list-item--focus b3-list-item b3-list-item--big"><svg class="b3-list-item__graphic"><use xlink:href="#iconEdit"></use></svg>${window.siyuan.languages.editor}</li>
-    <li data-name="filetree" class="b3-list-item b3-list-item--big"><svg class="b3-list-item__graphic"><use xlink:href="#iconFiles"></use></svg>${window.siyuan.languages.fileTree}</li>
-    <li data-name="image" class="b3-list-item b3-list-item--big"><svg class="b3-list-item__graphic"><use xlink:href="#iconImage"></use></svg>${window.siyuan.languages.assets}</li>
-    <li data-name="export" class="b3-list-item b3-list-item--big"><svg class="b3-list-item__graphic"><use xlink:href="#iconUpload"></use></svg>${window.siyuan.languages.export}</li>
-    <li data-name="appearance" class="b3-list-item b3-list-item--big"><svg class="b3-list-item__graphic"><use xlink:href="#iconTheme"></use></svg>${window.siyuan.languages.appearance}</li>
-    <li data-name="bazaar" class="b3-list-item b3-list-item--big"><svg class="b3-list-item__graphic"><use xlink:href="#iconBazaar"></use></svg>${window.siyuan.languages.bazaar}</li>
-    <li data-name="search" class="b3-list-item b3-list-item--big"><svg class="b3-list-item__graphic"><use xlink:href="#iconSearch"></use></svg>${window.siyuan.languages.search}</li>
-    <li data-name="keymap" class="b3-list-item b3-list-item--big"><svg class="b3-list-item__graphic"><use xlink:href="#iconKeymap"></use></svg>${window.siyuan.languages.keymap}</li>
-    <li data-name="account" class="b3-list-item b3-list-item--big"><svg class="b3-list-item__graphic"><use xlink:href="#iconAccount"></use></svg>${window.siyuan.languages.account}</li>
-    <li data-name="repos" class="b3-list-item b3-list-item--big"><svg class="b3-list-item__graphic"><use xlink:href="#iconCloud"></use></svg>${window.siyuan.languages.cloud}</li>
-    <li data-name="about" class="b3-list-item b3-list-item--big"><svg class="b3-list-item__graphic"><use xlink:href="#iconInfo"></use></svg>${window.siyuan.languages.about}</li>
+<div class="fn__flex-1 fn__flex config__panel">
+  <ul class="b3-tab-bar b3-list b3-list--background" style="height:${height}px;">
+    <li data-name="editor" class="b3-list-item--focus b3-list-item b3-list-item--big"><svg class="b3-list-item__graphic"><use xlink:href="#iconEdit"></use></svg><span class="b3-list-item__text">${window.siyuan.languages.editor}</span></li>
+    <li data-name="filetree" class="b3-list-item b3-list-item--big"><svg class="b3-list-item__graphic"><use xlink:href="#iconFiles"></use></svg><span class="b3-list-item__text">${window.siyuan.languages.fileTree}</span></li>
+    <li data-name="image" class="b3-list-item b3-list-item--big"><svg class="b3-list-item__graphic"><use xlink:href="#iconImage"></use></svg><span class="b3-list-item__text">${window.siyuan.languages.assets}</span></li>
+    <li data-name="export" class="b3-list-item b3-list-item--big"><svg class="b3-list-item__graphic"><use xlink:href="#iconUpload"></use></svg><span class="b3-list-item__text">${window.siyuan.languages.export}</span></li>
+    <li data-name="appearance" class="b3-list-item b3-list-item--big"><svg class="b3-list-item__graphic"><use xlink:href="#iconTheme"></use></svg><span class="b3-list-item__text">${window.siyuan.languages.appearance}</span></li>
+    <li data-name="bazaar" class="b3-list-item b3-list-item--big"><svg class="b3-list-item__graphic"><use xlink:href="#iconBazaar"></use></svg><span class="b3-list-item__text">${window.siyuan.languages.bazaar}</span></li>
+    <li data-name="search" class="b3-list-item b3-list-item--big"><svg class="b3-list-item__graphic"><use xlink:href="#iconSearch"></use></svg><span class="b3-list-item__text">${window.siyuan.languages.search}</span></li>
+    <li data-name="keymap" class="b3-list-item b3-list-item--big"><svg class="b3-list-item__graphic"><use xlink:href="#iconKeymap"></use></svg><span class="b3-list-item__text">${window.siyuan.languages.keymap}</span></li>
+    <li data-name="account" class="b3-list-item b3-list-item--big"><svg class="b3-list-item__graphic"><use xlink:href="#iconAccount"></use></svg><span class="b3-list-item__text">${window.siyuan.languages.account}</span></li>
+    <li data-name="repos" class="b3-list-item b3-list-item--big"><svg class="b3-list-item__graphic"><use xlink:href="#iconCloud"></use></svg><span class="b3-list-item__text">${window.siyuan.languages.cloud}</span></li>
+    <li data-name="about" class="b3-list-item b3-list-item--big"><svg class="b3-list-item__graphic"><use xlink:href="#iconInfo"></use></svg><span class="b3-list-item__text">${window.siyuan.languages.about}</span></li>
   </ul>
   <div class="b3-tab-container" style="height:${height}px" data-name="editor">${editor.genHTML()}</div>
   <div class="b3-tab-container fn__none" style="height:${height}px" data-name="filetree"></div>
@@ -53,7 +53,7 @@ export const openSetting = () => {
   <div class="b3-tab-container fn__none" style="height:${height}px" data-name="about"></div>
 </div>
 </div>`,
-        width: "80vw",
+        width: "90vw",
     });
 
     initConfigSearch(dialog.element);
diff --git a/app/src/config/keymap.ts b/app/src/config/keymap.ts
index 7e24d409c..ac601407b 100644
--- a/app/src/config/keymap.ts
+++ b/app/src/config/keymap.ts
@@ -15,7 +15,7 @@ export const keymap = {
                 html += `<label class="b3-list-item b3-list-item--hide-action">
     <span class="b3-list-item__text">${window.siyuan.languages[key]}</span>
     <span class="fn__space fn__flex-1"></span>
-    <input data-key="${keys + Constants.ZWSP + key}" data-value="${keymap[key].custom}" data-default="${keymap[key].default}" class="b3-text-field" value="${updateHotkeyTip(keymap[key].custom)}" spellcheck="false">
+    <input data-key="${keys + Constants.ZWSP + key}" data-value="${keymap[key].custom}" data-default="${keymap[key].default}" class="b3-text-field fn__size96" value="${updateHotkeyTip(keymap[key].custom)}" spellcheck="false">
     <span data-type="reset" class="b3-list-item__action b3-tooltips b3-tooltips__w" aria-label="${window.siyuan.languages.reset}">
         <svg><use xlink:href="#iconUndo"></use></svg>
     </span>
@@ -28,7 +28,7 @@ export const keymap = {
         return html;
     },
     genHTML() {
-        return `<label class="fn__flex b3-label">
+        return `<label class="fn__flex b3-label config__item">
     <span class="fn__flex-center">${window.siyuan.languages.keymapTip}</span>
     <span class="fn__flex-1"></span>
     <button id="keymapRefreshBtn" class="b3-button b3-button--outline fn__flex-center fn__size200">
@@ -36,7 +36,7 @@ export const keymap = {
         ${window.siyuan.languages.refresh}
     </button>
 </label>
-<label class="fn__flex b3-label">
+<label class="fn__flex b3-label config__item">
     <span class="fn__flex-center">${window.siyuan.languages.keymapTip2}</span>
     <span class="fn__flex-1"></span>
     <span class="fn__space"></span>
@@ -46,7 +46,7 @@ export const keymap = {
     </button>
 </label>
 <div class="b3-label file-tree config-keymap" id="keymapList">
-    <div class="fn__flex fn__flex-wrap">
+    <div class="fn__flex config__item">
         <label class="b3-form__icon fn__flex-1">
             <svg class="b3-form__icon-icon"><use xlink:href="#iconSearch"></use></svg>
             <input id="keymapInput" class="b3-form__icon-input b3-text-field fn__block" placeholder="${window.siyuan.languages.search}">
diff --git a/app/src/config/query.ts b/app/src/config/query.ts
index 7c86e0fa5..25c35f36c 100644
--- a/app/src/config/query.ts
+++ b/app/src/config/query.ts
@@ -198,7 +198,7 @@ export const query = {
         </label>
     </div>
 </div>
-<label class="fn__flex b3-label">
+<label class="fn__flex b3-label config__item">
     <div class="fn__flex-1">
         ${window.siyuan.languages.searchLimit}
          <div class="b3-label__text">${window.siyuan.languages.searchLimit1}</div>
diff --git a/app/src/config/repos.ts b/app/src/config/repos.ts
index 9226f4590..527806fa5 100644
--- a/app/src/config/repos.ts
+++ b/app/src/config/repos.ts
@@ -44,104 +44,52 @@ const renderProvider = (provider: number) => {
     <div class="fn__hr"></div>
     ${window.siyuan.languages.syncThirdPartyProviderTip}
 </div>`;
-        if (isMobile()) {
-            return `${tip}
-<div class="b3-label b3-label--noborder">
-    <div>Endpoint</div>
-    <div class="fn__hr"></div>
+        return `${tip}
+<label class="b3-label b3-label--noborder fn__flex config__item">
+    <div class="fn__flex-center fn__size200">Endpoint</div>
+    <div class="fn__space"></div>
     <input id="endpoint" class="b3-text-field fn__block" value="${window.siyuan.config.sync.s3.endpoint}">
-</div>
-<div class="b3-label b3-label--noborder">
-    <div>Access Key</div>
-    <div class="fn__hr"></div>
+</label>
+<label class="b3-label b3-label--noborder fn__flex config__item">
+    <div class="fn__flex-center fn__size200">Access Key</div>
+    <div class="fn__space"></div>
     <input id="accessKey" class="b3-text-field fn__block" value="${window.siyuan.config.sync.s3.accessKey}">
-</div>
-<div class="b3-label b3-label--noborder">
-    <div>Secret Key</div>
-    <div class="fn__hr"></div>
-    <div class="b3-form__icona">
+</label>
+<label class="b3-label b3-label--noborder fn__flex config__item">
+    <div class="fn__flex-center fn__size200">Secret Key</div>
+    <div class="fn__space"></div>
+    <div class="b3-form__icona fn__block">
         <input id="secretKey" type="password" class="b3-text-field b3-form__icona-input" value="${window.siyuan.config.sync.s3.secretKey}">
         <svg class="b3-form__icona-icon"><use xlink:href="#iconEye"></use></svg>
     </div>
-</div>
-<div class="b3-label b3-label--noborder">
-    <div>Bucket</div>
-    <div class="fn__hr"></div>
+</label>
+<label class="b3-label b3-label--noborder fn__flex config__item">
+    <div class="fn__flex-center fn__size200">Bucket</div>
+    <div class="fn__space"></div>
     <input id="bucket" class="b3-text-field fn__block" value="${window.siyuan.config.sync.s3.bucket}">
-</div>
-<div class="b3-label b3-label--noborder">
-    <div>Region</div>
-    <div class="fn__hr"></div>
+</label>
+<label class="b3-label b3-label--noborder fn__flex config__item">
+    <div class="fn__flex-center fn__size200">Region</div>
+    <div class="fn__space"></div>
     <input id="region" class="b3-text-field fn__block" value="${window.siyuan.config.sync.s3.region}">
-</div>
-<div class="b3-label b3-label--noborder">
-    <div>Timeout (s)</div>
-    <div class="fn__hr"></div>
+</label>
+<label class="b3-label b3-label--noborder fn__flex config__item">
+    <div class="fn__flex-center fn__size200">Timeout (s)</div>
+    <div class="fn__space"></div>
     <input id="timeout" class="b3-text-field fn__block" type="number" min="7" max="300" value="${window.siyuan.config.sync.s3.timeout}">
-</div>
-<div class="b3-label b3-label--noborder">
-    <div>Addressing</div>
-    <div class="fn__hr"></div>
+</label>
+<label class="b3-label b3-label--noborder fn__flex config__item">
+    <div class="fn__flex-center fn__size200">Addressing</div>
+    <div class="fn__space"></div>
     <select class="b3-select fn__block" id="pathStyle">
         <option ${window.siyuan.config.sync.s3.pathStyle ? "" : "selected"} value="false">Virtual-hosted-style</option>
         <option ${window.siyuan.config.sync.s3.pathStyle ? "selected" : ""} value="true">Path-style</option>
     </select>
-</div>
-<div class="b3-label b3-label--noborder">
-    <div>TLS verify</div>
-    <div class="fn__hr"></div>
-    <select class="b3-select fn__block" id="s3SkipTlsVerify">
-        <option ${window.siyuan.config.sync.s3.skipTlsVerify ? "" : "selected"} value="false">Verify</option>
-        <option ${window.siyuan.config.sync.s3.skipTlsVerify ? "selected" : ""} value="true">Skip</option>
-    </select>
-</div>`;
-        }
-        return `${tip}
-<label class="b3-label b3-label--noborder fn__flex">
-    <div class="fn__flex-center fn__size200">Endpoint</div>
-    <div class="fn__space"></div>
-    <input id="endpoint" class="b3-text-field fn__flex-1" value="${window.siyuan.config.sync.s3.endpoint}">
 </label>
-<label class="b3-label b3-label--noborder fn__flex">
-    <div class="fn__flex-center fn__size200">Access Key</div>
-    <div class="fn__space"></div>
-    <input id="accessKey" class="b3-text-field fn__flex-1" value="${window.siyuan.config.sync.s3.accessKey}">
-</label>
-<label class="b3-label b3-label--noborder fn__flex">
-    <div class="fn__flex-center fn__size200">Secret Key</div>
-    <div class="fn__space"></div>
-    <div class="b3-form__icona">
-        <input id="secretKey" type="password" class="b3-text-field b3-form__icona-input" value="${window.siyuan.config.sync.s3.secretKey}">
-        <svg class="b3-form__icona-icon"><use xlink:href="#iconEye"></use></svg>
-    </div>
-</label>
-<label class="b3-label b3-label--noborder fn__flex">
-    <div class="fn__flex-center fn__size200">Bucket</div>
-    <div class="fn__space"></div>
-    <input id="bucket" class="b3-text-field fn__flex-1" value="${window.siyuan.config.sync.s3.bucket}">
-</label>
-<label class="b3-label b3-label--noborder fn__flex">
-    <div class="fn__flex-center fn__size200">Region</div>
-    <div class="fn__space"></div>
-    <input id="region" class="b3-text-field fn__flex-1" value="${window.siyuan.config.sync.s3.region}">
-</label>
-<label class="b3-label b3-label--noborder fn__flex">
-    <div class="fn__flex-center fn__size200">Timeout (s)</div>
-    <div class="fn__space"></div>
-    <input id="timeout" class="b3-text-field fn__flex-1" type="number" min="7" max="300" value="${window.siyuan.config.sync.s3.timeout}">
-</label>
-<label class="b3-label b3-label--noborder fn__flex">
-    <div class="fn__flex-center fn__size200">Addressing</div>
-    <div class="fn__space"></div>
-    <select class="b3-select fn__flex-1" id="pathStyle">
-        <option ${window.siyuan.config.sync.s3.pathStyle ? "" : "selected"} value="false">Virtual-hosted-style</option>
-        <option ${window.siyuan.config.sync.s3.pathStyle ? "selected" : ""} value="true">Path-style</option>
-    </select>
-</label>
-<label class="b3-label b3-label--noborder fn__flex">
+<label class="b3-label b3-label--noborder fn__flex config__item">
     <div class="fn__flex-center fn__size200">TLS Verify</div>
     <div class="fn__space"></div>
-    <select class="b3-select fn__flex-1" id="s3SkipTlsVerify">
+    <select class="b3-select fn__block" id="s3SkipTlsVerify">
         <option ${window.siyuan.config.sync.s3.skipTlsVerify ? "" : "selected"} value="false">Verify</option>
         <option ${window.siyuan.config.sync.s3.skipTlsVerify ? "selected" : ""} value="true">Skip</option>
     </select>
@@ -154,68 +102,34 @@ const renderProvider = (provider: number) => {
     <div class="fn__hr"></div>    
     ${window.siyuan.languages.syncThirdPartyProviderTip}
 </div>`;
-        if (isMobile()) {
-            return `${tip}
-<div class="b3-label b3-label--noborder">
-    <div>Endpoint</div>
-    <div class="fn__hr"></div>
-    <input id="endpoint" class="b3-text-field fn__block" value="${window.siyuan.config.sync.webdav.endpoint}">
-</div>
-<div class="b3-label b3-label--noborder">
-    <div>Username</div>
-    <div class="fn__hr"></div>
-    <input id="username" class="b3-text-field fn__block" value="${window.siyuan.config.sync.webdav.username}">
-</div>
-<div class="b3-label b3-label--noborder">
-    <div>Password</div>
-    <div class="fn__hr"></div>
-    <div class="b3-form__icona">
-        <input id="password" type="password" class="b3-text-field b3-form__icona-input" value="${window.siyuan.config.sync.webdav.password}">
-        <svg class="b3-form__icona-icon"><use xlink:href="#iconEye"></use></svg>
-    </div>
-</div>
-<div class="b3-label b3-label--noborder">
-    <div>Timeout (s)</div>
-    <div class="fn__hr"></div>
-    <input id="timeout" class="b3-text-field fn__block" type="number" min="7" max="300" value="${window.siyuan.config.sync.webdav.timeout}">
-</div>
-<div class="b3-label b3-label--noborder">
-    <div>TLS verify</div>
-    <div class="fn__hr"></div>
-    <select class="b3-select fn__block" id="webdavSkipTlsVerify">
-        <option ${window.siyuan.config.sync.webdav.skipTlsVerify ? "" : "selected"} value="false">Verify</option>
-        <option ${window.siyuan.config.sync.webdav.skipTlsVerify ? "selected" : ""} value="true">Skip</option>
-    </select>
-</div>`;
-        }
         return `${tip}
-<label class="b3-label b3-label--noborder fn__flex">
+<label class="b3-label b3-label--noborder fn__flex config__item">
     <div class="fn__flex-center fn__size200">Endpoint</div>
     <div class="fn__space"></div>
-    <input id="endpoint" class="b3-text-field fn__flex-1" value="${window.siyuan.config.sync.webdav.endpoint}">
+    <input id="endpoint" class="b3-text-field fn__block" value="${window.siyuan.config.sync.webdav.endpoint}">
 </label>
-<label class="b3-label b3-label--noborder fn__flex">
+<label class="b3-label b3-label--noborder fn__flex config__item">
     <div class="fn__flex-center fn__size200">Username</div>
     <div class="fn__space"></div>
-    <input id="username" class="b3-text-field fn__flex-1" value="${window.siyuan.config.sync.webdav.username}">
+    <input id="username" class="b3-text-field fn__block" value="${window.siyuan.config.sync.webdav.username}">
 </label>
-<label class="b3-label b3-label--noborder fn__flex">
+<label class="b3-label b3-label--noborder fn__flex config__item">
     <div class="fn__flex-center fn__size200">Password</div>
     <div class="fn__space"></div>
-    <div class="b3-form__icona">
+    <div class="b3-form__icona fn__block">
         <input id="password" type="password" class="b3-text-field b3-form__icona-input" value="${window.siyuan.config.sync.webdav.password}">
         <svg class="b3-form__icona-icon"><use xlink:href="#iconEye"></use></svg>
     </div>
 </label>
-<label class="b3-label b3-label--noborder fn__flex">
+<label class="b3-label b3-label--noborder fn__flex config__item">
     <div class="fn__flex-center fn__size200">Timeout (s)</div>
     <div class="fn__space"></div>
-    <input id="timeout" class="b3-text-field fn__flex-1" type="number" min="7" max="300" value="${window.siyuan.config.sync.webdav.timeout}">
+    <input id="timeout" class="b3-text-field fn__block" type="number" min="7" max="300" value="${window.siyuan.config.sync.webdav.timeout}">
 </label>
-<label class="b3-label b3-label--noborder fn__flex">
+<label class="b3-label b3-label--noborder fn__flex config__item">
     <div class="fn__flex-center fn__size200">TLS Verify</div>
     <div class="fn__space"></div>
-    <select class="b3-select fn__flex-1" id="webdavSkipTlsVerify">
+    <select class="b3-select fn__block" id="webdavSkipTlsVerify">
         <option ${window.siyuan.config.sync.webdav.skipTlsVerify ? "" : "selected"} value="false">Verify</option>
         <option ${window.siyuan.config.sync.webdav.skipTlsVerify ? "selected" : ""} value="true">Skip</option>
     </select>
@@ -333,41 +247,10 @@ const bindProviderEvent = () => {
 export const repos = {
     element: undefined as Element,
     genHTML: () => {
-        let syncModeHTML = "";
-        let syncProviderHTML = "";
-        if (isMobile()) {
-            syncModeHTML = `<div class="b3-label">
-    ${window.siyuan.languages.syncMode}
-    <div class="fn__hr"></div>
-    <select id="syncMode" class="b3-select fn__block">
-        <option value="1" ${window.siyuan.config.sync.mode === 1 ? "selected" : ""}>${window.siyuan.languages.syncMode1}</option>
-        <option value="2" ${window.siyuan.config.sync.mode === 2 ? "selected" : ""}>${window.siyuan.languages.syncMode2}</option>
-    </select>
-    <div class="b3-label__text">${window.siyuan.languages.syncModeTip}</div>
-</div>`;
-            syncProviderHTML = `<div class="b3-label">
-    ${window.siyuan.languages.syncProvider}
-    <div class="fn__hr"></div>
-    <select id="syncProvider" class="b3-select fn__block">
-        <option value="0" ${window.siyuan.config.sync.provider === 0 ? "selected" : ""}>SiYuan</option>
-        <option value="2" ${window.siyuan.config.sync.provider === 2 ? "selected" : ""}>S3</option>
-        <option value="3" ${window.siyuan.config.sync.provider === 3 ? "selected" : ""}>WebDAV</option>
-    </select>
-    <div class="b3-label__text">${window.siyuan.languages.syncProviderTip}</div>
-</div>`;
-        } else {
-            syncModeHTML = `<label class="fn__flex b3-label">
-    <div class="fn__flex-1">
-        ${window.siyuan.languages.syncMode}
-        <div class="b3-label__text">${window.siyuan.languages.syncModeTip}</div>
-    </div>
-    <span class="fn__space"></span>
-    <select id="syncMode" class="b3-select fn__flex-center fn__size200">
-        <option value="1" ${window.siyuan.config.sync.mode === 1 ? "selected" : ""}>${window.siyuan.languages.syncMode1}</option>
-        <option value="2" ${window.siyuan.config.sync.mode === 2 ? "selected" : ""}>${window.siyuan.languages.syncMode2}</option>
-    </select>
-</label>`;
-            syncProviderHTML = `<label class="fn__flex b3-label">
+        return `<div><div style="position: fixed;width: 800px;height: 434px;box-sizing: border-box;text-align: center;display: flex;align-items: center;justify-content: center;z-index: 1;" id="reposLoading">
+    <img src="/stage/loading-pure.svg">
+</div>
+<label class="fn__flex b3-label config__item">
     <div class="fn__flex-1">
         ${window.siyuan.languages.syncProvider}
         <div class="b3-label__text">${window.siyuan.languages.syncProviderTip}</div>
@@ -378,12 +261,7 @@ export const repos = {
         <option value="2" ${window.siyuan.config.sync.provider === 2 ? "selected" : ""}>S3</option>
         <option value="3" ${window.siyuan.config.sync.provider === 3 ? "selected" : ""}>WebDAV</option>
     </select>
-</label>`;
-        }
-        return `<div><div style="position: fixed;width: 800px;height: 434px;box-sizing: border-box;text-align: center;display: flex;align-items: center;justify-content: center;z-index: 1;" id="reposLoading">
-    <img src="/stage/loading-pure.svg">
-</div>
-${syncProviderHTML}
+</label>
 <div id="syncProviderPanel" class="b3-label">
     ${renderProvider(window.siyuan.config.sync.provider)}
 </div>
@@ -413,12 +291,22 @@ ${syncProviderHTML}
     <span class="fn__space"></span>
     <input type="checkbox" id="generateConflictDoc"${window.siyuan.config.sync.generateConflictDoc ? " checked='checked'" : ""} class="b3-switch fn__flex-center">
 </label>
-${syncModeHTML}
+<label class="fn__flex b3-label config__item">
+    <div class="fn__flex-1">
+        ${window.siyuan.languages.syncMode}
+        <div class="b3-label__text">${window.siyuan.languages.syncModeTip}</div>
+    </div>
+    <span class="fn__space"></span>
+    <select id="syncMode" class="b3-select fn__flex-center fn__size200">
+        <option value="1" ${window.siyuan.config.sync.mode === 1 ? "selected" : ""}>${window.siyuan.languages.syncMode1}</option>
+        <option value="2" ${window.siyuan.config.sync.mode === 2 ? "selected" : ""}>${window.siyuan.languages.syncMode2}</option>
+    </select>
+</label>
 <div class="b3-label">
-    <label class="fn__flex">
+    <label class="fn__flex config__item">
         <div class="fn__flex-center">${window.siyuan.languages.cloudSyncDir}</div>
         <div class="fn__flex-1"></div>
-        <button class="b3-button b3-button--outline fn__flex-center${isMobile() ? "" : " fn__size200"}" data-type="config">
+        <button class="b3-button b3-button--outline fn__flex-center fn__size200" data-type="config">
             <svg><use xlink:href="#iconSettings"></use></svg>${window.siyuan.languages.config}
         </button>
     </label>