refactor: improve layout and styling of user create and edit drawers

This commit is contained in:
mlogclub
2026-07-28 19:38:05 +08:00
parent 8e7d3482a3
commit 08aff89d37
2 changed files with 11 additions and 11 deletions
@@ -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>
+6 -6
View File
@@ -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>