diff --git a/.eslintrc b/.eslintrc
index a9e87eb4bc..ed418c90b9 100644
--- a/.eslintrc
+++ b/.eslintrc
@@ -7,8 +7,8 @@
             "files": ["*.ts"],
             "parser": "@typescript-eslint/parser",
             "rules": {
-                "no-unused-vars": "off"
-            }
+                "no-unused-vars": "off",
+            },
         },
         {
             "files": ["*.d.ts"],
@@ -16,21 +16,21 @@
             "rules": {
                 "no-unused-vars": "off",
                 "no-var": "off",
-                "no-useless-constructor": "off"
-            }
-        }
+                "no-useless-constructor": "off",
+            },
+        },
     ],
     "env": {
         "es6": true,
         "browser": true,
-        "jquery": true
+        "jquery": true,
     },
     "parserOptions": {
         "ecmaVersion": 2020,
         "sourceType": "module",
         "ecmaFeatures": {
-            "jsx": true
-        }
+            "jsx": true,
+        },
     },
     "rules": {
         "prefer-const": "warn",
@@ -50,10 +50,10 @@
         "space-before-function-paren": [
             "warn",
             {
-                "anonymous": "never",
+                "anonymous": "always",
                 "named": "never",
-                "asyncArrow": "always"
-            }
+                "asyncArrow": "always",
+            },
         ],
         "prefer-arrow-callback": "warn",
         "template-curly-spacing": "warn",
@@ -74,7 +74,7 @@
         "brace-style": "warn",
         "space-before-blocks": [
             "warn",
-            { "functions": "always", "keywords": "always", "classes": "always" }
+            { "functions": "always", "keywords": "always", "classes": "always" },
         ],
         "space-infix-ops": "warn",
         "eol-last": ["warn", "always"],
@@ -90,7 +90,7 @@
         "camelcase": ["warn", { "properties": "never" }],
         "new-cap": ["warn", { "capIsNewExceptionPattern": "^Entry." }],
         "curly": "warn",
-        "keyword-spacing": "warn"
+        "keyword-spacing": "warn",
     },
     "globals": {
         "$": true,
@@ -123,6 +123,6 @@
         "require": true,
         "module": true,
         "Symbol": true,
-        "process": true
-    }
+        "process": true,
+    },
 }
diff --git a/src/class/playground.js b/src/class/playground.js
index c46cab22d6..eb4c2a4542 100644
--- a/src/class/playground.js
+++ b/src/class/playground.js
@@ -576,6 +576,7 @@ Entry.Playground = class Playground {
             id: 'entryWorkspaceBoard',
             class: 'entryWorkspaceBoard',
         });
+        this.boardView_ = boardView;
 
         const blockMenuView = Entry.Dom('div', {
             parent: codeView,
@@ -729,9 +730,7 @@ Entry.Playground = class Playground {
      */
     generateTextView(textView) {
         const that = this;
-        const wrap = Entry.createElement('div')
-            .addClass('write_box')
-            .appendTo(textView);
+        const wrap = Entry.createElement('div').addClass('write_box').appendTo(textView);
         const writeSet = Entry.createElement('div').addClass('write_set');
         const inputArea = Entry.createElement('div').addClass('input_box');
         wrap.appendChild(writeSet);
@@ -963,7 +962,7 @@ Entry.Playground = class Playground {
         );
         textEditInput.type = 'text';
         textEditInput.placeholder = Lang.Workspace.textbox_input;
-        const textChangeApply = function() {
+        const textChangeApply = function () {
             const object = Entry.playground.object;
             const entity = object.entity;
             const selected = $('#entryTextBoxAttrFontName').data('font');
@@ -990,7 +989,7 @@ Entry.Playground = class Playground {
         textEditInput.addEventListener('focusin', () => {
             textEditInput.prevText = textEditInput.value;
         });
-        textEditInput.onblur = function() {
+        textEditInput.onblur = function () {
             if (textEditInput.value !== textEditInput.prevText) {
                 Entry.do('editText', textEditInput.value, textEditInput.prevText);
             }
@@ -1009,7 +1008,7 @@ Entry.Playground = class Playground {
         textEditArea.addEventListener('focusin', () => {
             textEditArea.prevText = textEditArea.value;
         });
-        textEditArea.onblur = function() {
+        textEditArea.onblur = function () {
             if (textEditArea.value !== textEditArea.prevText) {
                 Entry.do('editText', textEditArea.value, textEditArea.prevText);
             }
@@ -1528,6 +1527,7 @@ Entry.Playground = class Playground {
         if (!this.tabViewElements) {
             return;
         }
+
         for (const i in this.tabViewElements) {
             this.tabViewElements[i].removeClass('entryTabSelected');
         }
@@ -1538,7 +1538,14 @@ Entry.Playground = class Playground {
             Entry.playground.toggleOnVariableView();
             this.tabViewElements.code.removeClass('entryTabSelected');
             this.tabViewElements[viewType].addClass('entryTabSelected');
+            this.resizeHandle_.addClass('entryRemove');
+            this.boardView_.addClass('wideView');
+            Entry.windowResized.notify();
             return;
+        } else {
+            this.resizeHandle_.removeClass('entryRemove');
+            this.boardView_.removeClass('wideView');
+            Entry.windowResized.notify();
         }
         const views = this.view_.children;
         for (let i = 0; i < views.length; i++) {
@@ -1802,7 +1809,7 @@ Entry.Playground = class Playground {
     generatePictureElement(picture) {
         const element = Entry.createElement('li', picture.id)
             .addClass('entryPlaygroundPictureElement')
-            .bindOnClick(function() {
+            .bindOnClick(function () {
                 Entry.playground.selectPicture(this.picture);
             });
         picture.view = element;
@@ -1890,9 +1897,8 @@ Entry.Playground = class Playground {
         element.appendChild(nameView);
         Entry.createElement('div', `s_${picture.id}`)
             .addClass('entryPlaygroundPictureSize')
-            .appendTo(
-                element
-            ).textContent = `${picture.dimension.width} X ${picture.dimension.height}`;
+            .appendTo(element).textContent =
+            `${picture.dimension.width} X ${picture.dimension.height}`;
 
         const removeButton = Entry.createElement('div').addClass('entryPlayground_del');
         const { Buttons = {} } = Lang || {};
@@ -2327,18 +2333,14 @@ Entry.Playground = class Playground {
         if (isLineBreak) {
             entity.setLineBreak(true);
             $('.input_inner').height('228px');
-            $('.write_type_box a')
-                .eq(1)
-                .addClass('on');
+            $('.write_type_box a').eq(1).addClass('on');
             $('.input_box .single').hide();
             $('.input_box .multi').show();
             this._setFontFontUI();
         } else {
             entity.setLineBreak(false);
             $('.input_inner').height('40px');
-            $('.write_type_box a')
-                .eq(0)
-                .addClass('on');
+            $('.write_type_box a').eq(0).addClass('on');
             $('.input_box .multi').hide();
             $('.input_box .single').show();
         }
diff --git a/src/css/components/board.less b/src/css/components/board.less
index b262fcebf3..3cf5bddfd1 100644
--- a/src/css/components/board.less
+++ b/src/css/components/board.less
@@ -76,6 +76,10 @@
     border-width: 1px 0;
     overflow: hidden;
     .backgroundImage('entry_bg.svg');
+
+    &.wideView {
+        left: 254px;
+    }
 }
 
 .entryWorkspaceBoard.folding {