src/assets/css/pages/system/tools/base.scss

@@ -13,6 +13,7 @@
     }
 
     >*:first-child {
+      width: 0;
       height: fit-content;
     }
 

src/assets/css/pages/system/tools/template.scss

@@ -0,0 +1,43 @@
+@use '@/assets/css/constants' as constants;
+
+[data-component=system-tools-template] {
+  .root-content {
+    padding: 20px;
+    gap: 10px;
+    height: 100%;
+    width: 100%;
+
+    .has-edited::after {
+      content: '*';
+      color: constants.$font-secondary-color;
+    }
+
+    >*:first-child {
+      width: 0;
+      height: fit-content;
+    }
+
+    > *:nth-child(2) {
+      position: sticky;
+      top: 20px;
+      height: calc(100vh - 40px);
+    }
+
+    .close-editor-btn {
+      display: flex;
+      justify-content: center;
+      align-items: center;
+      position: absolute;
+      top: 10px;
+      right: 10px;
+      background-color: constants.$font-secondary-color;
+      width: 32px;
+      height: 32px;
+      border-radius: 50%;
+      color: white;
+      opacity: 0.6;
+      box-shadow: 2px 2px 10px 0 rgba(0,0,0,0.2);
+      cursor: pointer;
+    }
+  }
+}

src/pages/System/Tools/Template.tsx

@@ -1,5 +1,5 @@
 import Icon from '@ant-design/icons'
-import '@/assets/css/pages/system/tools/base.scss'
+import '@/assets/css/pages/system/tools/template.scss'
 import {
     COLOR_PRODUCTION,
     DATABASE_DELETE_SUCCESS,
@@ -1021,7 +1021,7 @@ const Template = () => {
 
     return (
         <>
-            <FitFullscreen data-component={'system-tools-base'}>
+            <FitFullscreen data-component={'system-tools-template'}>
                 <HideScrollbar>
                     <FlexBox direction={'horizontal'} className={'root-content'}>
                         <Card>