improve import/export table

src/components/settings_modal/tabs/data_import_export_tab.scss

@@ -1,11 +1,21 @@
 .data-import-export-tab {
-  h3 {
-    margin-right: -2em;
-  }
-
   .importer-exporter {
     display: inline-flex;
     flex-direction: column;
     gap: 0.5em;
   }
+
+  table {
+    td, th {
+      line-height: 1.5;
+    }
+
+    th {
+      padding: 0 0.5em;
+    }
+
+    td {
+      padding: 0.5em;
+    }
+  }
 }

src/components/settings_modal/tabs/data_import_export_tab.vue

@@ -56,8 +56,22 @@
         </li>
       </ul>
       <h3>{{ $t('settings.account_backup') }}</h3>
-      <p>{{ $t('settings.account_backup_description') }}</p>
+      <div class="setting-list">
-      <table>
+        <p>{{ $t('settings.account_backup_description') }}</p>
+        <button
+          class="btn button-default"
+          @click="addBackup"
+        >
+          {{ $t('settings.add_backup') }}
+        </button>
+        <p v-if="addedBackup">
+          {{ $t('settings.added_backup') }}
+        </p>
+        <template v-if="addBackupError !== false">
+          <p>{{ $t('settings.add_backup_error', { error: addBackupError }) }}</p>
+        </template>
+      </div>
+      <table class="setting-list">
         <thead>
           <tr>
             <th>{{ $t('settings.account_backup_table_head') }}</th>
@@ -112,18 +126,6 @@
           />
         </button>
       </div>
-      <button
-        class="btn button-default"
-        @click="addBackup"
-      >
-        {{ $t('settings.add_backup') }}
-      </button>
-      <p v-if="addedBackup">
-        {{ $t('settings.added_backup') }}
-      </p>
-      <template v-if="addBackupError !== false">
-        <p>{{ $t('settings.add_backup_error', { error: addBackupError }) }}</p>
-      </template>
     </div>
   </div>
 </template>