added margin and grid gap ui for notetaking view. fixed notetakeing view dividers to be active only when they should be. same for multirow/multicol dividers.

1 files changed, 8 insertions, 3 deletions

diff --git a/src/client/views/collections/CollectionNoteTakingViewDivider.tsx b/src/client/views/collections/CollectionNoteTakingViewDivider.tsx
index a1309b11f..af822d917 100644
--- a/src/client/views/collections/CollectionNoteTakingViewDivider.tsx
+++ b/src/client/views/collections/CollectionNoteTakingViewDivider.tsx
@@ -1,4 +1,5 @@
-import { action, observable } from 'mobx';
+import { action, observable, trace } from 'mobx';
+import { observer } from 'mobx-react';
 import * as React from 'react';
 import { emptyFunction, setupMoveUpEvents } from '../../../Utils';
 import { UndoManager } from '../../util/UndoManager';
@@ -7,6 +8,7 @@ interface DividerProps {
     index: number;
     xMargin: number;
     setColumnStartXCoords: (movementX: number, colIndex: number) => void;
+    isContentActive: () => boolean | undefined;
 }
 
 /**
@@ -14,24 +16,26 @@ interface DividerProps {
  * which only appear when there is more than 1 column in CollectionNoteTakingView. Dividers
  * are two simple vertical lines that allow the user to alter the widths of CollectionNoteTakingViewColumns.
  */
+@observer
 export class CollectionNoteTakingViewDivider extends React.Component<DividerProps> {
     @observable private isHoverActive = false;
     @observable private isResizingActive = false;
 
     @action
     private registerResizing = (e: React.PointerEvent<HTMLDivElement>) => {
-        const batch = UndoManager.StartBatch('resizing');
+        let batch: UndoManager.Batch | undefined;
         setupMoveUpEvents(
             this,
             e,
             (e, down, delta) => {
+                if (!batch) batch = UndoManager.StartBatch('resizing');
                 this.props.setColumnStartXCoords(delta[0], this.props.index);
                 return false;
             },
             action(() => {
                 this.isResizingActive = false;
                 this.isHoverActive = false;
-                batch.end();
+                batch?.end();
             }),
             emptyFunction
         );
@@ -46,6 +50,7 @@ export class CollectionNoteTakingViewDivider extends React.Component<DividerProp
                     display: 'flex',
                     alignItems: 'center',
                     cursor: 'col-resize',
+                    pointerEvents: this.props.isContentActive() ? 'all' : 'none',
                 }}
                 onPointerEnter={action(() => (this.isHoverActive = true))}
                 onPointerLeave={action(() => !this.isResizingActive && (this.isHoverActive = false))}>