diff --git a/ui/src/components/header/user-info-dialog/user-info-form/user-info-form.module.scss b/ui/src/components/header/user-info-dialog/user-info-form/user-info-form.module.scss index a73d0a3a8..b7b9a6c3c 100644 --- a/ui/src/components/header/user-info-dialog/user-info-form/user-info-form.module.scss +++ b/ui/src/components/header/user-info-dialog/user-info-form/user-info-form.module.scss @@ -4,6 +4,7 @@ .miniForm { border-radius: 8px; border: 1px solid $color-neutral-100; + overflow: hidden; } .miniFormContent { diff --git a/ui/src/components/header/user-info-dialog/user-info-form/user-info-form.tsx b/ui/src/components/header/user-info-dialog/user-info-form/user-info-form.tsx index d3792fffc..d0f02e0ca 100644 --- a/ui/src/components/header/user-info-dialog/user-info-form/user-info-form.tsx +++ b/ui/src/components/header/user-info-dialog/user-info-form/user-info-form.tsx @@ -11,6 +11,7 @@ import { useUpdateUserInfo } from 'data-services/hooks/auth/useUpdateUserInfo' import { Button, ButtonTheme } from 'design-system/components/button/button' import { IconType } from 'design-system/components/icon/icon' import { InputContent } from 'design-system/components/input/input' +import { useRef } from 'react' import { useForm } from 'react-hook-form' import { API_MAX_UPLOAD_SIZE } from 'utils/constants' import { STRING, translate } from 'utils/language' @@ -55,6 +56,7 @@ const config: FormConfig = { } export const UserInfoForm = ({ userInfo }: { userInfo: UserInfo }) => { + const formRef = useRef(null) const { control, handleSubmit, @@ -68,29 +70,29 @@ export const UserInfoForm = ({ userInfo }: { userInfo: UserInfo }) => { const errorMessage = useFormError({ error, setFieldError }) return ( -
updateUserInfo(values))}> - {errorMessage && ( - - )} + <> + {errorMessage && ( + + )} - - <> - + updateUserInfo(values))} + className="grid gap-8" + > - - { )} /> - - + +