Fixed UI jumping

This commit is contained in:
Daniel Hougaard
2023-11-28 13:49:08 +04:00
parent f187cc2c26
commit 6efb58da1a

View File

@@ -3,6 +3,7 @@ import { useForm } from "react-hook-form";
import { faClock } from "@fortawesome/free-solid-svg-icons"; import { faClock } from "@fortawesome/free-solid-svg-icons";
import { FontAwesomeIcon } from "@fortawesome/react-fontawesome"; import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
import { zodResolver } from "@hookform/resolvers/zod"; import { zodResolver } from "@hookform/resolvers/zod";
import { twMerge } from "tailwind-merge";
import { z } from "zod"; import { z } from "zod";
import { Button, FormControl, Input, Modal, ModalContent, TextArea } from "@app/components/v2"; import { Button, FormControl, Input, Modal, ModalContent, TextArea } from "@app/components/v2";
@@ -59,7 +60,7 @@ export const CreateReminderForm = ({ isOpen, onOpenChange }: ReminderFormProps)
} }
> >
<form onSubmit={handleSubmit(handleFormSubmit)}> <form onSubmit={handleSubmit(handleFormSubmit)}>
<div className="space-y-4"> <div className="space-y-2">
<div> <div>
<FormControl <FormControl
className="mb-0" className="mb-0"
@@ -70,14 +71,12 @@ export const CreateReminderForm = ({ isOpen, onOpenChange }: ReminderFormProps)
<Input <Input
onChange={(el) => setValue("days", parseInt(el.target.value, 10))} onChange={(el) => setValue("days", parseInt(el.target.value, 10))}
type="number" type="number"
placeholder="every 5 days" placeholder="31"
/> />
</FormControl> </FormControl>
{!!daysWatch && ( <div className={twMerge("mt-2 ml-1 text-xs", daysWatch ? "opacity-60" : "opacity-0")}>
<div className="mt-2 ml-1 text-xs opacity-60"> Every {daysWatch > 1 ? `${daysWatch} days` : "day"}
Every {daysWatch > 1 ? `${daysWatch} days` : "day"} </div>
</div>
)}
</div> </div>
<FormControl label="Note" className="mb-0"> <FormControl label="Note" className="mb-0">