wamplerj/mic-check
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Fix register form layout and validation shift

Browse Source 
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.
This commit is contained in:
James Wampler
2026-06-10 22:14:31 -07:00
parent f317a47041
commit f2cc5245bc
1 changed files with 17 additions and 7 deletions
Download Patch File Download Diff File Expand all files Collapse all files

24
src/admin/src/views/RegisterView.vue
View File

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