Merge branch 'master' into sophie-ai-images

1 files changed, 6 insertions, 9 deletions

diff --git a/src/client/views/collections/CollectionNoteTakingViewDivider.tsx b/src/client/views/collections/CollectionNoteTakingViewDivider.tsx
index af822d917..5e4bce19d 100644
--- a/src/client/views/collections/CollectionNoteTakingViewDivider.tsx
+++ b/src/client/views/collections/CollectionNoteTakingViewDivider.tsx
@@ -1,8 +1,9 @@
-import { action, observable, trace } from 'mobx';
+import { action, observable } from 'mobx';
 import { observer } from 'mobx-react';
 import * as React from 'react';
 import { emptyFunction, setupMoveUpEvents } from '../../../Utils';
 import { UndoManager } from '../../util/UndoManager';
+import { ObservableReactComponent } from '../ObservableReactComponent';
 
 interface DividerProps {
     index: number;
@@ -17,8 +18,7 @@ interface DividerProps {
  * 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;
+export class CollectionNoteTakingViewDivider extends ObservableReactComponent<DividerProps> {
     @observable private isResizingActive = false;
 
     @action
@@ -29,12 +29,11 @@ export class CollectionNoteTakingViewDivider extends React.Component<DividerProp
             e,
             (e, down, delta) => {
                 if (!batch) batch = UndoManager.StartBatch('resizing');
-                this.props.setColumnStartXCoords(delta[0], this.props.index);
+                this._props.setColumnStartXCoords(delta[0], this._props.index);
                 return false;
             },
             action(() => {
                 this.isResizingActive = false;
-                this.isHoverActive = false;
                 batch?.end();
             }),
             emptyFunction
@@ -50,10 +49,8 @@ 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))}>
+                    pointerEvents: this._props.isContentActive() ? 'all' : 'none',
+                }}>
                 <div
                     className="columnResizer-handler"
                     onPointerDown={e => this.registerResizing(e)}