misc styling

src/app/tailwind.css

@@ -894,6 +894,22 @@ body {
   max-height: 100vh;
 }
 
+.min-h-40 {
+  min-height: 10rem;
+}
+
+.min-h-6 {
+  min-height: 1.5rem;
+}
+
+.min-h-8 {
+  min-height: 2rem;
+}
+
+.min-h-10 {
+  min-height: 2.5rem;
+}
+
 .w-10 {
   width: 2.5rem;
 }
@@ -1540,6 +1556,22 @@ body {
   line-height: 1;
 }
 
+.leading-10 {
+  line-height: 2.5rem;
+}
+
+.leading-8 {
+  line-height: 2rem;
+}
+
+.leading-6 {
+  line-height: 1.5rem;
+}
+
+.leading-5 {
+  line-height: 1.25rem;
+}
+
 .tracking-tight {
   letter-spacing: -0.025em;
 }

src/app/ui/forms/genresTrigger.tsx

@@ -11,7 +11,7 @@ export default function GenresTrigger({ value, genres }) {
 				<Button
 					variant={"outline"}
 					className={cn(
-						"min-w-fit max-w-full w-fit pl-3 text-left font-normal flex-wrap gap-y-1 h-fit",
+						"min-w-fit max-w-full w-fit pl-3 text-left font-normal flex-wrap gap-y-1 h-fit min-h-10",
 						!value && "text-muted-foreground"
 					)}
 				>

src/app/ui/forms/pub.tsx

@@ -127,6 +127,7 @@ export default function PubForm({ genres, createPub }) {
 												}}
 											/>
 										))}
+										<Button variant="link" className="p-0" onClick={() => form.setValue("genres", [])}>Clear</Button>
 									</PopoverContent>
 								</Popover>
 								<FormMessage />

src/app/ui/forms/story.tsx

@@ -118,6 +118,7 @@ export default function StoryForm({ genres, createStory, className }: ComponentP
 													}}
 												/>
 											))}
+											<Button variant="link" className="p-0" onClick={() => form.setValue("genres", [])}>Clear</Button>
 										</PopoverContent>
 									</Popover>
 									<FormMessage />
@@ -140,6 +141,7 @@ export default function StoryForm({ genres, createStory, className }: ComponentP
 						/>
 
 					</div>
+
 					<Button type="submit" className="">Submit</Button>