src/assets/css/pages/system/settings.scss

@@ -2,33 +2,37 @@
 
 .root-content {
   padding: 30px;
-  gap: 10px;
+  gap: 20px;
 
-  .settings-card {
+  .root-row {
-    padding: 20px;
     gap: 20px;
 
-    > .head {
+    .settings-card {
-      align-items: center;
+      padding: 20px;
-      gap: 5px;
+      gap: 20px;
 
-      .icon {
+      > .head {
-        font-size: constants.$SIZE_ICON_MD;
+        align-items: center;
-        flex: 0 0 auto;
+        gap: 5px;
-      }
 
-      .title {
+        .icon {
-        display: flex;
+          font-size: constants.$SIZE_ICON_MD;
-        font-size: 1.2em;
+          flex: 0 0 auto;
-      }
+        }
 
-      :nth-child(n+3) {
+        .title {
-        flex: 0 0 auto;
+          display: flex;
-        color: constants.$font-main-color;
+          font-size: 1.2em;
-      }
+        }
 
-      .bt-save {
+        :nth-child(n+3) {
-        color: constants.$main-color;
+          flex: 0 0 auto;
+          color: constants.$font-main-color;
+        }
+
+        .bt-save {
+          color: constants.$main-color;
+        }
       }
     }
   }

src/pages/system/Settings.tsx

@@ -198,9 +198,12 @@ const Settings: React.FC = () => {
             <FitFullScreen>
                 <HideScrollbar isShowVerticalScrollbar autoHideWaitingTime={500}>
                     <FlexBox className={'root-content'}>
-                        <Permission operationCode={'system:settings:query:mail'}>
+                        <FlexBox direction={'horizontal'} className={'root-row'}>
-                            <MailSettings />
+                            <Permission operationCode={'system:settings:query:mail'}>
-                        </Permission>
+                                <MailSettings />
+                            </Permission>
+                            <div />
+                        </FlexBox>
                     </FlexBox>
                 </HideScrollbar>
             </FitFullScreen>