From 37e7f4d15f32582c5e6125d5a2e06ffedbebf3f4 Mon Sep 17 00:00:00 2001
From: andrzej <andrzejjamesstepien@gmail.com>
Date: Wed, 25 Sep 2024 19:36:46 +0200
Subject: [PATCH] mobile friendly create submission dialog

---
 prisma/dev.db                   | Bin 69632 -> 69632 bytes
 src/app/publication/columns.tsx |   4 +--
 src/app/story/columns.tsx       |   2 +-
 src/app/submission/create.tsx   |   2 +-
 src/app/tailwind.css            |  43 ++++++++++++++++++++++++++++++++
 src/app/ui/forms/sub.tsx        |  20 +++++++--------
 6 files changed, 57 insertions(+), 14 deletions(-)

diff --git a/prisma/dev.db b/prisma/dev.db
index 37afdb8b8d5375f5ea6c9b42f81f810bbd6a77fb..168826f4e4b51091b9045b732edc724d44f47c10 100644
GIT binary patch
delta 231
zcmXAjF$%&!6h!@Ica2G81RKE=rmzq%A$SpwV&MUly?{kZL1o)O8ar(?f))ybAc#mR
zL2csKFz|<&;{6#+#9$&u4cd+U9_<$WaOT@s5+1l>i!%;*V}&K=xlGU<Loec5MS2#I
zRMKS=dK0(Gii*<VWSK0MO~yooBkouu!38gdM3}M?B#aqChiSc967<7(e;3Nt>$Kfb
wWdF0J90$*Wja7jOCw#EsF)41?!{jnSUqhR$?n!>F^6Tn-7T7%QS2-b7zxxJ5Bme*a

delta 231
zcmYMsF$%&!5QX6#ldKyxzJQIOg()n=O9)=XqgZ$V!(PB5rJ%B{kOP=Tw}^!SK@dbF
zm316#<cAp;m~Xyv=PP&FBOCXpWOuV<)Aw*9yl}?}SDbOc_MeF+G4w9&1PW&%={xJ>
z=wmwc1FA_O_-Lxs8!(d*E_fn?#SMFI{ma5Kvw%*@ZU`$va%6+I;(uRf<!Ia{6-d`7
rlB$8X@Q@1@3Y2&t=gdD7%`~*Bx-Ar<#ZDn4D|r>Eru3XIkx=*nghWS^

diff --git a/src/app/publication/columns.tsx b/src/app/publication/columns.tsx
index deb280a..5c19fed 100644
--- a/src/app/publication/columns.tsx
+++ b/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" />
       </>
     ),
diff --git a/src/app/story/columns.tsx b/src/app/story/columns.tsx
index 78c14f5..3f92040 100644
--- a/src/app/story/columns.tsx
+++ b/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" />
       </>
     ),
diff --git a/src/app/submission/create.tsx b/src/app/submission/create.tsx
index dd27e33..0c26631 100644
--- a/src/app/submission/create.tsx
+++ b/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>
diff --git a/src/app/tailwind.css b/src/app/tailwind.css
index d3db459..86a53d7 100644
--- a/src/app/tailwind.css
+++ b/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]) {
diff --git a/src/app/ui/forms/sub.tsx b/src/app/ui/forms/sub.tsx
index b578a12..989b1d1 100644
--- a/src/app/ui/forms/sub.tsx
+++ b/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>
 					)}