1 files changed, 34 insertions, 16 deletions
diff --git a/src/client/views/nodes/DocumentView.tsx b/src/client/views/nodes/DocumentView.tsx
index d656bcf50..640d27aa1 100644
--- a/src/client/views/nodes/DocumentView.tsx
+++ b/src/client/views/nodes/DocumentView.tsx
@@ -52,7 +52,6 @@ import { FormattedTextBox } from './formattedText/FormattedTextBox';
 import { PresEffect, PresEffectDirection } from './trails/PresEnums';
 import SpringAnimation from './trails/SlideEffect';
 import { SpringType, springMappings } from './trails/SpringUtils';
-import { DrawingFillHandler } from '../smartdraw/DrawingFillHandler';
 
 export interface DocumentViewProps extends FieldViewSharedProps {
     hideDecorations?: boolean; // whether to suppress all DocumentDecorations when doc is selected
@@ -716,21 +715,21 @@ export class DocumentViewInternal extends DocComponent<FieldViewProps & Document
         return this._props.styleProvider?.(doc, props, property);
     };
 
-    rpw = () => this._props.PanelWidth() / 2;
-    rph = () => this.panelHeight() / 2;
+    @observable _aiWinHeight = 100;
+    rpw = () => this._props.PanelWidth() - this._aiWinHeight;
+    rph = () => this.panelHeight() - this._aiWinHeight;
     @computed get viewBoxContents() {
         TraceMobx();
         const isInk = this.layoutDoc._layout_isSvg && !this._props.LayoutTemplateString;
         const noBackground = this.Document.isGroup && !this._componentView?.isUnstyledView?.() && (!this.layoutDoc.backgroundColor || this.layoutDoc.backgroundColor === 'transparent');
         return (
-            <div>
+            <>
                 <div
                     className="documentView-contentsView"
                     style={{
                         pointerEvents: (isInk || noBackground ? 'none' : this.contentPointerEvents()) ?? (this._mounted ? 'all' : 'none'),
                         width: this._showAIEditor ? this.rpw() : undefined,
                         height: this._showAIEditor ? this.rph() : this.headerMargin ? `calc(100% - ${this.headerMargin}px)` : undefined,
-                        justifySelf: this._showAIEditor ? 'center' : undefined,
                     }}>
                     <DocumentContentsView
                         {...this._props}
@@ -749,20 +748,39 @@ export class DocumentViewInternal extends DocComponent<FieldViewProps & Document
                         hideClickBehaviors={BoolCast(this.Document.hideClickBehaviors)}
                     />
                 </div>
-                {this._showAIEditor && (
-                    <div className="documentView-editorView-history" style={{ height: this.rph(), width: (this._props.PanelWidth() - this.rpw()) / 2 }}>
-                        {this._componentView?.componentAIViewHistory?.() ?? null}
-                    </div>
-                )}
-                {this._showAIEditor && (
-                    <div className="documentView-editorView" style={{ height: this.panelHeight() - this.rph() }}>
-                        <div className="documentView-editorView-resizer" />
-                        {this._componentView?.componentAIView?.() ?? null}
-                    </div>
+                {!this._showAIEditor ? null : (
+                    <>
+                        <div
+                            className="documentView-editorView-history"
+                            ref={r => {
+                                this.historyRef(this._oldAiWheel, (this._oldAiWheel = r));
+                            }}
+                            style={{ height: this.rph(), width: (this._props.PanelWidth() - this.rpw()) * 0.95 }}>
+                            {this._componentView?.componentAIViewHistory?.() ?? null}
+                        </div>
+                        <div
+                            className="documentView-editorView"
+                            ref={r => {
+                                this.historyRef(this._oldHistoryWheel, (this._oldHistoryWheel = r));
+                            }}>
+                            <div className="documentView-editorView-resizer" />
+                            {this._componentView?.componentAIView?.() ?? null}
+                        </div>
+                    </>
                 )}
-            </div>
+            </>
         );
     }
+    _oldHistoryWheel: HTMLDivElement | null = null;
+    _oldAiWheel: HTMLDivElement | null = null;
+    onPassiveWheel = (e: WheelEvent) => {
+        e.stopPropagation();
+    };
+
+    protected historyRef = (lastEle: HTMLDivElement | null, ele: HTMLDivElement | null) => {
+        lastEle?.removeEventListener('wheel', this.onPassiveWheel);
+        ele?.addEventListener('wheel', this.onPassiveWheel, { passive: false });
+    };
 
     captionStyleProvider = (doc: Opt<Doc>, props: Opt<FieldViewProps>, property: string) => this._props?.styleProvider?.(doc, props, property + ':caption');
     fieldsDropdown = (placeholder: string) => (