fix: template-edit-page-responsiveness (#268)

This commit is contained in:
Vamsi Sai
2025-10-10 23:38:11 +05:30
committed by GitHub
parent 1216b8085e
commit 3388426929
2 changed files with 7 additions and 7 deletions
@@ -119,7 +119,7 @@ function TemplateEditor({
return ( return (
<div className="p-4 container mx-auto"> <div className="p-4 container mx-auto">
<div className="mx-auto"> <div className="mx-auto">
<div className="mb-4 flex justify-between items-center w-[700px] mx-auto"> <div className="mb-4 flex justify-between items-center w-full sm:w-[700px] mx-auto">
<div className="flex items-center gap-3"> <div className="flex items-center gap-3">
<Link href="/templates"> <Link href="/templates">
<ArrowLeft className="h-4 w-4" /> <ArrowLeft className="h-4 w-4" />
@@ -128,7 +128,7 @@ function TemplateEditor({
type="text" type="text"
value={name} value={name}
onChange={(e) => setName(e.target.value)} onChange={(e) => setName(e.target.value)}
className=" border-0 focus:ring-0 focus:outline-none px-0.5 w-[300px]" className=" border-0 focus:ring-0 focus:outline-none px-0.5 w-full sm:w-[300px]"
onBlur={() => { onBlur={() => {
if (name === template.name || !name) { if (name === template.name || !name) {
return; return;
@@ -149,7 +149,7 @@ function TemplateEditor({
/> />
</div> </div>
<div className="flex items-center gap-4"> <div className="flex items-center gap-4 whitespace-nowrap">
<div className="flex items-center gap-2 text-sm text-gray-500"> <div className="flex items-center gap-2 text-sm text-gray-500">
{isSaving ? ( {isSaving ? (
<div className="h-2 w-2 bg-yellow rounded-full" /> <div className="h-2 w-2 bg-yellow rounded-full" />
@@ -163,7 +163,7 @@ function TemplateEditor({
</div> </div>
</div> </div>
<div className="flex flex-col mt-4 mb-4 p-4 w-[700px] mx-auto z-50"> <div className="flex flex-col mt-4 mb-4 p-4 w-full sm:w-[700px] mx-auto z-50">
<div className="flex items-center gap-4"> <div className="flex items-center gap-4">
<label className="block text-sm w-[80px] text-muted-foreground"> <label className="block text-sm w-[80px] text-muted-foreground">
Subject Subject
@@ -196,8 +196,8 @@ function TemplateEditor({
</div> </div>
</div> </div>
<div className=" rounded-lg bg-gray-50 w-[700px] mx-auto p-10"> <div className=" rounded-lg bg-gray-50 w-full sm:w-[700px] mx-auto p-4 sm:p-10">
<div className="w-[600px] mx-auto"> <div className="w-full sm:w-[600px] mx-auto">
<Editor <Editor
initialContent={json} initialContent={json}
onUpdate={(content) => { onUpdate={(content) => {
+1 -1
View File
@@ -105,7 +105,7 @@ export const Editor: React.FC<EditorProps> = ({
return ( return (
<div <div
className="bg-white rounded-md text-black p-8 unsend-editor light" className="bg-white rounded-md text-black p-4 sm:p-8 unsend-editor light"
ref={menuContainerRef} ref={menuContainerRef}
> >
<EditorContent editor={editor} className="min-h-[50vh]" /> <EditorContent editor={editor} className="min-h-[50vh]" />