From 679c3400b08081fddb9e27ce12b233cad0c881c3 Mon Sep 17 00:00:00 2001
From: Tanya Fomina <fomina.tatianaaa@yandex.ru>
Date: Fri, 9 Sep 2022 14:09:17 +0300
Subject: [PATCH] Edit mode content width fix

---
 src/frontend/js/modules/writing.js          | 5 +++++
 src/frontend/styles/components/writing.pcss | 7 +++++--
 src/frontend/styles/layout.pcss             | 6 +++++-
 3 files changed, 15 insertions(+), 3 deletions(-)

diff --git a/src/frontend/js/modules/writing.js b/src/frontend/js/modules/writing.js
index 7fab306..5608ab4 100644
--- a/src/frontend/js/modules/writing.js
+++ b/src/frontend/js/modules/writing.js
@@ -82,6 +82,11 @@ export default class Writing {
     this.nodes.parentIdSelector = moduleEl.querySelector('[name="parent"]');
     this.nodes.putAboveIdSelector = moduleEl.querySelector('[name="above"]');
     this.nodes.uriInput = moduleEl.querySelector('[name="uri-input"]');
+
+    /**
+     * Set minimum margin left for main column to prevent editor controls from overlapping sidebar
+     */
+    document.documentElement.style.setProperty('--main-col-min-margin-left', '50px');
   };
 
   /**
diff --git a/src/frontend/styles/components/writing.pcss b/src/frontend/styles/components/writing.pcss
index 16faa81..ea2dcf0 100644
--- a/src/frontend/styles/components/writing.pcss
+++ b/src/frontend/styles/components/writing.pcss
@@ -94,8 +94,11 @@
     padding: 6px 8px;
   }
 
-  .ce-block__content {
-    max-width: none;
+  @media (--desktop) {
+    .ce-block__content,
+    .ce-toolbar__content {
+      max-width: var(--layout-width-main-col);
+    }
   }
 }
 
diff --git a/src/frontend/styles/layout.pcss b/src/frontend/styles/layout.pcss
index 5ff9f4e..c790760 100644
--- a/src/frontend/styles/layout.pcss
+++ b/src/frontend/styles/layout.pcss
@@ -1,3 +1,7 @@
+:root {
+  --main-col-min-margin-left: 0px;
+}
+
 .docs {
   min-height: calc(100vh - var(--layout-height-header));
 
@@ -40,7 +44,7 @@
         calc(var(--layout-width-main-col) + var(--max-space-between-cols) + var(--layout-sidebar-width)),
         calc(100vw - var(--layout-sidebar-width))
       );
-      margin-left: max(0px, calc(50vw - var(--layout-sidebar-width) - var(--layout-width-main-col) / 2) - var(--layout-padding-horizontal));
+      margin-left: max(var(--main-col-min-margin-left), calc(50vw - var(--layout-sidebar-width) - var(--layout-width-main-col) / 2) - var(--layout-padding-horizontal));
       margin-right: auto;
       padding: 0;
     }