From 49aed0547ab5549f7556db968263ab549129ccdb Mon Sep 17 00:00:00 2001
From: Wildan Zulfikar <hey@wzulfikar.com>
Date: Tue, 22 Apr 2025 12:34:42 +0300
Subject: [PATCH] Make forms responsive

---
 .../src/components/Input/MarkdownEditor/Editor.tsx          | 6 +++---
 packages/dashboard/src/pages/actions/[id].tsx               | 2 +-
 packages/dashboard/src/pages/actions/new.tsx                | 2 +-
 packages/dashboard/src/pages/campaigns/[id].tsx             | 4 ++--
 packages/dashboard/src/pages/campaigns/new.tsx              | 6 +++---
 packages/dashboard/src/pages/contacts/[id].tsx              | 2 +-
 packages/dashboard/src/pages/settings/api.tsx               | 4 ++--
 packages/dashboard/src/pages/templates/[id].tsx             | 4 ++--
 packages/dashboard/src/pages/templates/new.tsx              | 4 ++--
 9 files changed, 17 insertions(+), 17 deletions(-)

diff --git a/packages/dashboard/src/components/Input/MarkdownEditor/Editor.tsx b/packages/dashboard/src/components/Input/MarkdownEditor/Editor.tsx
index 56f4881..f61a0eb 100644
--- a/packages/dashboard/src/components/Input/MarkdownEditor/Editor.tsx
+++ b/packages/dashboard/src/components/Input/MarkdownEditor/Editor.tsx
@@ -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">
diff --git a/packages/dashboard/src/pages/actions/[id].tsx b/packages/dashboard/src/pages/actions/[id].tsx
index 093404d..35fc1e8 100644
--- a/packages/dashboard/src/pages/actions/[id].tsx
+++ b/packages/dashboard/src/pages/actions/[id].tsx
@@ -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
diff --git a/packages/dashboard/src/pages/actions/new.tsx b/packages/dashboard/src/pages/actions/new.tsx
index f6cae77..1f45011 100644
--- a/packages/dashboard/src/pages/actions/new.tsx
+++ b/packages/dashboard/src/pages/actions/new.tsx
@@ -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
diff --git a/packages/dashboard/src/pages/campaigns/[id].tsx b/packages/dashboard/src/pages/campaigns/[id].tsx
index 77c8eab..847b7ec 100644
--- a/packages/dashboard/src/pages/campaigns/[id].tsx
+++ b/packages/dashboard/src/pages/campaigns/[id].tsx
@@ -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
diff --git a/packages/dashboard/src/pages/campaigns/new.tsx b/packages/dashboard/src/pages/campaigns/new.tsx
index b6bdeb0..2edcb40 100644
--- a/packages/dashboard/src/pages/campaigns/new.tsx
+++ b/packages/dashboard/src/pages/campaigns/new.tsx
@@ -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
diff --git a/packages/dashboard/src/pages/contacts/[id].tsx b/packages/dashboard/src/pages/contacts/[id].tsx
index bb4586f..a6084d4 100644
--- a/packages/dashboard/src/pages/contacts/[id].tsx
+++ b/packages/dashboard/src/pages/contacts/[id].tsx
@@ -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>
diff --git a/packages/dashboard/src/pages/settings/api.tsx b/packages/dashboard/src/pages/settings/api.tsx
index d82f0f5..3972498 100644
--- a/packages/dashboard/src/pages/settings/api.tsx
+++ b/packages/dashboard/src/pages/settings/api.tsx
@@ -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>
 
diff --git a/packages/dashboard/src/pages/templates/[id].tsx b/packages/dashboard/src/pages/templates/[id].tsx
index 958e888..5d07571 100644
--- a/packages/dashboard/src/pages/templates/[id].tsx
+++ b/packages/dashboard/src/pages/templates/[id].tsx
@@ -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
diff --git a/packages/dashboard/src/pages/templates/new.tsx b/packages/dashboard/src/pages/templates/new.tsx
index 4a35bf3..1d24071 100644
--- a/packages/dashboard/src/pages/templates/new.tsx
+++ b/packages/dashboard/src/pages/templates/new.tsx
@@ -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