somewhat better import-export tab + minor fixes

src/components/exporter/exporter.vue

@@ -23,6 +23,9 @@
 
 <style lang="scss">
 .exporter {
+  display: flex;
+  flex-direction: column;
+
   &-processing {
     margin: 0.25em;
   }

src/components/importer/importer.vue

@@ -1,5 +1,5 @@
 <template>
-  <div class="importer">
+  <div class="importer btn-group">
     <form>
       <input
         ref="input"
@@ -19,7 +19,7 @@
       class="btn button-default"
       @click="submit"
     >
-      {{ submitButtonLabel || $t('importer.submit') }}
+      {{ submitButtonLabel || $t('importer.import') }}
     </button>
     <div v-if="success">
       <button

src/components/settings_modal/settings_modal_user_content.vue

@@ -77,15 +77,14 @@
     <div
       v-if="isLoggedIn"
       :label="$t('settings.mutes_and_blocks')"
-      :fullHeight="true"
       icon="eye-slash"
       data-tab-name="mutesAndBlocks"
+      :full-width="true"
     >
       <MutesAndBlocksTab />
     </div>
     <div
       :label="$t('settings.clutter')"
-      :fullHeight="true"
       icon="broom"
       data-tab-name="clutter"
     >
@@ -96,6 +95,7 @@
       :label="$t('settings.security_tab')"
       icon="lock"
       data-tab-name="security"
+      :full-width="true"
     >
       <SecurityTab />
     </div>
@@ -113,6 +113,7 @@
       icon="palette"
       data-tab-name="style"
       :delay-render="true"
+      :full-width="true"
     >
       <StyleTab />
     </div>
@@ -122,6 +123,7 @@
       icon="paint-brush"
       data-tab-name="theme"
       :delay-render="true"
+      :full-width="true"
     >
       <OldThemeTab />
     </div>

src/components/settings_modal/tabs/data_import_export_tab.scss

@@ -2,4 +2,10 @@
   h3 {
     margin-right: -2em;
   }
+
+  .importer-exporter {
+    display: inline-flex;
+    flex-direction: column;
+    gap: 0.5em;
+  }
 }

src/components/settings_modal/tabs/data_import_export_tab.vue

@@ -4,57 +4,57 @@
     :label="$t('settings.data_import_export_tab')"
   >
     <div class="setting-item">
-      <h3>{{ $t('settings.follow_import') }}</h3>
+      <h3>{{ $t('settings.import_export.title') }}</h3>
+      <ul class="setting-list">
+        <li>
+          <h4>{{ $t('settings.import_export.follows') }}</h4>
           <p>{{ $t('settings.import_followers_from_a_csv_file') }}</p>
+          <div class="importer-exporter">
             <Importer
               :submit-handler="importFollows"
               :success-message="$t('settings.follows_imported')"
               :error-message="$t('settings.follow_import_error')"
             />
-    </div>
-    <div class="setting-item">
-      <h3>{{ $t('settings.follow_export') }}</h3>
             <Exporter
               :get-content="getFollowsContent"
               filename="friends.csv"
               :export-button-label="$t('settings.follow_export_button')"
             />
           </div>
-    <div class="setting-item">
+        </li>
-      <h3>{{ $t('settings.block_import') }}</h3>
+        <li>
-      <p>{{ $t('settings.import_blocks_from_a_csv_file') }}</p>
+          <h4>{{ $t('settings.import_export.mutes') }}</h4>
-      <Importer
-        :submit-handler="importBlocks"
-        :success-message="$t('settings.blocks_imported')"
-        :error-message="$t('settings.block_import_error')"
-      />
-    </div>
-    <div class="setting-item">
-      <h3>{{ $t('settings.block_export') }}</h3>
-      <Exporter
-        :get-content="getBlocksContent"
-        filename="blocks.csv"
-        :export-button-label="$t('settings.block_export_button')"
-      />
-    </div>
-    <div class="setting-item">
-      <h3>{{ $t('settings.mute_import') }}</h3>
           <p>{{ $t('settings.import_mutes_from_a_csv_file') }}</p>
+          <div class="importer-exporter">
             <Importer
               :submit-handler="importMutes"
               :success-message="$t('settings.mutes_imported')"
               :error-message="$t('settings.mute_import_error')"
             />
-    </div>
-    <div class="setting-item">
-      <h3>{{ $t('settings.mute_export') }}</h3>
             <Exporter
               :get-content="getMutesContent"
-        filename="mutes.csv"
+              filename="friends.csv"
               :export-button-label="$t('settings.mute_export_button')"
             />
           </div>
-    <div class="setting-item">
+        </li>
+        <li>
+          <h4>{{ $t('settings.import_export.blocks') }}</h4>
+          <p>{{ $t('settings.import_blocks_from_a_csv_file') }}</p>
+          <div class="importer-exporter">
+            <Importer
+              :submit-handler="importBlocks"
+              :success-message="$t('settings.blocks_imported')"
+              :error-message="$t('settings.block_import_error')"
+            />
+            <Exporter
+              :get-content="getBlocksContent"
+              filename="friends.csv"
+              :export-button-label="$t('settings.block_export_button')"
+            />
+          </div>
+        </li>
+      </ul>
       <h3>{{ $t('settings.account_backup') }}</h3>
       <p>{{ $t('settings.account_backup_description') }}</p>
       <table>

src/components/tab_switcher/vertical_tab_switcher.scss

@@ -68,16 +68,6 @@
       &.-hidden {
         display: none;
       }
-
-      &.-full-height:not(.-hidden) {
-        height: 100%;
-        display: flex;
-        flex-direction: column;
-
-        > *:not(.tab-content-label) {
-          flex: 1;
-        }
-      }
     }
   }
 

src/i18n/en.json

@@ -132,6 +132,7 @@
   },
   "importer": {
     "submit": "Submit",
+    "import": "Import",
     "success": "Imported successfully.",
     "error": "An error occured while importing this file."
   },
@@ -603,6 +604,12 @@
     "follow_export_button": "Export your follows to a csv file",
     "follow_import": "Follow import",
     "follow_import_error": "Error importing followers",
+    "import_export": {
+      "title": "Import / Export",
+      "follows": "List of users you follow",
+      "blocks": "List of users you block",
+      "mutes": "List of users you mute"
+    },
     "follows_imported": "Follows imported! Processing them will take a while.",
     "accent": "Accent",
     "foreground": "Foreground",