From 296fbe55df35965b1f5f1846ed8bccbc229a1a36 Mon Sep 17 00:00:00 2001
From: Tom Butcher <thomasbutcher15@gmail.com>
Date: Tue, 19 Aug 2025 23:58:46 +0100
Subject: [PATCH] Enhance TemplateEditor component with new features and UI
 improvements

- Added a disabled state to the info button based on global object data.
- Adjusted preview scale increment and decrement values for finer control.
- Introduced a read-only button to display the current preview scale.
- Wrapped the ObjectProperty component in a scrollable div for better visibility in the modal.
- Increased modal width for improved layout and user experience.
---
 .../Dashboard/common/TemplateEditor.jsx       | 36 ++++++++++++++-----
 1 file changed, 27 insertions(+), 9 deletions(-)

diff --git a/src/components/Dashboard/common/TemplateEditor.jsx b/src/components/Dashboard/common/TemplateEditor.jsx
index 65af46c..052f378 100644
--- a/src/components/Dashboard/common/TemplateEditor.jsx
+++ b/src/components/Dashboard/common/TemplateEditor.jsx
@@ -100,6 +100,7 @@ const TemplateEditor = ({
                     )}
                     <Button
                       icon={<InfoCircleIcon />}
+                      disabled={objectData?.global}
                       onClick={() => {
                         setTestObjectOpen(true)
                       }}
@@ -107,15 +108,24 @@ const TemplateEditor = ({
                     <Button
                       icon={<PlusIcon />}
                       onClick={() => {
-                        setPreviewScale((prev) => prev + 0.1)
+                        setPreviewScale((prev) => prev + 0.05)
                       }}
                     />
                     <Button
                       icon={<MinusIcon />}
                       onClick={() => {
-                        setPreviewScale((prev) => prev - 0.1)
+                        setPreviewScale((prev) => prev - 0.05)
                       }}
                     />
+                    <Button
+                      readOnly={true}
+                      style={{ width: '65px' }}
+                      onClick={() => {
+                        setPreviewScale(1)
+                      }}
+                    >
+                      {previewScale.toFixed(2)}x
+                    </Button>
                   </Flex>
 
                   <iframe
@@ -178,6 +188,7 @@ const TemplateEditor = ({
       <Modal
         open={testObjectOpen}
         closeIcon={null}
+        width={800}
         footer={
           <Button
             onClick={() => {
@@ -188,13 +199,20 @@ const TemplateEditor = ({
           </Button>
         }
       >
-        <ObjectProperty
-          type={'codeBlock'}
-          name='testObject'
-          language='json'
-          objectData={objectData}
-          isEditing={true}
-        />
+        <div
+          style={{
+            maxHeight: 'calc(var(--unit-100vh) - 280px)',
+            overflowY: 'scroll'
+          }}
+        >
+          <ObjectProperty
+            type={'codeBlock'}
+            name='testObject'
+            language='json'
+            objectData={objectData}
+            isEditing={true}
+          />
+        </div>
       </Modal>
     </>
   )