Update TemplateEditor.tsx
This commit is contained in:
@@ -161,7 +161,7 @@ const Editor: React.FC<Props> = ({ initialTemplate, onBack, onSave }) => {
|
||||
return (
|
||||
<div className="flex flex-col h-screen bg-slate-50">
|
||||
{/* Top Bar */}
|
||||
<header className="bg-white border-b border-slate-200 px-6 py-4 flex items-center justify-between sticky top-0 z-20">
|
||||
<header className="bg-white border-b border-slate-200 px-6 py-4 flex items-center justify-between sticky top-0 z-20 shrink-0">
|
||||
<div className="flex items-center gap-4">
|
||||
<button onClick={onBack} className="p-2 hover:bg-slate-100 rounded-full text-slate-500">
|
||||
<ArrowLeft size={20} />
|
||||
@@ -288,8 +288,8 @@ const Editor: React.FC<Props> = ({ initialTemplate, onBack, onSave }) => {
|
||||
</div>
|
||||
|
||||
{/* Right: Live Preview */}
|
||||
<div className="w-1/2 bg-slate-100 flex flex-col">
|
||||
<div className="p-3 bg-white border-b border-slate-200 flex justify-between items-center shadow-sm z-10">
|
||||
<div className="w-1/2 bg-slate-100 flex flex-col overflow-hidden">
|
||||
<div className="p-3 bg-white border-b border-slate-200 flex justify-between items-center shadow-sm z-10 shrink-0">
|
||||
<span className="font-semibold text-slate-600 flex items-center gap-2">
|
||||
<Eye size={18} /> Live Preview
|
||||
</span>
|
||||
@@ -297,8 +297,10 @@ const Editor: React.FC<Props> = ({ initialTemplate, onBack, onSave }) => {
|
||||
Renders as standard HTML
|
||||
</div>
|
||||
</div>
|
||||
<div className="flex-1 p-8 overflow-y-auto custom-scrollbar flex justify-center">
|
||||
<div className="w-full max-w-2xl bg-white shadow-xl rounded-lg overflow-hidden min-h-[600px] flex flex-col">
|
||||
{/* Scrollable container: flex-1 ensures it takes available space, overflow-y-auto enables scrolling */}
|
||||
<div className="flex-1 p-8 overflow-y-auto custom-scrollbar">
|
||||
{/* mx-auto centers the card without using flexbox on the parent which can cause scroll issues */}
|
||||
<div className="w-full max-w-2xl bg-white shadow-xl rounded-lg overflow-hidden min-h-[600px] flex flex-col mx-auto">
|
||||
{/* Simulate Subject Line in Preview */}
|
||||
<div className="bg-slate-50 border-b border-slate-100 p-4">
|
||||
<span className="text-xs font-bold text-slate-400 uppercase">Subject:</span>
|
||||
|
||||
Reference in New Issue
Block a user