mobile friendly create submission dialog

src/app/publication/columns.tsx

@@ -32,7 +32,7 @@ export const columns: ColumnDef<PubsWithGenres>[] = [
     },
     cell: cell => (
       <>
-        <p className="block text-xs md:hidden">{cell.getValue()}</p>
+        <p className="block text-xs max-w-24 break-words md:hidden">{cell.getValue()}</p>
         <TextInputCell cellContext={cell} className="hidden md:block" />
       </>
     ),
@@ -49,7 +49,7 @@ export const columns: ColumnDef<PubsWithGenres>[] = [
     ),
     cell: cell => (
       <>
-        <p className="block text-xs md:hidden">{cell.getValue()}</p>
+        <p className="block text-xs max-w-16 truncate md:hidden">{cell.getValue()}</p>
         <TextInputCell cellContext={cell} className="hidden md:block" />
       </>
     ),

src/app/story/columns.tsx

@@ -31,7 +31,7 @@ export const columns: ColumnDef<StoryWithGenres>[] = [
     },
     cell: cell => (
       <>
-        <p className="block md:hidden text-xs">{cell.getValue()}</p>
+        <p className="block break-words max-w-36 md:hidden text-xs">{cell.getValue()}</p>
         <TextInputCell cellContext={cell} className="hidden md:block" />
       </>
     ),

src/app/submission/create.tsx

@@ -34,7 +34,7 @@ export default function CreateSubmissionDialog({ stories, pubs, responses, defau
           <Plus className="block md:hidden" />
         </Button>
       </DialogTrigger>
-      <DialogContent>
+      <DialogContent className="text-xs md:text-sm">
         <DialogHeader>
           <DialogTitle>New submission</DialogTitle>
           <DialogDescription>Create an entry for a new story i.e. a thing you intend to submit for publication.</DialogDescription>

src/app/tailwind.css

@@ -989,6 +989,22 @@ body {
   max-width: 20rem;
 }
 
+.max-w-8 {
+  max-width: 2rem;
+}
+
+.max-w-24 {
+  max-width: 6rem;
+}
+
+.max-w-16 {
+  max-width: 4rem;
+}
+
+.max-w-36 {
+  max-width: 9rem;
+}
+
 .shrink-0 {
   flex-shrink: 0;
 }
@@ -1182,6 +1198,12 @@ body {
   margin-bottom: calc(2rem * var(--tw-space-y-reverse));
 }
 
+.space-y-3 > :not([hidden]) ~ :not([hidden]) {
+  --tw-space-y-reverse: 0;
+  margin-top: calc(0.75rem * calc(1 - var(--tw-space-y-reverse)));
+  margin-bottom: calc(0.75rem * var(--tw-space-y-reverse));
+}
+
 .justify-self-end {
   justify-self: end;
 }
@@ -1194,10 +1216,20 @@ body {
   overflow: hidden;
 }
 
+.truncate {
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+
 .whitespace-nowrap {
   white-space: nowrap;
 }
 
+.break-words {
+  overflow-wrap: break-word;
+}
+
 .rounded-3xl {
   border-radius: 1.5rem;
 }
@@ -2396,6 +2428,12 @@ body {
     flex-direction: column;
   }
 
+  .md\:space-y-8 > :not([hidden]) ~ :not([hidden]) {
+    --tw-space-y-reverse: 0;
+    margin-top: calc(2rem * calc(1 - var(--tw-space-y-reverse)));
+    margin-bottom: calc(2rem * var(--tw-space-y-reverse));
+  }
+
   .md\:rounded-l-3xl {
     border-top-left-radius: 1.5rem;
     border-bottom-left-radius: 1.5rem;
@@ -2419,6 +2457,11 @@ body {
     font-size: 0.875rem;
     line-height: 1.25rem;
   }
+
+  .md\:text-base {
+    font-size: 1rem;
+    line-height: 1.5rem;
+  }
 }
 
 .\[\&\:has\(\[aria-selected\]\)\]\:bg-accent:has([aria-selected]) {

src/app/ui/forms/sub.tsx

@@ -95,7 +95,7 @@ export default function SubmissionForm({ stories, pubs, responses, defaults, clo
 
 	return (
 		<Form {...form}>
-			<form id="subform" onSubmit={form.handleSubmit(onSubmit, onErrors)} className="space-y-8">
+			<form id="subform" onSubmit={form.handleSubmit(onSubmit, onErrors)} className="space-y-2 md:space-y-8 text-xs">
 				<FormField
 					control={form.control}
 					name="storyId"
@@ -114,7 +114,7 @@ export default function SubmissionForm({ stories, pubs, responses, defaults, clo
 									{storiesSelectItems}
 								</SelectContent>
 							</Select>
-							<FormDescription>The piece you submitted</FormDescription>
+							<FormDescription className="text-xs md:text-base">The piece you submitted</FormDescription>
 							<FormMessage />
 						</FormItem>
 					)}
@@ -124,7 +124,7 @@ export default function SubmissionForm({ stories, pubs, responses, defaults, clo
 					name="pubId"
 					render={({ field }) => (
 						<FormItem>
-							<FormLabel>Publication</FormLabel>
+							<FormLabel className="text-sm md:text-base">Publication</FormLabel>
 							<Select onValueChange={field.onChange} defaultValue={field.value}>
 								<FormControl>
 									<SelectTrigger>
@@ -137,7 +137,7 @@ export default function SubmissionForm({ stories, pubs, responses, defaults, clo
 									{pubsSelectItems}
 								</SelectContent>
 							</Select>
-							<FormDescription>The market you sent it to</FormDescription>
+							<FormDescription className="text-xs md:text-base">The market you sent it to</FormDescription>
 							<FormMessage />
 						</FormItem>
 					)}
@@ -148,7 +148,7 @@ export default function SubmissionForm({ stories, pubs, responses, defaults, clo
 					name="submitted"
 					render={({ field }) => (
 						<FormItem className="flex flex-col">
-							<FormLabel>Date of submission</FormLabel>
+							<FormLabel className="text-sm md:text-base">Date of submission</FormLabel>
 							<Popover modal={true} open={isSubCalendarOpen} onOpenChange={setIsSubCalendarOpen}>
 								<PopoverTrigger asChild>
 									<FormControl>
@@ -180,7 +180,7 @@ export default function SubmissionForm({ stories, pubs, responses, defaults, clo
 									/>
 								</PopoverContent>
 							</Popover>
-							<FormDescription>
+							<FormDescription className="text-xs md:text-base">
 								The date you sent it
 							</FormDescription>
 							<FormMessage />
@@ -193,7 +193,7 @@ export default function SubmissionForm({ stories, pubs, responses, defaults, clo
 					name="responded"
 					render={({ field }) => (
 						<FormItem className="flex flex-col">
-							<FormLabel>Date of response</FormLabel>
+							<FormLabel className="text-sm md:text-base">Date of response</FormLabel>
 							<Popover modal={true} open={isRespCalendarOpen} onOpenChange={setIsRespCalendarOpen}>
 								<PopoverTrigger asChild>
 									<FormControl>
@@ -225,7 +225,7 @@ export default function SubmissionForm({ stories, pubs, responses, defaults, clo
 									/>
 								</PopoverContent>
 							</Popover>
-							<FormDescription>
+							<FormDescription className="text-xs md:text-base">
 								The date they wrote back
 							</FormDescription>
 							<FormMessage />
@@ -239,7 +239,7 @@ export default function SubmissionForm({ stories, pubs, responses, defaults, clo
 					name="responseId"
 					render={({ field }) => (
 						<FormItem>
-							<FormLabel>Response</FormLabel>
+							<FormLabel className="text-sm md:text-base">Response</FormLabel>
 							<Select onValueChange={field.onChange} defaultValue={field.value}>
 								<FormControl>
 									<SelectTrigger>
@@ -252,7 +252,7 @@ export default function SubmissionForm({ stories, pubs, responses, defaults, clo
 									{reponsesSelectItems}
 								</SelectContent>
 							</Select>
-							<FormDescription>The market you sent it to</FormDescription>
+							<FormDescription className="text-xs md:text-base">The market you sent it to</FormDescription>
 							<FormMessage />
 						</FormItem>
 					)}