Multiple fixes (#211)

* Fix horizontal scroll

* Attempt 2

* Fix merge issue

* Do not display right column if it's empty

* Fix editor width on empty page

* A fix

* Consider padding when calculating main column margin left

* Mobile layout fix

* Fix main column width in edit mode

* Edit mode content width fix

* Add comments

Co-authored-by: Peter Savchenko <specc.dev@gmail.com>

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');
   };
 
   /**

src/frontend/styles/components/writing.pcss

@@ -91,6 +91,13 @@
   .tc-cell {
     padding: 6px 8px;
   }
+
+  @media (--desktop) {
+    .ce-block__content,
+    .ce-toolbar__content {
+      max-width: var(--layout-width-main-col);
+    }
+  }
 }
 
 .codex-editor__redactor .ce-block:first-of-type .ce-header {

src/frontend/styles/layout.pcss

@@ -1,3 +1,11 @@
+:root {
+  /**
+   * Allows to dynamically set main column minimun margin left. 
+   * Is used for adding extra space for editor controls in page edit mode (otherwise controls overlap sidebar)
+   */
+  --main-col-min-margin-left: 0px;
+}
+
 .docs {
   min-height: calc(100vh - var(--layout-height-header));
 
@@ -18,6 +26,8 @@
     &-inner {
       max-width: var(--layout-width-main-col);
       margin: 0 auto;
+      min-width: 0;
+      width: 100%;
 
       @media (--desktop) {
         margin-left: 0;
@@ -28,15 +38,19 @@
 
   &__content {
     --max-space-between-cols: 160px;
-
+    box-sizing: border-box;
     display: flex;
     justify-content: space-between;
-    max-width: calc(var(--layout-width-main-col) + var(--max-space-between-cols) + var(--layout-sidebar-width));
+    padding: 20px var(--layout-padding-horizontal);
-    margin-left: max(0px, calc(50vw - var(--layout-sidebar-width) - var(--layout-width-main-col) / 2));
-    margin-right: auto;
 
-    @media (--mobile) {
+    @media (--desktop) {
-      padding: 20px var(--layout-padding-horizontal);
+      max-width: min(
+        calc(var(--layout-width-main-col) + var(--max-space-between-cols) + var(--layout-sidebar-width)),
+        calc(100vw - var(--layout-sidebar-width))
+      );
+      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;
     }
   }
 
@@ -55,6 +69,10 @@
     @media (--desktop) {
       display: block;
     }
+
+    &:empty {
+      display: none;
+    }
   }
 
   &-sidebar {