From 3ed92a141b11b538b7f23fd6acca94b745c51139 Mon Sep 17 00:00:00 2001
From: Tom Butcher <thomasbutcher15@gmail.com>
Date: Mon, 10 Aug 2026 03:57:37 +0100
Subject: [PATCH] Enhance TemplateEditor with error handling and popover
 support

- Updated TemplateEditor to display compile error messages with a Popover for better user interaction.
- Introduced a new button with an icon to trigger the Popover, improving the visibility of error details.
- Adjusted the styling of the Alert component for consistent padding in error messages.
---
 .../Dashboard/common/TemplateEditor.jsx       | 39 +++++++++++++++++--
 1 file changed, 35 insertions(+), 4 deletions(-)

diff --git a/src/components/Dashboard/common/TemplateEditor.jsx b/src/components/Dashboard/common/TemplateEditor.jsx
index c142ef5..1381b49 100644
--- a/src/components/Dashboard/common/TemplateEditor.jsx
+++ b/src/components/Dashboard/common/TemplateEditor.jsx
@@ -8,9 +8,10 @@ import {
   Splitter,
   Button,
   Modal,
-  Segmented
+  Segmented,
+  Popover
 } from 'antd'
-import { LoadingOutlined } from '@ant-design/icons'
+import { LoadingOutlined, CaretDownOutlined } from '@ant-design/icons'
 import ExclamationOctagonIcon from '../../Icons/ExclamationOctagonIcon.jsx'
 import CheckCircleIcon from '../../Icons/CheckCircleIcon.jsx'
 import ObjectProperty from '../common/ObjectProperty.jsx'
@@ -32,7 +33,37 @@ const TemplateEditor = ({
   //const isMobile = useMediaQuery({ maxWidth: 768 })
 
   const handlePreviewMessage = useCallback((message, isError) => {
-    setPreviewMessage(message)
+    if (isError) {
+      setPreviewMessage(
+        <Flex gap={'small'} align={'center'} justify={'space-between'}>
+          Compile error.
+          <Popover
+            content={message}
+            trigger={['hover', 'click']}
+            placement='bottomRight'
+            arrow={false}
+            overlayStyle={{ width: '560px' }}
+          >
+            <Button
+              type={'text'}
+              size={'small'}
+              icon={
+                <CaretDownOutlined
+                  style={{
+                    marginLeft: '0.5px',
+                    marginBottom: '2.5px',
+                    fontSize: '12.5px'
+                  }}
+                />
+              }
+            />
+          </Popover>
+        </Flex>
+      )
+    } else {
+      setPreviewMessage(message)
+    }
+
     setPreviewError(isError)
   }, [])
 
@@ -67,7 +98,7 @@ const TemplateEditor = ({
                   <Alert
                     message={previewMessage}
                     showIcon
-                    style={{ padding: '4px 8px' }}
+                    style={{ padding: '4px 5px 4px 8px' }}
                     icon={
                       previewError ? (
                         <ExclamationOctagonIcon />