Make separate section for OIDC Clients

dashboard/src/views/UserDirectoryOpenIdProviderView.vue

@@ -191,9 +191,7 @@ onMounted(async () => {
     </Dialog>
 
     <Section :title="$t('oidc.title')">
-      <template #header-buttons>
-        <Button @click="onAdd()" icon="fa-solid fa-plus">{{ $t('oidc.clients.newClient') }}</Button>
-      </template>
+      <p>{{ $t('oidc.description') }}</p>
 
       <FormGroup>
         <label for="discoverUrlInput">{{ $t('oidc.env.discoveryUrl') }} <sup><a href="https://docs.cloudron.io/user-directory/#endpoints" target="_blank"><i class="fa fa-question-circle"></i></a></sup></label>
@@ -202,8 +200,12 @@ onMounted(async () => {
           <Button tool @click="onCopyToClipboard(discoveryUrl)" icon="fa fa-clipboard" />
         </InputGroup>
       </FormGroup>
+    </Section>
 
-      <br/>
+    <Section :title="$t('oidc.clients.title')">
+      <template #header-buttons>
+        <Button @click="onAdd()" icon="fa-solid fa-plus">{{ $t('oidc.clients.newClient') }}</Button>
+      </template>
 
       <TableView :columns="columns" :model="clients" :placeholder="$t('oidc.clients.empty')">
         <template #actions="client">