diff --git a/apps/dashboard/src/components/workflow-editor/steps/email/email-editor.tsx b/apps/dashboard/src/components/workflow-editor/steps/email/email-editor.tsx
index 37487f0351b..904496048ea 100644
--- a/apps/dashboard/src/components/workflow-editor/steps/email/email-editor.tsx
+++ b/apps/dashboard/src/components/workflow-editor/steps/email/email-editor.tsx
@@ -3,7 +3,6 @@ import { getComponentByType } from '@/components/workflow-editor/steps/component
 import { EmailPreviewHeader } from '@/components/workflow-editor/steps/email/email-preview';
 import { EmailTabsSection } from '@/components/workflow-editor/steps/email/email-tabs-section';
 import { type UiSchema } from '@novu/shared';
-import { motion } from 'motion/react';
 
 const subjectKey = 'subject';
 const emailEditorKey = 'emailEditor';
@@ -14,7 +13,7 @@ export const EmailEditor = (props: EmailEditorProps) => {
   const { [emailEditorKey]: emailEditor, [subjectKey]: subject } = uiSchema?.properties ?? {};
 
   return (
-    <>
+    <div className="flex h-full flex-col">
       <EmailTabsSection>
         <EmailPreviewHeader />
       </EmailTabsSection>
@@ -23,11 +22,9 @@ export const EmailEditor = (props: EmailEditorProps) => {
       </EmailTabsSection>
       <Separator className="bg-neutral-100" />
       {/* extra padding on the left to account for the drag handle */}
-      <EmailTabsSection className="pl-14">
-        <motion.div initial={{ opacity: 0 }} animate={{ opacity: 1 }}>
-          {emailEditor && getComponentByType({ component: emailEditor.component })}
-        </motion.div>
+      <EmailTabsSection className="basis-full pl-14">
+        {emailEditor && getComponentByType({ component: emailEditor.component })}
       </EmailTabsSection>
-    </>
+    </div>
   );
 };
diff --git a/apps/dashboard/src/components/workflow-editor/steps/email/maily.tsx b/apps/dashboard/src/components/workflow-editor/steps/email/maily.tsx
index ec9291b78fc..e4bbf5b81bc 100644
--- a/apps/dashboard/src/components/workflow-editor/steps/email/maily.tsx
+++ b/apps/dashboard/src/components/workflow-editor/steps/email/maily.tsx
@@ -24,12 +24,13 @@ export const Maily = (props: MailyProps) => {
       render={({ field }) => {
         return (
           <>
-            <div className={cn('mx-auto w-full', className)} {...rest}>
+            <div className={cn('mx-auto flex h-full w-full', className)} {...rest}>
               <FormControl>
                 <Editor
                   config={{
                     hasMenuBar: false,
-                    bodyClassName: '!bg-transparent !border-none !mt-0',
+                    wrapClassName: 'h-full ',
+                    bodyClassName: '!bg-transparent h-full !border-none !mt-0 [&>div]:h-full [&_.tiptap]:h-full',
                   }}
                   triggerSuggestionCharacter="{{"
                   variables={variables.map((v) => ({ name: v.label, required: false }))}