Condense view horizontally and fix settings item spacings

dashboard/src/views/UserDirectoryOpenIdProviderView.vue

@@ -4,7 +4,7 @@ import { useI18n } from 'vue-i18n';
 const i18n = useI18n();
 const t = i18n.t;
 
-import { ref, onMounted, useTemplateRef, computed } from 'vue';
+import { ref, nextTick, onMounted, useTemplateRef, computed } from 'vue';
 import { Button, ClipboardButton, Menu, Dialog, TableView, FormGroup, TextInput, InputGroup, InputDialog } from '@cloudron/pankow';
 import Section from '../components/Section.vue';
 import DashboardModel from '../models/DashboardModel.js';
@@ -48,6 +48,8 @@ const submitBusy = ref(false);
 const submitError = ref('');
 const clientId = ref('');
 const clientSecret = ref('');
+const newClientId = ref('');
+const newClientSecret = ref('');
 const clientName = ref('');
 const clientLoginRedirectUri = ref('');
 const clientTokenSignatureAlgorithm = ref('RS256');
@@ -106,8 +108,8 @@ async function onSubmit() {
 
   // reopen to show the new client credentials
   if (client) {
-    clientId.value = client.id;
-    clientSecret.value = client.secret;
+    newClientId.value = client.id;
+    newClientSecret.value = client.secret;
     newSetDialog.value.open();
   }
 }
@@ -158,16 +160,16 @@ onMounted(async () => {
         <FormGroup>
           <label for="clientIdInput">{{ $t('oidc.client.id') }}</label>
           <InputGroup>
-            <TextInput id="clientIdInput" v-model="clientId" readonly style="flex-grow: 1;"/>
-            <ClipboardButton :value="clientId" />
+            <TextInput id="clientIdInput" v-model="newClientId" readonly style="flex-grow: 1;"/>
+            <ClipboardButton :value="newClientId" />
           </InputGroup>
         </FormGroup>
 
         <FormGroup>
           <label for="clientSecretInput">{{ $t('oidc.client.secret') }}</label>
           <InputGroup>
-            <TextInput id="clientSecretInput" v-model="clientSecret" readonly style="flex-grow: 1;"/>
-            <ClipboardButton :value="clientSecret" />
+            <TextInput id="clientSecretInput" v-model="newClientSecret" readonly style="flex-grow: 1;"/>
+            <ClipboardButton :value="newClientSecret" />
           </InputGroup>
         </FormGroup>
       </div>
@@ -224,7 +226,8 @@ onMounted(async () => {
     </Dialog>
 
     <Section :title="$t('oidc.title')">
-      <p>{{ $t('oidc.description') }}</p>
+      <div>{{ $t('oidc.description') }}</div>
+      <br/>
 
       <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>