From 3a05120d06b7736fa417667423dbed0298a5a204 Mon Sep 17 00:00:00 2001
From: Leo Vasanko <leo@git>
Date: Tue, 17 Feb 2026 14:13:03 +0000
Subject: [PATCH] Consistent OIDC layout, admin app spacing. UX tuneup.

---
 frontend/auth/admin/AdminApp.vue       |  1 -
 frontend/src/admin/AdminOidcDetail.vue | 76 +++++++++-----------------
 2 files changed, 27 insertions(+), 50 deletions(-)

diff --git a/frontend/auth/admin/AdminApp.vue b/frontend/auth/admin/AdminApp.vue
index 4c9307f..bb52f5d 100644
--- a/frontend/auth/admin/AdminApp.vue
+++ b/frontend/auth/admin/AdminApp.vue
@@ -1031,7 +1031,6 @@ async function submitDialog() {
 
 <style scoped>
 .view-admin { padding-bottom: var(--space-3xl); }
-.admin-section { margin-top: var(--space-xl); }
 .admin-section-body { display: flex; flex-direction: column; gap: var(--space-xl); }
 .admin-panels { display: flex; flex-direction: column; gap: var(--space-xl); }
 </style>
diff --git a/frontend/src/admin/AdminOidcDetail.vue b/frontend/src/admin/AdminOidcDetail.vue
index 3b191a9..4fe3859 100644
--- a/frontend/src/admin/AdminOidcDetail.vue
+++ b/frontend/src/admin/AdminOidcDetail.vue
@@ -114,15 +114,14 @@ defineExpose({ focusFirstElement })
 
 <template>
   <div class="oidc-detail">
-    <div class="oidc-header" ref="headerRef" @keydown="handleHeaderKeydown">
-      <h2>{{ isNew ? 'New OIDC Client' : (client?.name || 'OIDC Client') }}</h2>
-    </div>
-
     <form @submit.prevent="handleSave" class="oidc-form">
       <!-- Client credentials section -->
-      <section class="oidc-credentials">
-        <h3>Client Credentials</h3>
-        <p class="section-description">Configure these values in the client application.</p>
+      <section class="section-block">
+        <div class="section-header">
+          <h2>Client Configuration</h2>
+          <p class="section-description">Configure these values in the client application.</p>
+        </div>
+        <div class="section-body">
 
         <dl class="oidc-dl">
           <dt>Authentication Name</dt>
@@ -131,7 +130,7 @@ defineExpose({ focusFirstElement })
             <span class="small muted"> (Login With, may affect URLs – optional)</span>
           </dd>
 
-          <dt>Discovery URL</dt>
+          <dt>Auto Discovery URL</dt>
           <dd><output @click="copyText(discoveryUrl, 'OpenID Connect Discovery URL')" title="Click to copy">{{ discoveryUrl }}</output></dd>
 
           <dt>Client ID</dt>
@@ -144,9 +143,9 @@ defineExpose({ focusFirstElement })
           </dd>
 
           <template v-if="clientGroups.length">
-            <dt>Groups Name</dt>
+            <dt>Groups Claim Name</dt>
             <dd>
-              <output @click="copyText('groups', 'Groups Name')" title="Click to copy">groups</output>
+              <output @click="copyText('groups', 'Groups Claim Name')" title="Click to copy">groups</output>
             </dd>
           </template>
 
@@ -159,16 +158,19 @@ defineExpose({ focusFirstElement })
           </dd>
         </dl>
 
-        <p v-if="clientSecret && isNew" class="warning-text"><strong>⚠️ Save the secret now — it cannot be retrieved later.</strong></p>
-        <p v-else-if="clientSecret && !isNew" class="warning-text"><strong>⚠️ Saving will prevent access with the old secret.</strong></p>
+        <span class="warning-text">
+          <strong v-if="clientSecret">⚠️ {{ isNew ? 'Save the secret now — it cannot be retrieved later.' : 'Saving will prevent access with the old secret.' }}</strong>
+          <span v-else>ℹ️ The client may use groups to check for required permissions.</span>
+        </span>
+        </div>
       </section>
 
-      <hr class="oidc-divider" />
-
       <!-- Editable fields -->
-      <section class="oidc-settings">
-        <h3>Client Settings</h3>
-
+      <section class="section-block">
+        <div class="section-header">
+          <h2>Paskia Configuration</h2>
+        </div>
+        <div class="section-body">
         <label>Client Name
           <input v-model="name" placeholder="My Application" required />
         </label>
@@ -177,6 +179,7 @@ defineExpose({ focusFirstElement })
           <p class="small muted">This should be provided by the client application.</p>
           <textarea v-model="redirectUris" placeholder="(autodiscover one on first use)" rows="3"></textarea>
         </label>
+        </div>
       </section>
 
       <!-- Actions -->
@@ -191,11 +194,13 @@ defineExpose({ focusFirstElement })
 
 <style scoped>
 .oidc-detail {
-  max-width: 600px;
+  display: flex;
+  flex-direction: column;
+  gap: var(--space-lg);
 }
 
 .oidc-header {
-  margin-bottom: var(--space-lg);
+  margin-bottom: 0;
 }
 
 .oidc-header h2 {
@@ -208,28 +213,6 @@ defineExpose({ focusFirstElement })
   gap: var(--space-lg);
 }
 
-.oidc-credentials,
-.oidc-settings {
-  display: flex;
-  flex-direction: column;
-  gap: var(--space-sm);
-}
-
-.oidc-credentials h3,
-.oidc-settings h3 {
-  margin: 0 0 var(--space-xs) 0;
-  font-size: 1rem;
-  display: flex;
-  align-items: center;
-  gap: var(--space-sm);
-}
-
-.section-description {
-  margin: 0;
-  font-size: 0.85rem;
-  color: var(--color-text-muted);
-}
-
 .oidc-dl {
   display: grid;
   grid-template-columns: auto 1fr;
@@ -261,20 +244,15 @@ defineExpose({ focusFirstElement })
 }
 
 .warning-text {
+  display: block;
   font-size: 0.9rem;
-  margin: var(--space-sm) 0 0 0;
+  min-height: 1.4em;
 }
 
 .oidc-group { display: block; }
 .oidc-group { white-space: normal; word-break: break-all; }
 
-.oidc-divider {
-  border: none;
-  border-top: 1px solid var(--color-border);
-  margin: var(--space-sm) 0;
-}
-
-.oidc-settings label {
+.section-body label {
   display: flex;
   flex-direction: column;
   gap: var(--space-xs);