feat: enable response web design

alswl · May 12, 2024 · 9c65828 · 9c65828
1 parent 963592e
commit 9c65828
Show file tree

Hide file tree

Showing 2 changed files with 26 additions and 19 deletions.
diff --git 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;
+}
diff --git 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>