fix: app column layout

app/assets/javascripts/components/NoteGroupView.tsx

@@ -40,7 +40,7 @@ export class NoteGroupView extends PureComponent<Props, State> {
 
   render() {
     return (
-      <div id="note-group-view" className="h-full app-column app-column-third">
+      <div id="editor-column" className="h-full app-column app-column-third">
         {this.state.showMultipleSelectedNotes && (
           <MultipleSelectedNotes
             application={this.application}

app/assets/javascripts/components/NoteView/NoteView.tsx

@@ -1148,19 +1148,17 @@ export class NoteView extends PureComponent<Props, State> {
             >
               {this.state.marginResizersEnabled &&
               this.editorContentRef.current ? (
-                <div className="left">
+                <PanelResizer
-                  <PanelResizer
+                  minWidth={300}
-                    minWidth={300}
+                  hoverable={true}
-                    hoverable={true}
+                  collapsable={false}
-                    collapsable={false}
+                  panel={this.editorContentRef.current}
-                    panel={this.editorContentRef.current}
+                  side={PanelSide.Left}
-                    side={PanelSide.Left}
+                  type={PanelResizeType.OffsetAndWidth}
-                    type={PanelResizeType.OffsetAndWidth}
+                  left={this.state.leftResizerOffset}
-                    left={this.state.leftResizerOffset}
+                  width={this.state.leftResizerWidth}
-                    width={this.state.leftResizerWidth}
+                  resizeFinishCallback={this.onPanelResizeFinish}
-                    resizeFinishCallback={this.onPanelResizeFinish}
+                />
-                  />
-                </div>
               ) : null}
 
               {this.state.editorComponentViewer && (

app/assets/javascripts/components/PanelResizer.tsx

@@ -71,7 +71,7 @@ export class PanelResizer extends Component<Props, State> {
     document.addEventListener('mouseup', this.onMouseUp);
     document.addEventListener('mousemove', this.onMouseMove);
     this.debouncedResizeHandler = debounce(this.handleResize, 250);
-    if (this.props.side === PanelSide.Right) {
+    if (this.props.type === PanelResizeType.OffsetAndWidth) {
       window.addEventListener('resize', this.debouncedResizeHandler);
     }
   }

app/assets/stylesheets/_columns.scss

@@ -5,16 +5,19 @@
 
 .app-column-first {
   width: 180px;
-  flex-grow: 0;
+  flex-shrink: 0.2;
 }
 
 .app-column-second {
   width: 350px;
-  flex-grow: 0;
+  flex-shrink: 0.5;
 }
 
 .app-column-third {
-  flex: 1 50%;
+  flex-grow: 1;
+  flex-shrink: 0.3;
 }
 
-.app-column {}
+.app-column {
+  overflow: hidden;
+}

app/assets/stylesheets/_editor.scss

@@ -7,7 +7,6 @@ $heading-height: 75px;
 }
 
 .section.editor {
-  flex: 1 50%;
   display: flex;
   flex-direction: column;
   overflow-y: hidden;
@@ -39,7 +38,6 @@ $heading-height: 75px;
   z-index: $z-index-editor-title-bar;
 
   height: auto;
-  overflow: visible;
 
   .title {
     font-size: var(--sn-stylekit-font-size-h1);

app/assets/stylesheets/_main.scss

@@ -132,7 +132,8 @@ $footer-height: 2rem;
   height: calc(100% - #{$footer-height});
   width: 100%;
   vertical-align: top;
-  overflow: hidden;
+  overflow-x: scroll;
+  overflow-y: hidden;
   position: relative;
 
   panel-resizer, .panel-resizer {

app/assets/stylesheets/_notes.scss

@@ -5,7 +5,6 @@
   border-left: 1px solid var(--sn-stylekit-border-color);
   border-right: 1px solid var(--sn-stylekit-border-color);
   font-size: var(--sn-stylekit-font-size-h2);
-  overflow: visible;
   user-select: none;
 
   -moz-user-select: none;