fix pub create form styling

src/app/publication/create/page.tsx

@@ -29,7 +29,7 @@ export default async function Page() {
 				<CreateContainerDescription>
 					Create a new entry for a publication i.e. a place you intend to submit to.
 				</CreateContainerDescription>
-				<PubForm genres={genres} createPub={createPub} />
+				<PubForm genres={genres} createPub={createPub} className="mt-6" />
 			</CreateContainerContent>
 		</CreateContainer>
 	)

src/app/publication/loading.tsx

@@ -0,0 +1,5 @@
+import { LoadingSpinner } from "app/loading";
+
+export default function Loading() {
+  return <LoadingSpinner />
+}

src/app/submission/loading.tsx

@@ -0,0 +1,5 @@
+import { LoadingSpinner } from "app/loading";
+
+export default function Loading() {
+  return <LoadingSpinner />
+}

src/app/ui/forms/pub.tsx

@@ -23,6 +23,8 @@ import {
 import GenresTrigger from "./genresTrigger"
 import GenreCheckbox from "./genreCheckbox"
 import { randomPublicationTitle } from "app/lib/shortStoryTitleGenerator"
+import { ComponentProps } from "react"
+import { Genre } from "@prisma/client"
 
 const formSchema = z.object({
 	title: z.string().min(2).max(50),
@@ -31,7 +33,7 @@ const formSchema = z.object({
 	genres: z.array(z.number()),
 })
 
-export default function PubForm({ genres, createPub }) {
+export default function PubForm({ genres, createPub, className }: ComponentProps<"div"> & { genres: Array<Genre>, createPub: (data: any) => void }) {
 	const form = useForm<z.infer<typeof formSchema>>({
 		resolver: zodResolver(formSchema),
 		defaultValues: {
@@ -75,85 +77,87 @@ export default function PubForm({ genres, createPub }) {
 			.toLowerCase() +
 		".com"
 	return (
-		<Form {...form}>
+		<div className={className}>
-			<form onSubmit={form.handleSubmit(onSubmit, onErrors)} className="space-y-8">
+			<Form {...form}>
-				<FormField
+				<form onSubmit={form.handleSubmit(onSubmit, onErrors)} className="space-y-8">
-					control={form.control}
-					name="title"
-					render={({ field }) => (
-						<FormItem>
-							<FormLabel>Title</FormLabel>
-							<FormControl>
-								<Input placeholder={exampleTitle} {...field} />
-							</FormControl>
-							<FormMessage />
-						</FormItem>
-					)}
-				/>
-
-				<FormField
-					control={form.control}
-					name="link"
-					render={({ field }) => (
-						<FormItem>
-							<FormLabel>Website</FormLabel>
-							<FormControl>
-								<Input placeholder={exampleUrl} {...field} />
-							</FormControl>
-							<FormMessage />
-						</FormItem>
-					)}
-				/>
-
-				<div className="inline-flex flex-wrap w-full gap-x-16 gap-y-8 max-w-full h-fit">
 					<FormField
 						control={form.control}
-						name="genres"
+						name="title"
 						render={({ field }) => (
-							<FormItem className="flex flex-col flex-wrap">
+							<FormItem>
-								<FormLabel className="h-5">Genres</FormLabel>
+								<FormLabel>Title</FormLabel>
-								<Popover>
-									<GenresTrigger value={field.value} genres={genres} />
-									<PopoverContent align="start">
-										{genres.map((item) => (
-											<FormField
-												key={item.id}
-												control={form.control}
-												name="genres"
-												render={({ field }) => {
-													return (
-														<GenreCheckbox field={field} item={item} />
-													)
-												}}
-											/>
-										))}
-										<Button variant="link" className="p-0" onClick={() => form.setValue("genres", [])}>Clear</Button>
-									</PopoverContent>
-								</Popover>
-								<FormMessage />
-							</FormItem>
-						)}
-					/>
-
-
-					<FormField
-						control={form.control}
-						name="query_after_days"
-						render={({ field }) => (
-							<FormItem className="flex flex-col">
-								<FormLabel className="h-5">Query after (days)</FormLabel>
 								<FormControl>
-									<Input className=" w-24" type="number" step={5} min={30} {...field}></Input>
+									<Input placeholder={exampleTitle} {...field} />
 								</FormControl>
 								<FormMessage />
 							</FormItem>
 						)}
 					/>
-				</div>
 
-				<Button type="submit">Submit</Button>
+					<FormField
-			</form>
+						control={form.control}
-		</Form>
+						name="link"
+						render={({ field }) => (
+							<FormItem>
+								<FormLabel>Website</FormLabel>
+								<FormControl>
+									<Input placeholder={exampleUrl} {...field} />
+								</FormControl>
+								<FormMessage />
+							</FormItem>
+						)}
+					/>
+
+					<div className="inline-flex flex-wrap w-full gap-x-16 gap-y-8 max-w-full h-fit">
+						<FormField
+							control={form.control}
+							name="genres"
+							render={({ field }) => (
+								<FormItem className="flex flex-col flex-wrap">
+									<FormLabel className="h-5">Genres</FormLabel>
+									<Popover>
+										<GenresTrigger value={field.value} genres={genres} />
+										<PopoverContent align="start">
+											{genres.map((item) => (
+												<FormField
+													key={item.id}
+													control={form.control}
+													name="genres"
+													render={({ field }) => {
+														return (
+															<GenreCheckbox field={field} item={item} />
+														)
+													}}
+												/>
+											))}
+											<Button variant="link" className="p-0" onClick={() => form.setValue("genres", [])}>Clear</Button>
+										</PopoverContent>
+									</Popover>
+									<FormMessage />
+								</FormItem>
+							)}
+						/>
+
+
+						<FormField
+							control={form.control}
+							name="query_after_days"
+							render={({ field }) => (
+								<FormItem className="flex flex-col">
+									<FormLabel className="h-5">Query after (days)</FormLabel>
+									<FormControl>
+										<Input className=" w-24" type="number" step={5} min={30} {...field}></Input>
+									</FormControl>
+									<FormMessage />
+								</FormItem>
+							)}
+						/>
+					</div>
+
+					<Button type="submit">Submit</Button>
+				</form>
+			</Form>
+		</div>
 
 	)
 }