From 3185b2092ab47702d087432b3fe1d3d79e57d2dd Mon Sep 17 00:00:00 2001
From: Vincent Chan <okcdz@diverse.space>
Date: Wed, 6 Dec 2023 15:48:17 +0800
Subject: [PATCH] chore: adjust css for mobile

---
 packages/blocky-core/css/blocky-core.css      | 23 +++++++++++++++++++
 packages/blocky-core/src/view/editor.ts       | 16 -------------
 packages/blocky-core/src/view/renderer.ts     | 12 +---------
 .../blocky-example/app/loro/loroBlock.tsx     |  2 +-
 .../app/loro/loroExample.module.scss          |  1 +
 5 files changed, 26 insertions(+), 28 deletions(-)

diff --git a/packages/blocky-core/css/blocky-core.css b/packages/blocky-core/css/blocky-core.css
index 36d524d..1b6e2e5 100644
--- a/packages/blocky-core/css/blocky-core.css
+++ b/packages/blocky-core/css/blocky-core.css
@@ -54,6 +54,8 @@
   font-size: 32px;
   font-weight: 700;
   color: var(--blocky-primary-color);
+  padding-left: 56px;
+  padding-right: 56px;
 }
 
 .blocky-editor-title-container:empty::before {
@@ -230,3 +232,24 @@
   left: 0px;
   height: 2px;
 }
+
+.blocky-editor-blocks-container {
+  padding: 12px 56px 72px;
+}
+
+
+@media only screen and (max-width: 600px) {
+
+.blocky-editor-title-container {
+  font-size: 32px;
+  font-weight: 700;
+  color: var(--blocky-primary-color);
+  padding-left: 42px;
+  padding-right: 42px;
+}
+  
+.blocky-editor-blocks-container {
+  padding: 12px 42px 72px;
+}
+
+}
diff --git a/packages/blocky-core/src/view/editor.ts b/packages/blocky-core/src/view/editor.ts
index 0896edd..6f180c9 100644
--- a/packages/blocky-core/src/view/editor.ts
+++ b/packages/blocky-core/src/view/editor.ts
@@ -93,15 +93,6 @@ enum MineType {
   Html = "text/html",
 }
 
-function makeDefaultPadding(): Padding {
-  return {
-    top: 12,
-    right: 56,
-    bottom: 72,
-    left: 56,
-  };
-}
-
 interface BlockSizeInfo {
   id: string;
   rect: DOMRect;
@@ -201,8 +192,6 @@ export class Editor {
 
   readonly collaborativeCursorManager: CollaborativeCursorManager;
 
-  readonly padding: Padding;
-
   composing = false;
   private disposables: IDisposable[] = [];
 
@@ -242,11 +231,6 @@ export class Editor {
     this.container = container;
     this.idGenerator = idGenerator ?? makeDefaultIdGenerator();
 
-    this.padding = {
-      ...makeDefaultPadding(),
-      ...padding,
-    };
-
     this.collaborativeCursorManager = new CollaborativeCursorManager(
       collaborativeCursorFactory
     );
diff --git a/packages/blocky-core/src/view/renderer.ts b/packages/blocky-core/src/view/renderer.ts
index e76cd1f..26b6ec2 100644
--- a/packages/blocky-core/src/view/renderer.ts
+++ b/packages/blocky-core/src/view/renderer.ts
@@ -171,11 +171,6 @@ export class DocRenderer {
         "div",
         `${clsPrefix}-editor-title-container ${this.blockClassName}`,
         (elem: HTMLElement) => {
-          const { padding } = this.editor;
-          const { right, left } = padding;
-          elem.style.paddingLeft = `${left}px`;
-          elem.style.paddingRight = `${right}px`;
-
           if (this.editor.controller?.options?.titleEditable === false) {
             elem.contentEditable = "false";
           }
@@ -187,12 +182,7 @@ export class DocRenderer {
       dom,
       renderCounter++,
       "div",
-      `${clsPrefix}-editor-blocks-container`,
-      (elem: HTMLElement) => {
-        const { padding } = this.editor;
-        const { top, right, bottom, left } = padding;
-        elem.style.padding = `${top}px ${right}px ${bottom}px ${left}px`;
-      }
+      `${clsPrefix}-editor-blocks-container`
     );
 
     this.renderBlocks(
diff --git a/packages/blocky-example/app/loro/loroBlock.tsx b/packages/blocky-example/app/loro/loroBlock.tsx
index 5e4d8ee..e6c260c 100644
--- a/packages/blocky-example/app/loro/loroBlock.tsx
+++ b/packages/blocky-example/app/loro/loroBlock.tsx
@@ -79,7 +79,7 @@ function LoroBlock(props: LoroBlockProps) {
           </DialogContentText>
         </DialogContent>
         <DialogActions>
-          <Button onClick={handleClose}>Canel</Button>
+          <Button onClick={handleClose}>Cancel</Button>
           <Button onClick={handleConfirm} color="error" autoFocus>
             Confirm
           </Button>
diff --git a/packages/blocky-example/app/loro/loroExample.module.scss b/packages/blocky-example/app/loro/loroExample.module.scss
index c58a1cf..42018c2 100644
--- a/packages/blocky-example/app/loro/loroExample.module.scss
+++ b/packages/blocky-example/app/loro/loroExample.module.scss
@@ -5,6 +5,7 @@
 
   :global(.blocky-editor-container) {
     flex: 1;
+    max-width: 100%;
   }
 
   :global(.blocky-documents) {