Condense view horizontally and fix settings item spacings

dashboard/src/components/DockerRegistries.vue

@@ -98,7 +98,8 @@ onMounted(async () => {
       <Button icon="fa-solid fa-plus" @click="onEditOrAdd()">{{ $t('main.action.add') }}</Button>
     </template>
 
-    <p v-html="$t('dockerRegistries.description', { customAppsLink: 'https://docs.cloudron.io/custom-apps/tutorial/' })"></p>
+    <div v-html="$t('dockerRegistries.description', { customAppsLink: 'https://docs.cloudron.io/custom-apps/tutorial/' })"></div>
+    <br/>
 
     <TableView :columns="columns" :model="registries">
       <template #actions="registry">

dashboard/src/components/ExternalLdap.vue

@@ -310,7 +310,8 @@ onMounted(async () => {
         <Button tool :menu="taskLogsMenu" :disabled="!taskLogsMenu.length">{{ $t('main.action.logs') }}</Button>
       </template>
 
-      <p>{{ $t('users.externalLdap.description') }}</p>
+      <div>{{ $t('users.externalLdap.description') }}</div>
+      <br/>
 
       <div v-if="features.externalLdap">
         <div v-show="config.provider === 'noop'">

dashboard/src/components/Ipv4Config.vue

@@ -140,7 +140,12 @@ onMounted(async () => {
     </Dialog>
 
     <Section :title="$t('network.ip.title')">
-      <p>{{ $t('network.ip.description') }}</p>
+      <template #header-buttons>
+        <Button @click="onConfigure()">{{ $t('network.ip.configure') }}</Button>
+      </template>
+
+      <div>{{ $t('network.ip.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>

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>

dashboard/src/components/Section.vue

@@ -42,7 +42,7 @@ function onTitleBadge() {
 <style>
 
 .section {
-  margin-bottom: 30px;
+  margin-bottom: 20px;
   position: relative;
 }
 
@@ -54,7 +54,7 @@ function onTitleBadge() {
   gap: 5px;
   padding-left: 15px;
   padding-right: 15px;
-  padding-top: 25px;
+  padding-top: 5px;
   margin-top: 0;
   margin-bottom: 0px;
 }
@@ -70,7 +70,7 @@ function onTitleBadge() {
   border-color: #d8dee4;
   border-width: 1px;
   margin-top: 10px;
-  margin-bottom: 10px;
+  margin-bottom: 5px;
 }
 
 @media (prefers-color-scheme: dark) {

dashboard/src/components/SettingsItem.vue

@@ -16,8 +16,9 @@
 
 .settings-item {
   border-radius: var(--pankow-border-radius);
-  padding: 10px;
-  margin-bottom: 10px;
+  /*padding: 0 10px 10px 10px;*/
+  padding: 0;
+  margin-bottom: 20px;
 }
 
 .settings-item-body {

dashboard/src/components/SystemUpdate.vue

@@ -335,7 +335,8 @@ onMounted(async () => {
         <Button tool :menu="taskLogsMenu" :disabled="taskLogsMenu.length === 0">{{ $t('main.action.logs') }}</Button>
       </template>
 
-      <p v-html="$t('settings.updates.description')"></p>
+      <div v-html="$t('settings.updates.description')"></div>
+      <br/>
 
       <SettingsItem>
         <div>