style table and dialog

src/app/publication/columns.tsx

@@ -49,13 +49,15 @@ export const columns: ColumnDef<PubsWithGenres>[] = [
         .map(e => <Badge>{e.name}</Badge>)
       return genres
     },
+    header: "Genres",
     filterFn: "arrIncludes"
     //TODO - write custom filter function, to account for an array of objects
   }),
 
   {
     accessorKey: "query_after_days",
-    header: "Query After (days)"
+    header: "Query After (days)",
+    cell: props => <p className="w-full text-center">{props.getValue()}</p>
   },
 
 

src/app/story/columns.tsx

@@ -38,13 +38,16 @@ export const columns: ColumnDef<StoryWithGenres>[] = [
         </Button>
       )
     },
-    enableColumnFilter: false
+    enableColumnFilter: false,
+    cell: props => <p className="w-full text-center">{props.getValue()}</p>
+
   },
   columnHelper.accessor("genres", {
     cell: props => {
       const genres = props.getValue()
       return <GenreBadges genres={genres} />
     },
+    header: "Genres",
     filterFn: "arrIncludes"
     //TODO - write custom filter function, to account for an array of objects
   }),

src/app/submission/columns.tsx

@@ -18,14 +18,14 @@ export const columns: ColumnDef<SubComplete>[] = [
           variant="ghost"
           onClick={() => column.toggleSorting(column.getIsSorted() === "asc")}
         >
-          Date Submitted
+          Submitted
           <ArrowUpDown className="ml-2 h-4 w-4" />
         </Button>
       )
     },
     enableColumnFilter: false,
     sortingFn: "datetime",
-    cell: props => { return props.getValue().toLocaleDateString() }
+    cell: props => { return <p className="w-full text-center">{props.getValue().toLocaleDateString()}</p> }
   },
   {
     accessorFn: row => row.responded ? new Date(row.responded) : null,
@@ -36,14 +36,14 @@ export const columns: ColumnDef<SubComplete>[] = [
           variant="ghost"
           onClick={() => column.toggleSorting(column.getIsSorted() === "asc")}
         >
-          Date Responded
+          Responded
           <ArrowUpDown className="ml-2 h-4 w-4" />
         </Button>
       )
     },
     enableColumnFilter: false,
     sortingFn: "datetime",
-    cell: props => props.getValue() ? props.getValue().toLocaleDateString() : '-'
+    cell: props => <p className="w-full text-center">{props.getValue() ? props.getValue().toLocaleDateString() : '-'}</p>
   },
   {
     accessorFn: row => {

src/app/submission/create.tsx

@@ -17,10 +17,10 @@ export default function CreateSubmissionDialog({ stories, pubs, responses }: Com
       <DialogTrigger asChild>
         <Button>Create new submission</Button>
       </DialogTrigger>
-      <DialogContent>
+      <DialogContent className="max-w-fit">
         <DialogHeader>
           <DialogTitle>New submission</DialogTitle>
-          <DialogDescription>Create an entry for a new story i.e. a thing you intend to submit for publication.</DialogDescription>
+          <DialogDescription>Create an entry for a new submission.</DialogDescription>
         </DialogHeader>
         <SubmissionForm createSub={createSub} pubs={pubs} responses={responses} stories={stories} />
         <DialogFooter>

src/app/tailwind.css

@@ -984,6 +984,23 @@ body {
   max-width: 24rem;
 }
 
+.max-w-fit {
+  max-width: -moz-fit-content;
+  max-width: fit-content;
+}
+
+.max-w-24 {
+  max-width: 6rem;
+}
+
+.max-w-96 {
+  max-width: 24rem;
+}
+
+.max-w-52 {
+  max-width: 13rem;
+}
+
 .shrink-0 {
   flex-shrink: 0;
 }
@@ -1108,6 +1125,10 @@ body {
   gap: 1rem;
 }
 
+.gap-6 {
+  gap: 1.5rem;
+}
+
 .gap-x-16 {
   -moz-column-gap: 4rem;
        column-gap: 4rem;
@@ -1121,6 +1142,27 @@ body {
   row-gap: 2rem;
 }
 
+.gap-x-1 {
+  -moz-column-gap: 0.25rem;
+       column-gap: 0.25rem;
+}
+
+.gap-y-4 {
+  row-gap: 1rem;
+}
+
+.gap-y-40 {
+  row-gap: 10rem;
+}
+
+.gap-y-6 {
+  row-gap: 1.5rem;
+}
+
+.gap-y-2 {
+  row-gap: 0.5rem;
+}
+
 .space-x-1 > :not([hidden]) ~ :not([hidden]) {
   --tw-space-x-reverse: 0;
   margin-right: calc(0.25rem * var(--tw-space-x-reverse));
@@ -1181,6 +1223,18 @@ body {
   margin-bottom: calc(2rem * var(--tw-space-y-reverse));
 }
 
+.space-y-6 > :not([hidden]) ~ :not([hidden]) {
+  --tw-space-y-reverse: 0;
+  margin-top: calc(1.5rem * calc(1 - var(--tw-space-y-reverse)));
+  margin-bottom: calc(1.5rem * var(--tw-space-y-reverse));
+}
+
+.space-y-5 > :not([hidden]) ~ :not([hidden]) {
+  --tw-space-y-reverse: 0;
+  margin-top: calc(1.25rem * calc(1 - var(--tw-space-y-reverse)));
+  margin-bottom: calc(1.25rem * var(--tw-space-y-reverse));
+}
+
 .justify-self-end {
   justify-self: end;
 }
@@ -1458,6 +1512,10 @@ body {
   line-height: 1.5rem;
 }
 
+.text-clamp {
+  font-size: clamp(0.75rem, 5vw, 1rem);
+}
+
 .text-lg {
   font-size: 1.125rem;
   line-height: 1.75rem;
@@ -2390,6 +2448,10 @@ body {
   border-bottom-width: 0px;
 }
 
+.\[\&_\*\]\:text-clamp * {
+  font-size: clamp(0.75rem, 5vw, 1rem);
+}
+
 .\[\&_tr\:last-child\]\:border-0 tr:last-child {
   border-width: 0px;
 }

src/app/ui/forms/sub.tsx

@@ -31,7 +31,8 @@ import {
 	SelectTrigger,
 	SelectValue,
 } from "@/components/ui/select"
-import { useState } from "react"
+import { ComponentProps, useState } from "react"
+import { Pub, Story } from "@prisma/client"
 
 const FormSchema = z.object({
 	storyId: z.coerce.number(),
@@ -66,7 +67,12 @@ const FormSchema = z.object({
 	)
 
 
-export default function SubmissionForm({ stories, pubs, responses, createSub }) {
+export default function SubmissionForm({ className, stories, pubs, responses, createSub }: ComponentProps<"form"> & {
+	stories: Story[],
+	pubs: Pub[],
+	responses: Response[],
+	createSub: (arg0: any) => void
+}) {
 	const form = useForm<z.infer<typeof FormSchema>>({
 		resolver: zodResolver(FormSchema),
 		defaultValues: {
@@ -123,7 +129,8 @@ export default function SubmissionForm({ stories, pubs, responses, createSub })
 
 	return (
 		<Form {...form}>
-			<form id="subform" onSubmit={form.handleSubmit(onSubmit, onErrors)} className="space-y-8">
+			<form id="subform" onSubmit={form.handleSubmit(onSubmit, onErrors)} className={className + " " + "space-y-8"}
+			>
 				<FormField
 					control={form.control}
 					name="storyId"
@@ -171,11 +178,12 @@ export default function SubmissionForm({ stories, pubs, responses, createSub })
 					)}
 				/>
 
+				<div className="flex flex-row gap-6">
 					<FormField
 						control={form.control}
 						name="submitted"
 						render={({ field }) => (
-						<FormItem className="flex flex-col">
+							<FormItem className="inline-flex flex-col">
 								<FormLabel>Date of submission</FormLabel>
 								<Popover modal={true} open={isSubCalendarOpen} onOpenChange={setIsSubCalendarOpen}>
 									<PopoverTrigger asChild>
@@ -220,7 +228,7 @@ export default function SubmissionForm({ stories, pubs, responses, createSub })
 						control={form.control}
 						name="responded"
 						render={({ field }) => (
-						<FormItem className="flex flex-col">
+							<FormItem className="inline-flex flex-col">
 								<FormLabel>Date of response</FormLabel>
 								<Popover modal={true} open={isRespCalendarOpen} onOpenChange={setIsRespCalendarOpen}>
 									<PopoverTrigger asChild>
@@ -260,6 +268,7 @@ export default function SubmissionForm({ stories, pubs, responses, createSub })
 							</FormItem>
 						)}
 					/>
+				</div>
 
 
 				<FormField

src/app/ui/genreBadges.tsx

@@ -4,7 +4,7 @@ import { Badge } from "@/components/ui/badge";
 
 export default function GenreBadges(props: ComponentProps<"div"> & { genres: Array<Genre> }) {
   return (
-    <div className={props.className}>
+    <div className={props.className + " max-w-52 flex flex-wrap gap-x-1 gap-y-1"}>
       {props.genres.map((e: Genre) => (<Badge key={e.name}>{e.name}</Badge>))}
     </div>
   )

src/app/ui/tables/data-table.tsx

@@ -182,7 +182,7 @@ export function DataTable<TData, TValue>({
     </div>
     <div className="rounded-md border">
 
-      <Table>
+      <Table className="text-clamp">
         <TableHeader>
           {table.getHeaderGroups().map((headerGroup) => (
             <TableRow key={headerGroup.id}>

tailwind.config.js

@@ -21,6 +21,9 @@ module.exports = {
       },
     },
     extend: {
+      fontSize: {
+        clamp: "clamp(0.75rem, 0.707vw + 0.397rem, 1rem)",
+      },
       colors: {
         border: "hsl(var(--border))",
         input: "hsl(var(--input))",