1 files changed, 24 insertions, 35 deletions
diff --git a/src/client/views/nodes/DocumentView.tsx b/src/client/views/nodes/DocumentView.tsx
index d756f3226..bdb97d7bb 100644
--- a/src/client/views/nodes/DocumentView.tsx
+++ b/src/client/views/nodes/DocumentView.tsx
@@ -648,11 +648,8 @@ export class DocumentViewInternal extends DocComponent<DocumentViewProps & Field
 
     rootSelected = () => this._rootSelected;
     panelHeight = () => this._props.PanelHeight() - this.headerMargin - 2 * NumCast(this.Document.borderWidth);
-    screenToLocalContent = () =>
-        this._props
-            .ScreenToLocalTransform()
-            .translate(-NumCast(this.Document.borderWidth), -this.headerMargin - NumCast(this.Document.borderWidth))
-            .scale(this.viewingAiEditor() ? (this._props.PanelHeight() || 1) / this.aiContentsHeight() : 1);
+    aiShift = () => (!this.viewingAiEditor() ? 0 : (this._props.PanelWidth() - this.aiContentsWidth()) / 2);
+    aiScale = () => (this.viewingAiEditor() ? (this._props.PanelHeight() || 1) / this.aiContentsHeight() : 1);
     onClickFunc = () => (this.disableClickScriptFunc ? undefined : this.onClickHdlr);
     setHeight = (height: number) => { !this._props.suppressSetHeight && (this.layoutDoc._height = Math.min(NumCast(this.layoutDoc._maxHeight, Number.MAX_SAFE_INTEGER), height + 2 * NumCast(this.Document.borderWidth))); } // prettier-ignore
     setContentView = action((view: ViewBoxInterface<FieldViewProps>) => (this._componentView = view));
@@ -678,7 +675,7 @@ export class DocumentViewInternal extends DocComponent<DocumentViewProps & Field
         return this._props.styleProvider?.(doc, props, property);
     };
 
-    @observable _aiWinHeight = 88;
+    @observable _aiWinHeight = 32;
 
     TagsBtnHeight = 22;
     @computed get currentScale() {
@@ -703,33 +700,21 @@ export class DocumentViewInternal extends DocComponent<DocumentViewProps & Field
     @computed get uiBtnScaling() {  return Math.max(this.maxWidgetSize / this.TagsBtnHeight, 1) * Math.min(1, this.viewScaling); } // prettier-ignore
 
     aiContentsWidth = () => (this.aiContentsHeight() * (this._props.NativeWidth?.() || 1)) / (this._props.NativeHeight?.() || 1);
-    aiContentsHeight = () => Math.max(10, this._props.PanelHeight() - this._aiWinHeight * this.uiBtnScaling);
+    aiContentsHeight = () => Math.max(10, this._props.PanelHeight() - (this._aiWinHeight + (this.tagsOverlayFunc() ? 22 : 0)) * this.uiBtnScaling);
     @computed get aiEditor() {
         return (
-            <>
-                <div
-                    className="documentView-editorView-history"
-                    ref={r => this.historyRef(this._oldAiWheel, (this._oldAiWheel = r))}
-                    style={{
-                        transform: `scale(${this.uiBtnScaling})`,
-                        height: this.aiContentsHeight() / this.uiBtnScaling,
-                        width: ((this._props.PanelWidth() - this.aiContentsWidth()) * 0.95) / this.uiBtnScaling,
-                    }}>
-                    {this._componentView?.componentAIViewHistory?.() ?? null}
-                </div>
-                <div
-                    className="documentView-editorView"
-                    style={{
-                        background: SnappingManager.userVariantColor,
-                        width: `${100 / this.uiBtnScaling}%`, //
-                        transform: `scale(${this.uiBtnScaling})`,
-                    }}
-                    ref={r => this.historyRef(this._oldHistoryWheel, (this._oldHistoryWheel = r))}>
-                    <div className="documentView-editorView-resizer" />
-                    {this._componentView?.componentAIView?.() ?? null}
-                    {this._props.DocumentView?.() ? <TagsView background={this.backgroundBoxColor} Views={[this._props.DocumentView?.()]} /> : null}
-                </div>
-            </>
+            <div
+                className="documentView-editorView"
+                style={{
+                    background: SnappingManager.userVariantColor,
+                    width: `${100 / this.uiBtnScaling}%`, //
+                    transform: `scale(${this.uiBtnScaling})`,
+                }}
+                ref={r => this.historyRef(this._oldHistoryWheel, (this._oldHistoryWheel = r))}>
+                <div className="documentView-editorView-resizer" />
+                {this._componentView?.componentAIView?.() ?? null}
+                {this._props.DocumentView?.() ? <TagsView background={this.backgroundBoxColor} Views={[this._props.DocumentView?.()]} /> : null}
+            </div>
         );
     }
     @computed get tagsOverlay() {
@@ -780,7 +765,6 @@ export class DocumentViewInternal extends DocComponent<DocumentViewProps & Field
                         PanelHeight={this.viewingAiEditor() ? this.aiContentsHeight : this.panelHeight}
                         setHeight={this.setHeight}
                         isContentActive={this.isContentActive}
-                        ScreenToLocalTransform={this.screenToLocalContent}
                         rootSelected={this.rootSelected}
                         onClickScript={this.onClickFunc}
                         setTitleFocus={this.setTitleFocus}
@@ -1291,7 +1275,7 @@ export class DocumentView extends DocComponent<DocumentViewProps>() {
         if (this.ComponentView?.screenBounds?.()) {
             return this.ComponentView.screenBounds();
         }
-        const xf = this.screenToContentsTransform().scale(this.nativeScaling).inverse();
+        const xf = this.screenToContentBoundsTransform().inverse();
         const [[left, top], [right, bottom]] = [xf.transformPoint(0, 0), xf.transformPoint(this.panelWidth, this.panelHeight)];
 
         // transition is returned so that the bounds will 'update' at the end of an animated transition.  This is needed by xAnchor in LinkBox
@@ -1498,17 +1482,22 @@ export class DocumentView extends DocComponent<DocumentViewProps>() {
     isHovering = () => this._isHovering;
     selfView = () => this;
     /**
-     * @returns Transform to the document view (in the coordinate system of whatever contains the DocumentView)
+     * @returns Transform to the document view's available panel space (in the coordinate system of whatever contains the DocumentView)
      */
     screenToViewTransform = () => this._props.ScreenToLocalTransform();
     /**
+     * @returns Transform to the document view after centering in available panel space(in the coordinate system of whatever contains the DocumentView)
+     */
+    private screenToContentBoundsTransform = () => this.screenToViewTransform().translate(-this.centeringX, -this.centeringY);
+    /**
      * @returns Transform to the coordinate system of the contents of the document view (includes native dimension scaling and centering)
      */
     screenToContentsTransform = () =>
         this._props
             .ScreenToLocalTransform()
             .translate(-this.centeringX, -this.centeringY)
-            .scale(1 / this.nativeScaling);
+            .translate(-(this._docViewInternal?.aiShift() ?? 0), 0)
+            .scale((this._docViewInternal?.aiScale() ?? 1) / this.nativeScaling);
 
     htmlOverlay = () => {
         const effect = StrCast(this._htmlOverlayEffect?.presentation_effect, StrCast(this._htmlOverlayEffect?.followLinkAnimEffect));