fix: add height and scroll area in user mutation dialogs

src/features/users/components/users-action-dialog.tsx

@@ -22,6 +22,7 @@ import {
   FormMessage,
 } from '@/components/ui/form'
 import { Input } from '@/components/ui/input'
+import { ScrollArea } from '@/components/ui/scroll-area'
 import { PasswordInput } from '@/components/password-input'
 import { SelectDropdown } from '@/components/select-dropdown'
 import { userTypes } from '../data/data'
@@ -148,168 +149,174 @@ export function UsersActionDialog({ currentRow, open, onOpenChange }: Props) {
             Click save when you're done.
           </DialogDescription>
         </DialogHeader>
-        <Form {...form}>
-          <form
-            id='user-form'
-            onSubmit={form.handleSubmit(onSubmit)}
-            className='space-y-4'
-          >
-            <FormField
-              control={form.control}
-              name='firstName'
-              render={({ field }) => (
-                <FormItem className='grid grid-cols-6 items-center gap-x-4 gap-y-1 space-y-0'>
-                  <FormLabel className='col-span-2 text-right'>
-                    First Name
-                  </FormLabel>
-                  <FormControl>
-                    <Input
-                      placeholder='John'
+        <ScrollArea className='h-[26.25rem] w-full pr-4 -mr-4 py-1'>
+          <Form {...form}>
+            <form
+              id='user-form'
+              onSubmit={form.handleSubmit(onSubmit)}
+              className='space-y-4 p-0.5'
+            >
+              <FormField
+                control={form.control}
+                name='firstName'
+                render={({ field }) => (
+                  <FormItem className='grid grid-cols-6 items-center gap-x-4 gap-y-1 space-y-0'>
+                    <FormLabel className='col-span-2 text-right'>
+                      First Name
+                    </FormLabel>
+                    <FormControl>
+                      <Input
+                        placeholder='John'
+                        className='col-span-4'
+                        autoComplete='off'
+                        {...field}
+                      />
+                    </FormControl>
+                    <FormMessage className='col-span-4 col-start-3' />
+                  </FormItem>
+                )}
+              />
+              <FormField
+                control={form.control}
+                name='lastName'
+                render={({ field }) => (
+                  <FormItem className='grid grid-cols-6 items-center gap-x-4 gap-y-1 space-y-0'>
+                    <FormLabel className='col-span-2 text-right'>
+                      Last Name
+                    </FormLabel>
+                    <FormControl>
+                      <Input
+                        placeholder='Doe'
+                        className='col-span-4'
+                        autoComplete='off'
+                        {...field}
+                      />
+                    </FormControl>
+                    <FormMessage className='col-span-4 col-start-3' />
+                  </FormItem>
+                )}
+              />
+              <FormField
+                control={form.control}
+                name='username'
+                render={({ field }) => (
+                  <FormItem className='grid grid-cols-6 items-center gap-x-4 gap-y-1 space-y-0'>
+                    <FormLabel className='col-span-2 text-right'>
+                      Username
+                    </FormLabel>
+                    <FormControl>
+                      <Input
+                        placeholder='john_doe'
+                        className='col-span-4'
+                        {...field}
+                      />
+                    </FormControl>
+                    <FormMessage className='col-span-4 col-start-3' />
+                  </FormItem>
+                )}
+              />
+              <FormField
+                control={form.control}
+                name='email'
+                render={({ field }) => (
+                  <FormItem className='grid grid-cols-6 items-center gap-x-4 gap-y-1 space-y-0'>
+                    <FormLabel className='col-span-2 text-right'>
+                      Email
+                    </FormLabel>
+                    <FormControl>
+                      <Input
+                        placeholder='john.doe@gmail.com'
+                        className='col-span-4'
+                        {...field}
+                      />
+                    </FormControl>
+                    <FormMessage className='col-span-4 col-start-3' />
+                  </FormItem>
+                )}
+              />
+              <FormField
+                control={form.control}
+                name='phoneNumber'
+                render={({ field }) => (
+                  <FormItem className='grid grid-cols-6 items-center gap-x-4 gap-y-1 space-y-0'>
+                    <FormLabel className='col-span-2 text-right'>
+                      Phone Number
+                    </FormLabel>
+                    <FormControl>
+                      <Input
+                        placeholder='+123456789'
+                        className='col-span-4'
+                        {...field}
+                      />
+                    </FormControl>
+                    <FormMessage className='col-span-4 col-start-3' />
+                  </FormItem>
+                )}
+              />
+              <FormField
+                control={form.control}
+                name='role'
+                render={({ field }) => (
+                  <FormItem className='grid grid-cols-6 items-center gap-x-4 gap-y-1 space-y-0'>
+                    <FormLabel className='col-span-2 text-right'>
+                      Role
+                    </FormLabel>
+                    <SelectDropdown
+                      defaultValue={field.value}
+                      onValueChange={field.onChange}
+                      placeholder='Select a role'
                       className='col-span-4'
-                      autoComplete='off'
-                      {...field}
+                      items={userTypes.map(({ label, value }) => ({
+                        label,
+                        value,
+                      }))}
                     />
-                  </FormControl>
-                  <FormMessage className='col-span-4 col-start-3' />
-                </FormItem>
-              )}
-            />
-            <FormField
-              control={form.control}
-              name='lastName'
-              render={({ field }) => (
-                <FormItem className='grid grid-cols-6 items-center gap-x-4 gap-y-1 space-y-0'>
-                  <FormLabel className='col-span-2 text-right'>
-                    Last Name
-                  </FormLabel>
-                  <FormControl>
-                    <Input
-                      placeholder='Doe'
-                      className='col-span-4'
-                      autoComplete='off'
-                      {...field}
-                    />
-                  </FormControl>
-                  <FormMessage className='col-span-4 col-start-3' />
-                </FormItem>
-              )}
-            />
-            <FormField
-              control={form.control}
-              name='username'
-              render={({ field }) => (
-                <FormItem className='grid grid-cols-6 items-center gap-x-4 gap-y-1 space-y-0'>
-                  <FormLabel className='col-span-2 text-right'>
-                    Username
-                  </FormLabel>
-                  <FormControl>
-                    <Input
-                      placeholder='john_doe'
-                      className='col-span-4'
-                      {...field}
-                    />
-                  </FormControl>
-                  <FormMessage className='col-span-4 col-start-3' />
-                </FormItem>
-              )}
-            />
-            <FormField
-              control={form.control}
-              name='email'
-              render={({ field }) => (
-                <FormItem className='grid grid-cols-6 items-center gap-x-4 gap-y-1 space-y-0'>
-                  <FormLabel className='col-span-2 text-right'>Email</FormLabel>
-                  <FormControl>
-                    <Input
-                      placeholder='john.doe@gmail.com'
-                      className='col-span-4'
-                      {...field}
-                    />
-                  </FormControl>
-                  <FormMessage className='col-span-4 col-start-3' />
-                </FormItem>
-              )}
-            />
-            <FormField
-              control={form.control}
-              name='phoneNumber'
-              render={({ field }) => (
-                <FormItem className='grid grid-cols-6 items-center gap-x-4 gap-y-1 space-y-0'>
-                  <FormLabel className='col-span-2 text-right'>
-                    Phone Number
-                  </FormLabel>
-                  <FormControl>
-                    <Input
-                      placeholder='+123456789'
-                      className='col-span-4'
-                      {...field}
-                    />
-                  </FormControl>
-                  <FormMessage className='col-span-4 col-start-3' />
-                </FormItem>
-              )}
-            />
-            <FormField
-              control={form.control}
-              name='role'
-              render={({ field }) => (
-                <FormItem className='grid grid-cols-6 items-center gap-x-4 gap-y-1 space-y-0'>
-                  <FormLabel className='col-span-2 text-right'>Role</FormLabel>
-                  <SelectDropdown
-                    defaultValue={field.value}
-                    onValueChange={field.onChange}
-                    placeholder='Select a role'
-                    className='col-span-4'
-                    items={userTypes.map(({ label, value }) => ({
-                      label,
-                      value,
-                    }))}
-                  />
-                  <FormMessage className='col-span-4 col-start-3' />
-                </FormItem>
-              )}
-            />
-            <FormField
-              control={form.control}
-              name='password'
-              render={({ field }) => (
-                <FormItem className='grid grid-cols-6 items-center gap-x-4 gap-y-1 space-y-0'>
-                  <FormLabel className='col-span-2 text-right'>
-                    Password
-                  </FormLabel>
-                  <FormControl>
-                    <PasswordInput
-                      placeholder='e.g., S3cur3P@ssw0rd'
-                      className='col-span-4'
-                      {...field}
-                    />
-                  </FormControl>
-                  <FormMessage className='col-span-4 col-start-3' />
-                </FormItem>
-              )}
-            />
-            <FormField
-              control={form.control}
-              name='confirmPassword'
-              render={({ field }) => (
-                <FormItem className='grid grid-cols-6 items-center gap-x-4 gap-y-1 space-y-0'>
-                  <FormLabel className='col-span-2 text-right'>
-                    Confirm Password
-                  </FormLabel>
-                  <FormControl>
-                    <PasswordInput
-                      disabled={!isPasswordTouched}
-                      placeholder='e.g., S3cur3P@ssw0rd'
-                      className='col-span-4'
-                      {...field}
-                    />
-                  </FormControl>
-                  <FormMessage className='col-span-4 col-start-3' />
-                </FormItem>
-              )}
-            />
-          </form>
-        </Form>
+                    <FormMessage className='col-span-4 col-start-3' />
+                  </FormItem>
+                )}
+              />
+              <FormField
+                control={form.control}
+                name='password'
+                render={({ field }) => (
+                  <FormItem className='grid grid-cols-6 items-center gap-x-4 gap-y-1 space-y-0'>
+                    <FormLabel className='col-span-2 text-right'>
+                      Password
+                    </FormLabel>
+                    <FormControl>
+                      <PasswordInput
+                        placeholder='e.g., S3cur3P@ssw0rd'
+                        className='col-span-4'
+                        {...field}
+                      />
+                    </FormControl>
+                    <FormMessage className='col-span-4 col-start-3' />
+                  </FormItem>
+                )}
+              />
+              <FormField
+                control={form.control}
+                name='confirmPassword'
+                render={({ field }) => (
+                  <FormItem className='grid grid-cols-6 items-center gap-x-4 gap-y-1 space-y-0'>
+                    <FormLabel className='col-span-2 text-right'>
+                      Confirm Password
+                    </FormLabel>
+                    <FormControl>
+                      <PasswordInput
+                        disabled={!isPasswordTouched}
+                        placeholder='e.g., S3cur3P@ssw0rd'
+                        className='col-span-4'
+                        {...field}
+                      />
+                    </FormControl>
+                    <FormMessage className='col-span-4 col-start-3' />
+                  </FormItem>
+                )}
+              />
+            </form>
+          </Form>
+        </ScrollArea>
         <DialogFooter>
           <Button type='submit' form='user-form'>
             Save changes