refactor: improve layout and styling of user create and edit drawers
This commit is contained in:
@@ -191,18 +191,18 @@ function CreateUserDrawerBody({
|
|||||||
}
|
}
|
||||||
|
|
||||||
return (
|
return (
|
||||||
<DrawerContent className="min-w-2xl">
|
<DrawerContent className="min-w-2xl overflow-hidden">
|
||||||
<DrawerHeader>
|
<DrawerHeader className="shrink-0">
|
||||||
<DrawerTitle>{t("user.createTitle")}</DrawerTitle>
|
<DrawerTitle>{t("user.createTitle")}</DrawerTitle>
|
||||||
<DrawerDescription>
|
<DrawerDescription>
|
||||||
{t("user.createDescription")}
|
{t("user.createDescription")}
|
||||||
</DrawerDescription>
|
</DrawerDescription>
|
||||||
</DrawerHeader>
|
</DrawerHeader>
|
||||||
<form
|
<form
|
||||||
className="flex h-full flex-col"
|
className="flex min-h-0 flex-1 flex-col"
|
||||||
onSubmit={handleSubmit(onFormSubmit)}
|
onSubmit={handleSubmit(onFormSubmit)}
|
||||||
>
|
>
|
||||||
<div className="space-y-4 overflow-y-auto px-4 pb-4">
|
<div className="min-h-0 flex-1 space-y-4 overflow-y-auto px-4 pb-4">
|
||||||
<Field data-invalid={!!errors.username}>
|
<Field data-invalid={!!errors.username}>
|
||||||
<FieldLabel htmlFor="create-username">{t("user.username")}</FieldLabel>
|
<FieldLabel htmlFor="create-username">{t("user.username")}</FieldLabel>
|
||||||
<FieldContent>
|
<FieldContent>
|
||||||
@@ -371,7 +371,7 @@ function CreateUserDrawerBody({
|
|||||||
</FieldContent>
|
</FieldContent>
|
||||||
</Field>
|
</Field>
|
||||||
</div>
|
</div>
|
||||||
<DrawerFooter className="border-t">
|
<DrawerFooter className="shrink-0 border-t bg-background">
|
||||||
<Button type="submit" disabled={saving || rolesLoading}>
|
<Button type="submit" disabled={saving || rolesLoading}>
|
||||||
{saving ? t("user.creating") : t("user.createUser")}
|
{saving ? t("user.creating") : t("user.createUser")}
|
||||||
</Button>
|
</Button>
|
||||||
|
|||||||
@@ -187,23 +187,23 @@ function UserEditDrawerBody({
|
|||||||
}
|
}
|
||||||
|
|
||||||
return (
|
return (
|
||||||
<DrawerContent className="min-w-2xl">
|
<DrawerContent className="min-w-2xl overflow-hidden">
|
||||||
<DrawerHeader>
|
<DrawerHeader className="shrink-0">
|
||||||
<DrawerTitle>{t("user.editTitle")}</DrawerTitle>
|
<DrawerTitle>{t("user.editTitle")}</DrawerTitle>
|
||||||
<DrawerDescription>
|
<DrawerDescription>
|
||||||
{t("user.currentUser", { username: item?.username || "-" })}
|
{t("user.currentUser", { username: item?.username || "-" })}
|
||||||
</DrawerDescription>
|
</DrawerDescription>
|
||||||
</DrawerHeader>
|
</DrawerHeader>
|
||||||
{loading ? (
|
{loading ? (
|
||||||
<div className="flex items-center justify-center py-12">
|
<div className="flex min-h-0 flex-1 items-center justify-center py-12">
|
||||||
<div className="text-muted-foreground">{t("user.loading")}</div>
|
<div className="text-muted-foreground">{t("user.loading")}</div>
|
||||||
</div>
|
</div>
|
||||||
) : (
|
) : (
|
||||||
<form
|
<form
|
||||||
className="flex h-full flex-col"
|
className="flex min-h-0 flex-1 flex-col"
|
||||||
onSubmit={handleSubmit(onFormSubmit)}
|
onSubmit={handleSubmit(onFormSubmit)}
|
||||||
>
|
>
|
||||||
<div className="space-y-4 px-4 pb-4">
|
<div className="min-h-0 flex-1 space-y-4 overflow-y-auto px-4 pb-4">
|
||||||
<Field data-invalid={!!errors.nickname}>
|
<Field data-invalid={!!errors.nickname}>
|
||||||
<FieldLabel htmlFor="user-nickname">{t("user.nickname")}</FieldLabel>
|
<FieldLabel htmlFor="user-nickname">{t("user.nickname")}</FieldLabel>
|
||||||
<FieldContent>
|
<FieldContent>
|
||||||
@@ -261,7 +261,7 @@ function UserEditDrawerBody({
|
|||||||
</FieldContent>
|
</FieldContent>
|
||||||
</Field>
|
</Field>
|
||||||
</div>
|
</div>
|
||||||
<DrawerFooter className="border-t">
|
<DrawerFooter className="shrink-0 border-t bg-background">
|
||||||
<Button type="submit" disabled={saving || loading}>
|
<Button type="submit" disabled={saving || loading}>
|
||||||
{saving ? t("user.saving") : t("user.saveEdit")}
|
{saving ? t("user.saving") : t("user.saveEdit")}
|
||||||
</Button>
|
</Button>
|
||||||
|
|||||||
Reference in New Issue
Block a user