more visual fixes

src/components/settings_modal/settings_modal.scss

@@ -40,6 +40,10 @@
     line-height: 1.5;
   }
 
+  .suboptions {
+    margin-left: 1em;
+  }
+
   .sidenote {
     margin-left: 5em;
     padding: 0.25em 1em;

src/components/settings_modal/tabs/filtering_tab.vue

@@ -13,8 +13,10 @@
             {{ $t('settings.replies_in_timeline') }}
           </ChoiceSetting>
         </li>
-        <li>
+        <li class="setting-item">
-          {{ $t('user_card.default_mute_expiration') }}
+          <span class="setting-label">
+            {{ $t('user_card.default_mute_expiration') }}
+          </span>
           <Select
             id="onMuteDefaultActionLv1"
             v-model="onMuteDefaultActionLv1"
@@ -43,10 +45,16 @@
             </li>
           </ul>
         </li>
-        <li v-if="blockExpirationSupported">
+        <li
-          {{ $t('user_card.default_block_expiration') }}
+          class="setting-item"
+          v-if="blockExpirationSupported"
+        >
+          <span class="setting-label">
+            {{ $t('user_card.default_block_expiration') }}
+          </span>
           <Select
             id="onBlockDefaultActionLv1"
+            class="setting-control"
             v-model="onBlockDefaultActionLv1"
           >
             <option

src/components/settings_modal/tabs/profile_tab.scss

@@ -11,5 +11,28 @@
       padding: 1.2em;
       overflow: hidden;
     }
+
+  }
+
+  .setting-item {
+    .custom-boolean-setting {
+      display: grid;
+      grid-template-columns: subgrid;
+
+      .label {
+        grid-area: label;
+        text-align: right;
+      }
+
+      .-mobile & {
+        .label {
+          text-align: left;
+        }
+      }
+
+      .checkbox-indicator {
+        grid-area: control;
+      }
+    }
   }
 }

src/components/settings_modal/tabs/profile_tab.vue

@@ -11,13 +11,15 @@
       <h3>{{ $t('settings.account_privacy') }}</h3>
       <ul class="setting-list">
         <li>
-          <Checkbox
+          <div class="setting-item">
-            class="setting-item"
+            <Checkbox
-            v-model="locked"
+              class="setting-label setting-control custom-boolean-setting"
-          >
+              v-model="locked"
-            {{ $t('settings.lock_account_description') }}
+            >
-          </Checkbox>
+              <ProfileSettingIndicator :is-profile="true" />
-          <ProfileSettingIndicator :is-profile="true" />
+              {{ $t('settings.lock_account_description') }}
+            </Checkbox>
+          </div>
         </li>
         <li>
           <BooleanSetting