Give section headers more space

dashboard/src/components/ApiTokens.vue

@@ -37,7 +37,7 @@
       </div>
     </Dialog>
 
-    <h2 class="header-with-button">
+    <h2 class="header header-with-button">
       {{ $t('profile.apiTokens.title') }}
       <Button @click="newDialog.open()" icon="fa fa-plus">{{ $t('profile.apiTokens.newApiToken') }}</Button>
     </h2>

dashboard/src/components/AppPasswords.vue

@@ -36,7 +36,7 @@
       </div>
     </Dialog>
 
-    <h2 class="header-with-button">
+    <h2 class="header header-with-button">
       {{ $t('profile.appPasswords.title') }}
       <Button @click="newDialog.open()" icon="fa fa-plus">{{ $t('profile.appPasswords.newPassword') }}</Button>
     </h2>

dashboard/src/components/ProfileView.vue

@@ -55,7 +55,7 @@
     <AppPasswords/>
     <ApiTokens v-show="user.isAtLeastAdmin"/>
 
-    <h2>{{ $t('profile.loginTokens.title') }}</h2>
+    <h2 class="header">{{ $t('profile.loginTokens.title') }}</h2>
     <Card>
       <p>{{ $t('profile.loginTokens.description', { webadminTokenCount: webadminTokens.length, cliTokenCount: cliTokens.length }) }}</p>
       <Button danger :loading="revokeTokensBusy" :disabled="revokeTokensBusy" @click="onRevokeAllWebAndCliTokens()">{{ $t('profile.loginTokens.logoutAll') }}</Button>

dashboard/src/style.css

@@ -48,6 +48,10 @@ footer > .p {
   margin: 4px;
 }
 
+.header {
+  margin-top: 50px;
+}
+
 .header-with-button {
   display: flex;
   justify-content: space-between;