From c629dc5612386c5a38e8224b407f6560b2832323 Mon Sep 17 00:00:00 2001
From: ngc2207 <cfngc3109@gmail.com>
Date: Sun, 5 Jan 2025 09:15:15 +0800
Subject: [PATCH] fix(playground): adjust layout of the editor component for
 improved responsiveness

---
 src/app/playground/page.tsx | 67 +++++++++++++++++++++----------------
 1 file changed, 38 insertions(+), 29 deletions(-)

diff --git a/src/app/playground/page.tsx b/src/app/playground/page.tsx
index 0d788b5..83373d3 100644
--- a/src/app/playground/page.tsx
+++ b/src/app/playground/page.tsx
@@ -172,35 +172,44 @@ export default function PlaygroundPage() {
           </Button>
         </div>
       </div>
-      <Editor
-        theme="vs-dark"
-        path={file.name}
-        defaultLanguage={file.language}
-        defaultValue={file.value}
-        options={{ automaticLayout: true }}
-        onMount={(editor) => {
-          editorRef.current = editor;
-          if (editorRef.current) {
-            const model = editorRef.current.getModel();
-            if (model) {
-              const lineCount = model.getLineCount();
-              const lastLineLength = model.getLineLength(lineCount);
-              editorRef.current.setPosition({
-                lineNumber: lineCount,
-                column: lastLineLength + 1,
-              });
-              editorRef.current.focus();
-              connectToLanguageServer(language, webSocketRef)
-                .then((languageClient) => {
-                  languageClientRef.current = languageClient;
-                })
-                .catch((error) => {
-                  console.error("Failed to connect to language server:", error);
-                });
-            }
-          }
-        }}
-      />
+      <div className="flex flex-1 mt-0 m-3 gap-x-1">
+        <div className="w-1/3"></div>
+        <div className="w-1/3">
+          <Editor
+            theme="vs-dark"
+            path={file.name}
+            defaultLanguage={file.language}
+            defaultValue={file.value}
+            options={{ automaticLayout: true }}
+            onMount={(editor) => {
+              editorRef.current = editor;
+              if (editorRef.current) {
+                const model = editorRef.current.getModel();
+                if (model) {
+                  const lineCount = model.getLineCount();
+                  const lastLineLength = model.getLineLength(lineCount);
+                  editorRef.current.setPosition({
+                    lineNumber: lineCount,
+                    column: lastLineLength + 1,
+                  });
+                  editorRef.current.focus();
+                  connectToLanguageServer(language, webSocketRef)
+                    .then((languageClient) => {
+                      languageClientRef.current = languageClient;
+                    })
+                    .catch((error) => {
+                      console.error(
+                        "Failed to connect to language server:",
+                        error
+                      );
+                    });
+                }
+              }
+            }}
+          />
+        </div>
+        <div className="w-1/3"></div>
+      </div>
     </div>
   );
 }