Condense view horizontally and fix settings item spacings

dashboard/src/components/Ipv6Config.vue

@@ -116,9 +116,9 @@ onMounted(async () => {
               <div class="error-label" v-show="editError.generic">{{ editError.generic }}</div>
             </FormGroup>
 
-            <p v-show="editProvider === 'generic'">
+            <div v-show="editProvider === 'generic'">
               {{ $t('network.configureIp.providerGenericDescription') }} <sup><a href="https://ipv4.api.cloudron.io/api/v1/helper/public_ip" class="help" target="_blank"><i class="fa fa-question-circle"></i></a></sup>
-            </p>
+            </div>
 
             <!-- Fixed -->
             <FormGroup v-show="editProvider === 'fixed'">
@@ -140,7 +140,12 @@ onMounted(async () => {
     </Dialog>
 
     <Section :title="$t('network.ipv6.title')">
-      <p>{{ $t('network.ipv6.description') }}</p>
+      <template #header-buttons>
+        <Button @click="onConfigure()">{{ $t('network.ip.configure') }}</Button>
+      </template>
+
+      <div>{{ $t('network.ipv6.description') }}</div>
+      <br/>
 
       <div class="info-row">
         <div class="info-label">{{ $t('network.ip.provider') }}</div>
@@ -154,8 +159,6 @@ onMounted(async () => {
         <div class="info-label">{{ $t('network.ip.interface') }}</div>
         <div class="info-value">{{ interfaceName }}</div>
       </div>
-
-      <Button @click="onConfigure()">{{ $t('network.ip.configure') }}</Button>
     </Section>
   </div>
 </template>