visual stuff again

src/components/settings_modal/helpers/boolean_setting.vue

@@ -30,11 +30,13 @@
       </span>
     </Checkbox>
     <p
-      v-if="backendDescriptionDescription"
+      v-if="backendDescriptionDescription || showDescription"
       class="setting-description"
       :class="{ 'faint': shouldBeDisabled }"
     >
-      {{ backendDescriptionDescription + ' ' }}
+      <slot name="description">
+        {{ backendDescriptionDescription + ' ' }}
+      </slot>
     </p>
     <DraftButtons />
   </label>

src/components/settings_modal/helpers/list_setting.vue

@@ -83,8 +83,10 @@
 <script src="./list_setting.js"></script>
 <style lang="scss">
 .ListSetting {
-  .btn-group {
-    display: flex
+  .setting-list {
+    .checkbox {
+      padding: 0.5em 0;
+    }
   }
 }
 </style>

src/components/settings_modal/helpers/setting.js

@@ -18,6 +18,10 @@ export default {
       type: [String, Array],
       required: false
     },
+    showDescription: {
+      type: Boolean,
+      required: false
+    },
     descriptionPathOverride: {
       type: [String, Array],
       required: false
@@ -69,7 +73,7 @@ export default {
       type: Boolean
     },
     overrideBackendDescriptionLabel: {
-      type: Boolean
+      type: [Boolean, String]
     },
     draftMode: {
       type: Boolean,
@@ -157,6 +161,8 @@ export default {
       }
     },
     backendDescriptionDescription () {
+      console.log('LOL', this.description)
+      if (this.description) return this.description
       if (this.realSource !== 'admin') return ''
       if (this.hideDescription) return null
       if (!this.backendDescription || this.overrideBackendDescription) {

src/components/settings_modal/helpers/vertical_tab_switcher.scss

@@ -107,6 +107,10 @@
         flex-shrink: 1;
       }
     }
+
+    .tab-slot-wrapper {
+      grid-template-columns: 0 minmax(min-content, 45em) 0;
+    }
   }
 
   @supports (container-type: inline-size) {