From 9c658289ebdf800aa10dd1cbac154696cdc916cb Mon Sep 17 00:00:00 2001
From: Jingchao Di <alswlx@gmail.com>
Date: Sun, 12 May 2024 11:41:46 +0800
Subject: [PATCH] feat: enable response web design

---
 src/pages/Home/index.less |  7 +++++--
 src/pages/Home/index.tsx  | 38 +++++++++++++++++++++-----------------
 2 files changed, 26 insertions(+), 19 deletions(-)

diff --git a/src/pages/Home/index.less b/src/pages/Home/index.less
index 4ee45a6..efa578a 100644
--- a/src/pages/Home/index.less
+++ b/src/pages/Home/index.less
@@ -7,8 +7,6 @@
   .app-content {
     flex: 1;
     height: 800px;
-    margin-right: 8px;
-    margin-left: 8px;
     border-radius: 5px;
     box-shadow: 0 12px 5px -10px rgb(0 0 0 / 10%), 0 0 4px 0 rgb(0 0 0 / 10%);
   }
@@ -30,3 +28,8 @@
     height: 100%;
   }
 }
+
+.editor {
+  width: 100%;
+  height: 800px;
+}
\ No newline at end of file
diff --git a/src/pages/Home/index.tsx b/src/pages/Home/index.tsx
index 11f43b2..c57abeb 100644
--- a/src/pages/Home/index.tsx
+++ b/src/pages/Home/index.tsx
@@ -126,24 +126,28 @@ Ref: posts.user_id > users.id // many-to-one
 
   return (
     <PageContainer ghost header={{ title: '' }}>
-      <Row>
-        <Col span={12}>
-          <MonacoEditor
-            // dbml not works
-            language="dbml"
-            theme="vs-dark"
-            value={code}
-            options={{
-              selectOnLineNumbers: true,
-              minimap: {
-                enabled: false,
-              },
-            }}
-            onChange={debouncedOnChange}
-            editorDidMount={editorDidMount}
-          />
+      <Row gutter={[8, 8]}>
+        <Col xxl={12} xl={12} lg={12} md={24} sm={24} xs={24}>
+          <div className="editor">
+            <MonacoEditor
+              width={'100%'}
+              language="dbml"
+              theme="vs-dark"
+              value={code}
+              options={{
+                selectOnLineNumbers: true,
+                minimap: {
+                  enabled: false,
+                },
+                automaticLayout: true,
+              }}
+              onChange={debouncedOnChange}
+              editorDidMount={editorDidMount}
+              // handle resize TODO
+            />
+          </div>
         </Col>
-        <Col span={12}>
+        <Col xxl={12} xl={12} lg={12} md={24} sm={24} xs={24}>
           <div className="react-shape-app">
             <div className="app-content" ref={containerRef} />
           </div>