From d0d500de407d0bdbc99ea3160ac1695e9006587b Mon Sep 17 00:00:00 2001
From: Tom Butcher <thomasbutcher15@gmail.com>
Date: Thu, 20 Aug 2026 12:37:44 +0100
Subject: [PATCH] Enhance TemplateEditor layout and styling

- Updated TemplateEditor component to include padding in Card styles for improved layout.
- Added a new CSS class for .cm-editor to set its width to fit-content, enhancing the editor's appearance.
- Ensured consistent styling adjustments to improve user experience in the editor interface.
---
 assets/stylesheets/App.css                         | 4 ++++
 src/components/Dashboard/common/TemplateEditor.jsx | 7 +++++--
 2 files changed, 9 insertions(+), 2 deletions(-)

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