Condense la modal d'edition admin

ChessCubing.App/Pages/AdminPage.razor

@@ -228,18 +228,32 @@
 
 <section class="modal @(ShowEditModal ? string.Empty : "hidden")" aria-hidden="@BoolString(!ShowEditModal)">
     <div class="modal-backdrop" @onclick="CloseEditModal"></div>
-    <div class="modal-card admin-modal-card">
+    <div class="modal-card admin-modal-card admin-edit-modal-card">
-        <div class="modal-head">
+        <div class="modal-head admin-edit-modal-head">
-            <div>
+            <div class="admin-edit-heading">
                 <p class="eyebrow">Edition</p>
                 <h2>@BuildEditModalTitle()</h2>
+
+                @if (SelectedUser is not null)
+                {
+                    <div class="admin-edit-chips">
+                        <span class="mini-chip admin-chip-outline">@SelectedUser.Username</span>
+
+                        @if (!string.IsNullOrWhiteSpace(SelectedUser.Email))
+                        {
+                            <span class="mini-chip admin-chip-neutral">@SelectedUser.Email</span>
+                        }
+                    </div>
+                }
+            </div>
+            <div class="admin-modal-head-actions">
+                <button class="button ghost small" type="button" @onclick="CloseEditModal" disabled="@IsSaving">Fermer</button>
             </div>
-            <button class="button ghost small" type="button" @onclick="CloseEditModal" disabled="@IsSaving">Fermer</button>
         </div>
 
         @if (IsLoadingDetail)
         {
-            <p class="section-copy">La fiche utilisateur est en cours de chargement.</p>
+            <p class="admin-modal-note">La fiche utilisateur est en cours de chargement.</p>
         }
         else if (!string.IsNullOrWhiteSpace(DetailError))
         {
@@ -251,13 +265,11 @@
         }
         else if (SelectedUser is null)
         {
-            <p class="section-copy">Cette fiche n'est plus disponible pour le moment.</p>
+            <p class="admin-modal-note">Cette fiche n'est plus disponible pour le moment.</p>
         }
         else
         {
-            <p class="section-copy">
+            <p class="admin-modal-note">Compte Keycloak et profil site. Les roles restent geres dans Keycloak.</p>
-                Les roles restent geres dans Keycloak. Cette fiche couvre l'etat du compte et le profil du site.
-            </p>
 
             @if (!string.IsNullOrWhiteSpace(SaveError))
             {
@@ -269,20 +281,16 @@
                 <p class="profile-feedback success">@SaveMessage</p>
             }
 
-            <div class="profile-meta-grid">
+            <div class="admin-edit-meta-grid">
-                <article class="profile-meta-card">
+                <article class="admin-edit-meta-card">
-                    <span class="micro-label">Identite Keycloak</span>
-                    <strong>@SelectedUser.IdentityDisplayName</strong>
-                </article>
-                <article class="profile-meta-card">
                     <span class="micro-label">Compte cree le</span>
                     <strong>@FormatDate(SelectedUser.AccountCreatedUtc)</strong>
                 </article>
-                <article class="profile-meta-card">
+                <article class="admin-edit-meta-card">
                     <span class="micro-label">Profil site cree le</span>
                     <strong>@FormatDate(SelectedUser.SiteProfileCreatedUtc)</strong>
                 </article>
-                <article class="profile-meta-card">
+                <article class="admin-edit-meta-card">
                     <span class="micro-label">Profil site mis a jour</span>
                     <strong>@FormatDate(SelectedUser.SiteProfileUpdatedUtc)</strong>
                 </article>
@@ -291,12 +299,12 @@
             <EditForm Model="@EditFormModel" OnValidSubmit="SaveUserAsync">
                 <DataAnnotationsValidator />
 
-                <div class="admin-toggle-grid">
+                <div class="admin-toggle-grid admin-edit-toggle-grid">
                     <label class="admin-toggle-card">
                         <InputCheckbox @bind-Value="EditFormModel.IsEnabled" />
                         <div>
                             <strong>Compte actif</strong>
-                            <span>Autoriser ou bloquer la connexion a l'application.</span>
+                            <span>Autorise ou bloque la connexion.</span>
                         </div>
                     </label>
 
@@ -304,19 +312,19 @@
                         <InputCheckbox @bind-Value="EditFormModel.IsEmailVerified" />
                         <div>
                             <strong>Email verifie</strong>
-                            <span>Indique si l'adresse email a ete validee dans Keycloak.</span>
+                            <span>Adresse validee dans Keycloak.</span>
                         </div>
                     </label>
                 </div>
 
-                <div class="admin-form-grid">
+                <div class="admin-form-grid admin-edit-form-grid">
                     <label class="field">
                         <span>Nom d'utilisateur</span>
                         <InputText @bind-Value="EditFormModel.Username" />
                         <ValidationMessage For="@(() => EditFormModel.Username)" />
                     </label>
 
-                    <label class="field">
+                    <label class="field span-2">
                         <span>Email</span>
                         <InputText @bind-Value="EditFormModel.Email" />
                         <ValidationMessage For="@(() => EditFormModel.Email)" />
@@ -363,15 +371,15 @@
                         <ValidationMessage For="@(() => EditFormModel.PreferredFormat)" />
                     </label>
 
-                    <label class="field span-2">
+                    <label class="field span-3">
                         <span>Cube favori</span>
                         <InputText @bind-Value="EditFormModel.FavoriteCube" />
                         <ValidationMessage For="@(() => EditFormModel.FavoriteCube)" />
                     </label>
 
-                    <label class="field span-2">
+                    <label class="field span-3">
                         <span>Bio</span>
-                        <InputTextArea @bind-Value="EditFormModel.Bio" />
+                        <InputTextArea @bind-Value="EditFormModel.Bio" rows="3" />
                         <ValidationMessage For="@(() => EditFormModel.Bio)" />
                     </label>
                 </div>
@@ -381,7 +389,6 @@
                         @(IsSaving ? "Enregistrement..." : "Enregistrer les modifications")
                     </button>
                     <button class="button ghost" type="button" @onclick="CloseEditModal" disabled="@IsSaving">Fermer</button>
-                    <p class="section-copy">Le profil site est cree automatiquement lors du premier enregistrement.</p>
                 </div>
             </EditForm>
         }

styles.css

@@ -426,6 +426,10 @@ p {
   grid-column: 1 / -1;
 }
 
+.span-3 {
+  grid-column: 1 / -1;
+}
+
 .field > span,
 legend {
   font-weight: 700;
@@ -1746,6 +1750,121 @@ body.site-menu-hidden .site-menu-shell {
   width: min(980px, 100%);
 }
 
+.admin-edit-modal-card {
+  width: min(1080px, 100%);
+  padding: 0.95rem 1rem 1rem;
+}
+
+.admin-edit-modal-head {
+  align-items: flex-start;
+  margin-bottom: 0.55rem;
+}
+
+.admin-edit-heading {
+  display: grid;
+  gap: 0.45rem;
+  min-width: 0;
+}
+
+.admin-edit-heading h2 {
+  margin: 0;
+  font-size: clamp(1.6rem, 2vw, 2.2rem);
+  line-height: 1;
+}
+
+.admin-edit-chips,
+.admin-modal-head-actions {
+  display: flex;
+  flex-wrap: wrap;
+  gap: 0.55rem;
+}
+
+.admin-edit-chips .mini-chip {
+  max-width: 100%;
+  justify-content: flex-start;
+}
+
+.admin-modal-note {
+  margin: 0 0 0.8rem;
+  color: var(--muted);
+  font-size: 0.95rem;
+  line-height: 1.45;
+}
+
+.admin-edit-meta-grid {
+  display: grid;
+  grid-template-columns: repeat(3, minmax(0, 1fr));
+  gap: 0.7rem;
+  margin-bottom: 0.8rem;
+}
+
+.admin-edit-meta-card {
+  display: grid;
+  gap: 0.2rem;
+  padding: 0.75rem 0.9rem;
+  border-radius: 18px;
+  border: 1px solid var(--panel-border);
+  background: rgba(255, 255, 255, 0.03);
+}
+
+.admin-edit-meta-card strong {
+  font-size: 0.98rem;
+}
+
+.admin-edit-toggle-grid {
+  gap: 0.75rem;
+  margin-bottom: 0.8rem;
+}
+
+.admin-edit-toggle-grid .admin-toggle-card {
+  gap: 0.75rem;
+  padding: 0.8rem 0.9rem;
+  border-radius: 18px;
+}
+
+.admin-edit-toggle-grid .admin-toggle-card strong {
+  font-size: 1rem;
+}
+
+.admin-edit-toggle-grid .admin-toggle-card span {
+  font-size: 0.92rem;
+  line-height: 1.35;
+}
+
+.admin-edit-form-grid {
+  grid-template-columns: repeat(3, minmax(0, 1fr));
+  gap: 0.75rem;
+}
+
+.admin-edit-form-grid .field {
+  gap: 0.35rem;
+}
+
+.admin-edit-form-grid .field > span {
+  font-size: 0.95rem;
+}
+
+.admin-edit-modal-card input:not([type="radio"]):not([type="checkbox"]),
+.admin-edit-modal-card select,
+.admin-edit-modal-card textarea {
+  padding: 0.8rem 0.9rem;
+  border-radius: 16px;
+}
+
+.admin-edit-modal-card textarea {
+  min-height: 4.5rem;
+}
+
+.admin-edit-modal-card .profile-feedback {
+  margin-bottom: 0.8rem;
+}
+
+.admin-edit-modal-card .profile-actions {
+  justify-content: flex-end;
+  gap: 0.75rem;
+  margin-top: 0.85rem;
+}
+
 .admin-confirm-card {
   width: min(560px, 100%);
 }
@@ -1772,6 +1891,7 @@ body.site-menu-hidden .site-menu-shell {
     grid-column: span 12;
   }
 
+  .admin-edit-meta-grid,
   .profile-meta-grid,
   .profile-form-grid,
   .admin-toggle-grid,
@@ -1779,6 +1899,10 @@ body.site-menu-hidden .site-menu-shell {
     grid-template-columns: 1fr;
   }
 
+  .admin-edit-form-grid {
+    grid-template-columns: 1fr;
+  }
+
   .phase-header {
     grid-template-columns: 1fr;
     text-align: center;