Update styles for Rate limit inputs

src/views/settings/components/Inputs.vue

@@ -9,7 +9,7 @@
           </el-tooltip>
         </span>
       </el-form-item>
-      <el-form-item v-for="subSetting in setting.children" :key="subSetting.key" class="settings-input has-nested">
+      <el-form-item v-for="subSetting in setting.children" :key="subSetting.key" class="settings-input">
         <inputs
           :setting-group="settingGroup"
           :setting-parent="[...settingParent, subSetting]"

src/views/settings/components/inputComponents/RateLimitInput.vue

@@ -18,31 +18,49 @@
       </div>
     </div>
     <div v-if="rateLimitAuthUsers">
-      <el-form-item label="Unauthenticated users:" label-width="180px" class="rate-limit settings-input">
+      <el-form-item class="rate-limit settings-input">
-        <el-input
+        <div class="rate-limit-label-container">
-          :value="rateLimitUnauthUsers[0]"
+          <span class="rate-limit-label">
-          placeholder="scale"
+            Unauthenticated users:
-          class="scale-input"
+          </span>
-          @input="parseRateLimiter($event, setting.key, 'scale', 'unauthUsersLimit', [rateLimitUnauthUsers, rateLimitAuthUsers])"/>
+        </div>
-        <span>:</span>
+        <div class="rate-limit-content">
-        <el-input
+          <el-input
-          :value="rateLimitUnauthUsers[1]"
+            :value="rateLimitUnauthUsers[0]"
-          placeholder="limit"
+            placeholder="scale"
-          class="limit-input"
+            class="scale-input"
-          @input="parseRateLimiter($event, setting.key, 'limit', 'unauthUsersLimit', [rateLimitUnauthUsers, rateLimitAuthUsers])"/>
+            @input="parseRateLimiter(
+              $event, setting.key, 'scale', 'unauthUsersLimit', [rateLimitUnauthUsers, rateLimitAuthUsers]
+          )"/>
+          <span>:</span>
+          <el-input
+            :value="rateLimitUnauthUsers[1]"
+            placeholder="limit"
+            class="limit-input"
+            @input="parseRateLimiter(
+              $event, setting.key, 'limit', 'unauthUsersLimit', [rateLimitUnauthUsers, rateLimitAuthUsers]
+          )"/>
+        </div>
       </el-form-item>
-      <el-form-item label="Authenticated users:" label-width="180px" class="rate-limit settings-input">
+      <el-form-item class="rate-limit settings-input">
-        <el-input
+        <div class="rate-limit-label-container">
-          :value="rateLimitAuthUsers[0]"
+          <span class="rate-limit-label">
-          placeholder="scale"
+            Authenticated users:
-          class="scale-input"
+          </span>
-          @input="parseRateLimiter($event, setting.key, 'scale', 'authUserslimit', [rateLimitUnauthUsers, rateLimitAuthUsers])"/>
+        </div>
-        <span>:</span>
+        <div class="rate-limit-content">
-        <el-input
+          <el-input
-          :value="rateLimitAuthUsers[1]"
+            :value="rateLimitAuthUsers[0]"
-          placeholder="limit"
+            placeholder="scale"
-          class="limit-input"
+            class="scale-input"
-          @input="parseRateLimiter($event, setting.key, 'limit', 'authUserslimit', [rateLimitUnauthUsers, rateLimitAuthUsers])"/>
+            @input="parseRateLimiter($event, setting.key, 'scale', 'authUserslimit', [rateLimitUnauthUsers, rateLimitAuthUsers])"/>
+          <span>:</span>
+          <el-input
+            :value="rateLimitAuthUsers[1]"
+            placeholder="limit"
+            class="limit-input"
+            @input="parseRateLimiter($event, setting.key, 'limit', 'authUserslimit', [rateLimitUnauthUsers, rateLimitAuthUsers])"/>
+        </div>
       </el-form-item>
       <div class="limit-button-container">
         <el-button :size="isDesktop ? 'medium' : 'mini'" class="icon-minus-button" icon="el-icon-minus" circle @click="toggleLimits(['', ''], setting.key)"/>

src/views/settings/styles/main.scss

@@ -47,6 +47,8 @@
     line-height: 22px;
     margin: 5px 0 0 0;
     overflow-wrap: break-word;
+    overflow: hidden;
+    text-overflow: ellipsis;
     code {
       display: inline;
       line-height: 22px;
@@ -168,6 +170,27 @@
     margin-left: 8px;
     margin-right: 10px
   }
+  .rate-limit {
+    .el-form-item__content {
+      width: 100%;
+      display: flex;
+    }
+  }
+  .rate-limit-content {
+    width: 100%;
+  }
+  .rate-limit-label {
+    float: right;
+  }
+  .rate-limit-label-container {
+    font-size: 14px;
+    color: #606266;
+    font-family: "Helvetica Neue",Helvetica,"PingFang SC","Hiragino Sans GB","Microsoft YaHei";
+    font-weight: 700;
+    height: 36px;
+    width: 240px;
+    margin-right: 10px;
+  }
   .relays-container {
     margin: 0 15px;
   }
@@ -270,12 +293,16 @@
     .input-container {
       width: 100%;
       .el-form-item {
-        margin-right: 15px;
+        margin: 0;
+        padding: 0 15px 10px 0;
       }
       .settings-delete-button {
         margin: 4px 7px 0 -5px;
       }
     }
+    .limit-input {
+      width: 46%;
+    }
     .proxy-url-input {
       flex-direction: column;
       align-items: flex-start;
@@ -289,6 +316,17 @@
       width: 100%;
       margin-left: 0;
     }
+    .rate-limit {
+      .el-form-item__content {
+        flex-direction: column;
+      }
+    }
+    .rate-limit-label {
+      float: left;
+    }
+    .scale-input {
+      width: 46%;
+    }
     .setting-label {
       display: flex;
       justify-content: space-between;
@@ -296,7 +334,8 @@
     .settings-input {
       display: inline-block;
       width: 90%;
-      margin: 0 0 10px 0;
+      padding: 0 15px 10px 0;
+      margin: 0;
     }
     .socks5-checkbox-container {
       width: 100%;