src/componets/content/ConfigTemplate.tsx

@@ -61,6 +61,25 @@ export function ConfigTemplate(props: ConfigTemplateProps) {
     }
   }
 
+  function handleKeyDown(e: React.KeyboardEvent<HTMLTextAreaElement>) {
+    if (e.key === 'Tab') {
+      e.preventDefault();
+      const textarea = e.currentTarget;
+      const start = textarea.selectionStart;
+      const end = textarea.selectionEnd;
+      const value = textarea.value;
+      
+      // Insert 2 spaces at cursor position
+      const newValue = value.substring(0, start) + '  ' + value.substring(end);
+      handleDraftChange(newValue);
+      
+      // Move cursor after the inserted spaces
+      setTimeout(() => {
+        textarea.selectionStart = textarea.selectionEnd = start + 2;
+      }, 0);
+    }
+  }
+
   const isValidJson = jsonError === null;
 
   return (
@@ -105,6 +124,7 @@ export function ConfigTemplate(props: ConfigTemplateProps) {
             className={`form-control font-monospace ${isValidJson ? 'border-success' : 'border-danger'}`}
             value={draftContent}
             onChange={(e) => handleDraftChange(e.target.value)}
+            onKeyDown={handleKeyDown}
             rows={20}
             style={{
               fontFamily: 'monospace',

src/componets/content/Content.css

@@ -1,4 +1,4 @@
 .highlihgt-scrolled {
     overflow-x: auto;
-    max-width: 90%;
+/    max-width: 90%;
 }