fixed issues when webBox is wider than window width (try a very. narrow window). things would scroll horizontally and not restore.

2 files changed, 9 insertions, 6 deletions

diff --git a/src/client/views/MainView.tsx b/src/client/views/MainView.tsx
index 7b0dd081e..82261fcf0 100644
--- a/src/client/views/MainView.tsx
+++ b/src/client/views/MainView.tsx
@@ -83,7 +83,7 @@ export class MainView extends React.Component {
     propertiesWidth = () => Math.max(0, Math.min(this._panelWidth - 50, CurrentUserUtils.propertiesWidth || 0));
 
     componentDidMount() {
-        document.getElementById("root")?.addEventListener("scroll", e => document.getElementById("root")!.scrollTop = 0);
+        document.getElementById("root")?.addEventListener("scroll", e => ((ele) => ele.scrollLeft = ele.scrollTop = 0)(document.getElementById("root")!));
         new InkStrokeProperties();
         this._sidebarContent.proto = undefined;
         DocServer.setPlaygroundFields(["dataTransition", "_viewTransition", "_panX", "_panY", "_viewScale", "_viewType", "_chromeStatus"]); // can play with these fields on someone else's
@@ -590,7 +590,7 @@ export class MainView extends React.Component {
     }
 
     render() {
-        return (<div className={"mainView-container" + (this.darkScheme ? "-dark" : "")} onScroll={() => document.getElementById("root")!.scrollTop = 0} ref={this._mainViewRef}>
+        return (<div className={"mainView-container" + (this.darkScheme ? "-dark" : "")} onScroll={() => ((ele) => ele.scrollTop = ele.scrollLeft = 0)(document.getElementById("root")!)} ref={this._mainViewRef}>
             {this.inkResources}
             <DictationOverlay />
             <SharingManager />
diff --git a/src/client/views/nodes/WebBox.tsx b/src/client/views/nodes/WebBox.tsx
index 55cad3931..41622dbc9 100644
--- a/src/client/views/nodes/WebBox.tsx
+++ b/src/client/views/nodes/WebBox.tsx
@@ -107,10 +107,13 @@ export class WebBox extends ViewBoxAnnotatableComponent<FieldViewProps, WebDocum
         this._setPreviewCursor?.(e.screenX, e.screenY, false);
     }
     iframeScrolled = (e: any) => {
-        const scrollTop = e.target?.children?.[0].scrollTop;
-        const scrollLeft = e.target?.children?.[0].scrollLeft;
-        this.layoutDoc._scrollTop = this._outerRef.current!.scrollTop = scrollTop;
-        this.layoutDoc._scrollLeft = this._outerRef.current!.scrollLeft = scrollLeft;
+        if (e.target?.children) {
+            e.target.children[0].scrollLeft = 0;
+            const scrollTop = e.target.children[0].scrollTop;
+            const scrollLeft = e.target.children[0].scrollLeft;
+            this.layoutDoc._scrollTop = this._outerRef.current!.scrollTop = scrollTop;
+            this.layoutDoc._scrollLeft = this._outerRef.current!.scrollLeft = scrollLeft;
+        }
     }
     async componentDidMount() {
         const urlField = Cast(this.dataDoc[this.props.fieldKey], WebField);