Make forms responsive
This commit is contained in:
@@ -711,8 +711,8 @@ export default function Editor({ value, onChange, mode, modeSwitcher }: Markdown
|
||||
</div>
|
||||
</div>
|
||||
<>
|
||||
<div className={"prose prose-sm prose-neutral space-y-4 break-words p-4"}>
|
||||
<div className={"w-full"} style={{ width: "600px" }}>
|
||||
<div className={"prose prose-sm prose-neutral space-y-4 break-words p-4 w-full"}>
|
||||
<div className={"w-full lg:w-[600px]"}>
|
||||
<EditorContent editor={editor} />
|
||||
<EditorBubbleMenu
|
||||
editor={editor}
|
||||
@@ -739,7 +739,7 @@ export default function Editor({ value, onChange, mode, modeSwitcher }: Markdown
|
||||
</>
|
||||
) : (
|
||||
<>
|
||||
<div className={"mb-3 grid gap-3 md:grid-cols-1"}>
|
||||
<div className={"mb-3 sm:grid sm:gap-3 md:grid-cols-1"}>
|
||||
<div>
|
||||
<label className="block text-sm font-medium text-neutral-700">Email Body</label>
|
||||
<div className="mt-1 h-full">
|
||||
|
||||
@@ -415,7 +415,7 @@ export default function Index() {
|
||||
return router.push("/actions");
|
||||
}}
|
||||
className={
|
||||
"flex w-full justify-center rounded border border-neutral-300 bg-white px-6 py-2 text-base font-medium text-neutral-800 focus:outline-none focus:ring-2 focus:ring-neutral-800 focus:ring-offset-2 sm:mt-0 sm:w-auto sm:text-sm"
|
||||
"flex w-fit justify-center rounded border border-neutral-300 bg-white px-6 py-2 text-base font-medium text-neutral-800 focus:outline-none focus:ring-2 focus:ring-neutral-800 focus:ring-offset-2 sm:mt-0 sm:w-auto sm:text-sm"
|
||||
}
|
||||
>
|
||||
Cancel
|
||||
|
||||
@@ -305,7 +305,7 @@ export default function Index() {
|
||||
return router.push("/actions");
|
||||
}}
|
||||
className={
|
||||
"flex w-full justify-center rounded border border-neutral-300 bg-white px-6 py-2 text-base font-medium text-neutral-700 focus:outline-none focus:ring-2 focus:ring-neutral-800 focus:ring-offset-2 sm:mt-0 sm:w-auto sm:text-sm"
|
||||
"flex w-fit justify-center rounded border border-neutral-300 bg-white px-6 py-2 text-base font-medium text-neutral-700 focus:outline-none focus:ring-2 focus:ring-neutral-800 focus:ring-offset-2 sm:mt-0 sm:w-auto sm:text-sm"
|
||||
}
|
||||
>
|
||||
Cancel
|
||||
|
||||
@@ -422,7 +422,7 @@ export default function Index() {
|
||||
</>
|
||||
}
|
||||
>
|
||||
<form onSubmit={handleSubmit(update)} className="space-6 grid gap-6 sm:grid-cols-6">
|
||||
<form onSubmit={handleSubmit(update)} className="space-y-6 sm:space-y-0 sm:space-6 sm:grid sm:gap-6 sm:grid-cols-6">
|
||||
<div className={"sm:col-span-6 grid sm:grid-cols-6 gap-6"}>
|
||||
<Input
|
||||
className={"sm:col-span-6"}
|
||||
@@ -874,7 +874,7 @@ export default function Index() {
|
||||
</AnimatePresence>
|
||||
</div>
|
||||
|
||||
<div className={"ml-auto mt-6 flex justify-end gap-x-5 sm:col-span-6"}>
|
||||
<div className={"ml-auto mt-6 sm:flex justify-end sm:gap-x-5 sm:col-span-6"}>
|
||||
{campaign.status === "DRAFT" ? (
|
||||
<>
|
||||
<motion.button
|
||||
|
||||
@@ -212,8 +212,8 @@ export default function Index() {
|
||||
<>
|
||||
<Dashboard>
|
||||
<Card title={"Create a new campaign"}>
|
||||
<form onSubmit={handleSubmit(create)} className="space-6 grid gap-6 sm:grid-cols-6">
|
||||
<div className={"sm:col-span-6 grid sm:grid-cols-6 gap-6"}>
|
||||
<form onSubmit={handleSubmit(create)} className="space-y-6 sm:grid sm:grid-cols-6 sm:gap-6">
|
||||
<div className={"sm:col-span-6 sm:grid sm:grid-cols-6 sm:gap-6 space-y-6 sm:space-y-0"}>
|
||||
<Input
|
||||
className={"sm:col-span-6"}
|
||||
label={"Subject"}
|
||||
@@ -626,7 +626,7 @@ export default function Index() {
|
||||
return router.push("/campaigns");
|
||||
}}
|
||||
className={
|
||||
"flex w-full justify-center rounded border border-neutral-300 bg-white px-6 py-2 text-base font-medium text-neutral-800 focus:outline-none focus:ring-2 focus:ring-neutral-800 focus:ring-offset-2 sm:mt-0 sm:w-auto sm:text-sm"
|
||||
"flex w-fit justify-center rounded border border-neutral-300 bg-white px-6 py-2 text-base font-medium text-neutral-800 focus:outline-none focus:ring-2 focus:ring-neutral-800 focus:ring-offset-2 sm:mt-0 sm:w-auto sm:text-sm"
|
||||
}
|
||||
>
|
||||
Cancel
|
||||
|
||||
@@ -246,7 +246,7 @@ export default function Index() {
|
||||
</>
|
||||
}
|
||||
>
|
||||
<form onSubmit={handleSubmit(update)} className="grid gap-x-5 space-y-9 sm:grid-cols-2">
|
||||
<form onSubmit={handleSubmit(update)} className="space-y-6 sm:grid sm:gap-x-5 sm:space-y-9 sm:grid-cols-2">
|
||||
<div className={"col-span-2 flex items-center gap-6"}>
|
||||
<span className="inline-flex h-20 w-20 items-center justify-center rounded-full bg-neutral-100">
|
||||
<span className="text-xl font-semibold leading-none text-neutral-800">{contact.email[0].toUpperCase()}</span>
|
||||
|
||||
@@ -94,7 +94,7 @@ export default function Index() {
|
||||
}}
|
||||
>
|
||||
<label className="block text-sm font-medium text-neutral-700">Public API Key</label>
|
||||
<p className={"cursor-pointer rounded border border-neutral-300 bg-neutral-100 px-3 py-2 text-sm"}>
|
||||
<p className={"cursor-pointer rounded border border-neutral-300 bg-neutral-100 px-3 py-2 text-sm truncate"}>
|
||||
{activeProject.public}
|
||||
</p>
|
||||
|
||||
@@ -111,7 +111,7 @@ export default function Index() {
|
||||
}}
|
||||
>
|
||||
<label className="block text-sm font-medium text-neutral-700">Secret API Key</label>
|
||||
<p className={"cursor-pointer rounded border border-neutral-300 bg-neutral-100 px-3 py-2 text-sm"}>
|
||||
<p className={"cursor-pointer rounded border border-neutral-300 bg-neutral-100 px-3 py-2 text-sm truncate"}>
|
||||
{activeProject.secret}
|
||||
</p>
|
||||
|
||||
|
||||
@@ -203,7 +203,7 @@ export default function Index() {
|
||||
</>
|
||||
}
|
||||
>
|
||||
<form onSubmit={handleSubmit(update)} className="grid gap-6 sm:grid-cols-6">
|
||||
<form onSubmit={handleSubmit(update)} className="space-y-6 sm:space-y-0 sm:grid sm:gap-6 sm:grid-cols-6">
|
||||
<Input
|
||||
className={"sm:col-span-4"}
|
||||
label={"Subject"}
|
||||
@@ -320,7 +320,7 @@ export default function Index() {
|
||||
return router.push("/templates");
|
||||
}}
|
||||
className={
|
||||
"flex w-full justify-center rounded border border-neutral-300 bg-white px-6 py-2 text-base font-medium text-neutral-700 focus:outline-none focus:ring-2 focus:ring-neutral-800 focus:ring-offset-2 sm:mt-0 sm:w-auto sm:text-sm"
|
||||
"flex w-fit justify-center rounded border border-neutral-300 bg-white px-6 py-2 text-base font-medium text-neutral-700 focus:outline-none focus:ring-2 focus:ring-neutral-800 focus:ring-offset-2 sm:mt-0 sm:w-auto sm:text-sm"
|
||||
}
|
||||
>
|
||||
Cancel
|
||||
|
||||
@@ -96,7 +96,7 @@ export default function Index() {
|
||||
<>
|
||||
<Dashboard>
|
||||
<Card title={"Create a new template"} description={"Reusable blueprints of your emails"}>
|
||||
<form onSubmit={handleSubmit(create)} className="grid gap-6 sm:grid-cols-6">
|
||||
<form onSubmit={handleSubmit(create)} className="space-y-6 sm:space-y-0 sm:grid sm:gap-6 sm:grid-cols-6">
|
||||
<Input
|
||||
className={"sm:col-span-4"}
|
||||
label={"Subject"}
|
||||
@@ -213,7 +213,7 @@ export default function Index() {
|
||||
return router.push("/templates");
|
||||
}}
|
||||
className={
|
||||
"flex w-full justify-center rounded border border-neutral-300 bg-white px-6 py-2 text-base font-medium text-neutral-700 focus:outline-none focus:ring-2 focus:ring-neutral-800 focus:ring-offset-2 sm:mt-0 sm:w-auto sm:text-sm"
|
||||
"flex w-fit justify-center rounded border border-neutral-300 bg-white px-6 py-2 text-base font-medium text-neutral-700 focus:outline-none focus:ring-2 focus:ring-neutral-800 focus:ring-offset-2 sm:mt-0 sm:w-auto sm:text-sm"
|
||||
}
|
||||
>
|
||||
Cancel
|
||||
|
||||
Reference in New Issue
Block a user