Update TemplateEditor.tsx

This commit is contained in:
fcarraUniSa
2025-12-10 16:03:30 +01:00
committed by GitHub
parent 3930873654
commit 5957c19ce0

View File

@@ -161,7 +161,7 @@ const Editor: React.FC<Props> = ({ initialTemplate, onBack, onSave }) => {
return ( return (
<div className="flex flex-col h-screen bg-slate-50"> <div className="flex flex-col h-screen bg-slate-50">
{/* Top Bar */} {/* 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"> <div className="flex items-center gap-4">
<button onClick={onBack} className="p-2 hover:bg-slate-100 rounded-full text-slate-500"> <button onClick={onBack} className="p-2 hover:bg-slate-100 rounded-full text-slate-500">
<ArrowLeft size={20} /> <ArrowLeft size={20} />
@@ -288,8 +288,8 @@ const Editor: React.FC<Props> = ({ initialTemplate, onBack, onSave }) => {
</div> </div>
{/* Right: Live Preview */} {/* Right: Live Preview */}
<div className="w-1/2 bg-slate-100 flex flex-col"> <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"> <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"> <span className="font-semibold text-slate-600 flex items-center gap-2">
<Eye size={18} /> Live Preview <Eye size={18} /> Live Preview
</span> </span>
@@ -297,8 +297,10 @@ const Editor: React.FC<Props> = ({ initialTemplate, onBack, onSave }) => {
Renders as standard HTML Renders as standard HTML
</div> </div>
</div> </div>
<div className="flex-1 p-8 overflow-y-auto custom-scrollbar flex justify-center"> {/* Scrollable container: flex-1 ensures it takes available space, overflow-y-auto enables scrolling */}
<div className="w-full max-w-2xl bg-white shadow-xl rounded-lg overflow-hidden min-h-[600px] flex flex-col"> <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 */} {/* Simulate Subject Line in Preview */}
<div className="bg-slate-50 border-b border-slate-100 p-4"> <div className="bg-slate-50 border-b border-slate-100 p-4">
<span className="text-xs font-bold text-slate-400 uppercase">Subject:</span> <span className="text-xs font-bold text-slate-400 uppercase">Subject:</span>