From f2cc5245bc37235ed6c2d6f1a86a1cbcec093604 Mon Sep 17 00:00:00 2001
From: James Wampler <james@wamp.dev>
Date: Wed, 10 Jun 2026 22:14:31 -0700
Subject: [PATCH] Fix register form layout and validation shift

Fix first/last name field overlap by using no-gutters row with
responsive padding. Override global hideDetails:'auto' Vuetify default
with :hide-details="false" so the details area is always rendered,
preventing 22px layout shift when validation messages appear.
---
 src/admin/src/views/RegisterView.vue | 24 +++++++++++++++++-------
 1 file changed, 17 insertions(+), 7 deletions(-)

diff --git a/src/admin/src/views/RegisterView.vue b/src/admin/src/views/RegisterView.vue
index 529a709..47834ec 100755
--- a/src/admin/src/views/RegisterView.vue
+++ b/src/admin/src/views/RegisterView.vue
@@ -21,8 +21,8 @@
             </v-alert>
 
             <v-form ref="formRef" @submit.prevent="onSubmit" data-testid="register-form">
-              <v-row>
-                <v-col cols="12" sm="6" class="pb-0">
+              <v-row no-gutters class="mb-3">
+                <v-col cols="12" sm="6" class="pr-sm-2">
                   <v-text-field
                     v-model="firstName"
                     label="First name"
@@ -30,10 +30,11 @@
                     variant="outlined"
                     density="comfortable"
                     :rules="[rules.required]"
+                    :hide-details="false"
                     data-testid="first-name-input"
                   />
                 </v-col>
-                <v-col cols="12" sm="6" class="pb-0">
+                <v-col cols="12" sm="6" class="pl-sm-2">
                   <v-text-field
                     v-model="lastName"
                     label="Last name"
@@ -41,6 +42,7 @@
                     variant="outlined"
                     density="comfortable"
                     :rules="[rules.required]"
+                    :hide-details="false"
                     data-testid="last-name-input"
                   />
                 </v-col>
@@ -53,8 +55,9 @@
                 autocomplete="email"
                 variant="outlined"
                 density="comfortable"
-                class="mb-3"
                 :rules="[rules.required, rules.email]"
+                :hide-details="false"
+                class="mb-3"
                 data-testid="email-input"
               />
 
@@ -64,8 +67,9 @@
                 autocomplete="organization"
                 variant="outlined"
                 density="comfortable"
-                class="mb-3"
                 :rules="[rules.required]"
+                :hide-details="false"
+                class="mb-3"
                 data-testid="org-name-input"
               />
 
@@ -76,10 +80,11 @@
                 autocomplete="new-password"
                 variant="outlined"
                 density="comfortable"
-                class="mb-3"
                 :rules="[rules.required, rules.minLength]"
                 :append-inner-icon="showPassword ? 'ri-eye-off-line' : 'ri-eye-line'"
                 @click:append-inner="showPassword = !showPassword"
+                :hide-details="false"
+                class="mb-3"
                 data-testid="password-input"
               />
 
@@ -90,8 +95,9 @@
                 autocomplete="new-password"
                 variant="outlined"
                 density="comfortable"
-                class="mb-4"
                 :rules="[rules.required, rules.passwordMatch]"
+                :hide-details="false"
+                class="mb-4"
                 data-testid="confirm-password-input"
               />
 
@@ -184,4 +190,8 @@ async function onSubmit(): Promise<void> {
 .auth-bg {
   background: rgb(var(--v-theme-background));
 }
+
+:deep(.v-input__details) {
+  min-height: 22px;
+}
 </style>