diff --git a/assets/stylesheets/App.css b/assets/stylesheets/App.css
index 25e86219..8805b3cd 100644
--- a/assets/stylesheets/App.css
+++ b/assets/stylesheets/App.css
@@ -1314,6 +1314,10 @@ span.ant-skeleton-input.ant-skeleton-input-sm.text-skeleton {
   overflow: auto;
 }
 
+.cm-editor {
+  width: fit-content;
+}
+
 .cm-errorLine {
   background-color: color-mix(in srgb, var(--color-error) 15%, transparent);
 }
diff --git a/src/components/Dashboard/common/TemplateEditor.jsx b/src/components/Dashboard/common/TemplateEditor.jsx
index 0d90ffd4..b0a5719a 100644
--- a/src/components/Dashboard/common/TemplateEditor.jsx
+++ b/src/components/Dashboard/common/TemplateEditor.jsx
@@ -190,7 +190,7 @@ const TemplateEditor = ({
             <Card
               spinning={loading}
               style={style}
-              styles={{ body: { height: '100%' } }}
+              styles={{ body: { height: '100%', padding: '22px' } }}
             >
               <TemplatePreview
                 objectData={objectData?.testObject}
@@ -208,7 +208,10 @@ const TemplateEditor = ({
         {collapseState.editor == true && (
           <Splitter.Panel>
             <Spin spinning={loading} indicator={<LoadingOutlined />}>
-              <Card style={style} styles={{ body: { height: '100%' } }}>
+              <Card
+                style={style}
+                styles={{ body: { height: '100%', padding: '22px' } }}
+              >
                 <Flex vertical gap={'middle'} style={{ height: '100%' }}>
                   <Flex gap={'small'} align={'stretch'}>
                     <Alert