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

@@ -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);
 }

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