form layout improvements

This commit is contained in:
miloschwartz
2026-06-09 15:40:38 -07:00
parent c85a7f6ac5
commit fb6f5b3953
14 changed files with 1041 additions and 897 deletions
@@ -21,6 +21,8 @@ import { toast, useToast } from "@app/hooks/useToast";
import { useRouter } from "next/navigation";
import {
SettingsContainer,
SettingsFormCell,
SettingsFormGrid,
SettingsSection,
SettingsSectionHeader,
SettingsSectionTitle,
@@ -153,48 +155,54 @@ export default function GeneralPage() {
</SettingsSectionHeader>
<SettingsSectionBody>
<SettingsSectionForm>
<SettingsSectionForm variant="half">
<Form {...form}>
<form
onSubmit={form.handleSubmit(onSubmit)}
className="space-y-6"
id="general-settings-form"
>
<FormField
control={form.control}
name="name"
render={({ field }) => (
<FormItem>
<FormLabel>{t("name")}</FormLabel>
<FormControl>
<Input {...field} />
</FormControl>
<FormMessage />
</FormItem>
)}
/>
<FormField
control={form.control}
name="niceId"
render={({ field }) => (
<FormItem>
<FormLabel>
{t("identifier")}
</FormLabel>
<FormControl>
<Input
{...field}
placeholder={t(
"enterIdentifier"
)}
className="flex-1"
/>
</FormControl>
<FormMessage />
</FormItem>
)}
/>
<SettingsFormGrid>
<SettingsFormCell span="half">
<FormField
control={form.control}
name="name"
render={({ field }) => (
<FormItem>
<FormLabel>
{t("name")}
</FormLabel>
<FormControl>
<Input {...field} />
</FormControl>
<FormMessage />
</FormItem>
)}
/>
</SettingsFormCell>
<SettingsFormCell span="half">
<FormField
control={form.control}
name="niceId"
render={({ field }) => (
<FormItem>
<FormLabel>
{t("identifier")}
</FormLabel>
<FormControl>
<Input
{...field}
placeholder={t(
"enterIdentifier"
)}
/>
</FormControl>
<FormMessage />
</FormItem>
)}
/>
</SettingsFormCell>
</SettingsFormGrid>
{site && site.type === "newt" && (
<FormField
+14 -11
View File
@@ -7,7 +7,6 @@ import {
SettingsSection,
SettingsSectionBody,
SettingsSectionDescription,
SettingsSectionForm,
SettingsSectionHeader,
SettingsSectionTitle
} from "@app/components/Settings";
@@ -519,7 +518,7 @@ export default function Page() {
id="create-site-form"
>
<SettingsFormGrid>
<SettingsFormCell span="half">
<SettingsFormCell span="quarter">
<FormField
control={form.control}
name="name"
@@ -543,9 +542,11 @@ export default function Page() {
</FormItem>
)}
/>
{form.watch("method") ===
"newt" && (
<>
</SettingsFormCell>
{form.watch("method") ===
"newt" && (
<>
<SettingsFormCell span="full">
<Button
type="button"
variant="ghost"
@@ -566,7 +567,9 @@ export default function Page() {
"advancedSettings"
)}
</Button>
{showAdvancedSettings && (
</SettingsFormCell>
{showAdvancedSettings && (
<SettingsFormCell span="quarter">
<FormField
control={
form.control
@@ -575,7 +578,7 @@ export default function Page() {
render={({
field
}) => (
<FormItem className="mt-4">
<FormItem>
<FormLabel>
{t(
"siteAddress"
@@ -612,10 +615,10 @@ export default function Page() {
</FormItem>
)}
/>
)}
</>
)}
</SettingsFormCell>
</SettingsFormCell>
)}
</>
)}
</SettingsFormGrid>
</form>
</Form>