1 files changed, 41 insertions, 36 deletions
diff --git a/src/client/views/nodes/WebBox.tsx b/src/client/views/nodes/WebBox.tsx
index 66e0ed21f..a94279e88 100644
--- a/src/client/views/nodes/WebBox.tsx
+++ b/src/client/views/nodes/WebBox.tsx
@@ -861,7 +861,6 @@ export class WebBox extends ViewBoxAnnotatableComponent<ViewBoxAnnotatableProps
                 key="sidebar"
                 title="Toggle Sidebar"
                 style={{
-                    display: !this.props.isContentActive() ? 'none' : undefined,
                     top: StrCast(this.layoutDoc._layout_showTitle) === 'title' ? 20 : 5,
                     backgroundColor: this.SidebarShown ? Colors.MEDIUM_BLUE : Colors.BLACK,
                 }}
@@ -950,42 +949,48 @@ export class WebBox extends ViewBoxAnnotatableComponent<ViewBoxAnnotatableProps
     @computed get SidebarShown() {
         return this._showSidebar || this.layoutDoc._layout_showSidebar ? true : false;
     }
+    renderAnnotations = (childFilters: () => string[]) => (
+        <CollectionFreeFormView
+            {...this.props}
+            setContentView={this.setInnerContent}
+            NativeWidth={returnZero}
+            NativeHeight={returnZero}
+            originTopLeft={false}
+            isAnnotationOverlayScrollable={true}
+            renderDepth={this.props.renderDepth + 1}
+            isAnnotationOverlay={true}
+            fieldKey={this.annotationKey}
+            setPreviewCursor={this.setPreviewCursor}
+            PanelWidth={this.panelWidth}
+            PanelHeight={this.panelHeight}
+            ScreenToLocalTransform={this.scrollXf}
+            NativeDimScaling={returnOne}
+            focus={this.focus}
+            childFilters={childFilters}
+            select={emptyFunction}
+            isAnyChildContentActive={returnFalse}
+            bringToFront={emptyFunction}
+            styleProvider={this.childStyleProvider}
+            whenChildContentsActiveChanged={this.whenChildContentsActiveChanged}
+            removeDocument={this.removeDocument}
+            moveDocument={this.moveDocument}
+            addDocument={this.addDocumentWrapper}
+            childPointerEvents={this.childPointerEvents}
+            pointerEvents={this.annotationPointerEvents}
+        />
+    );
 
+    @computed get renderOpaqueAnnotations() {
+        return this.renderAnnotations(this.opaqueFilter);
+    }
+    @computed get renderTransparentAnnotations() {
+        return this.renderAnnotations(this.transparentFilter);
+    }
     childPointerEvents = () => (this.props.isContentActive() ? 'all' : undefined);
     @computed get webpage() {
         const previewScale = this._previewNativeWidth ? 1 - this.sidebarWidth() / this._previewNativeWidth : 1;
         const pointerEvents = this.layoutDoc._lockedPosition ? 'none' : (this.props.pointerEvents?.() as any);
         const scale = previewScale * (this.props.NativeDimScaling?.() || 1);
-        const renderAnnotations = (childFilters: () => string[]) => (
-            <CollectionFreeFormView
-                {...this.props}
-                setContentView={this.setInnerContent}
-                NativeWidth={returnZero}
-                NativeHeight={returnZero}
-                originTopLeft={false}
-                isAnnotationOverlayScrollable={true}
-                renderDepth={this.props.renderDepth + 1}
-                isAnnotationOverlay={true}
-                fieldKey={this.annotationKey}
-                setPreviewCursor={this.setPreviewCursor}
-                PanelWidth={this.panelWidth}
-                PanelHeight={this.panelHeight}
-                ScreenToLocalTransform={this.scrollXf}
-                NativeDimScaling={returnOne}
-                focus={this.focus}
-                childFilters={childFilters}
-                select={emptyFunction}
-                isAnyChildContentActive={returnFalse}
-                bringToFront={emptyFunction}
-                styleProvider={this.childStyleProvider}
-                whenChildContentsActiveChanged={this.whenChildContentsActiveChanged}
-                removeDocument={this.removeDocument}
-                moveDocument={this.moveDocument}
-                addDocument={this.addDocumentWrapper}
-                childPointerEvents={this.childPointerEvents}
-                pointerEvents={this.annotationPointerEvents}
-            />
-        );
         return (
             <div
                 className="webBox-outerContent"
@@ -1000,8 +1005,8 @@ export class WebBox extends ViewBoxAnnotatableComponent<ViewBoxAnnotatableProps
                 onPointerDown={this.onMarqueeDown}>
                 <div className="webBox-innerContent" style={{ height: (this._webPageHasBeenRendered && this._scrollHeight) || '100%', pointerEvents }}>
                     {this.content}
-                    {<div style={{ display: DragManager.docsBeingDragged.length ? 'none' : undefined, mixBlendMode: 'multiply' }}>{renderAnnotations(this.transparentFilter)}</div>}
-                    {renderAnnotations(this.opaqueFilter)}
+                    <div style={{ display: SnappingManager.GetCanEmbed() ? 'none' : undefined, mixBlendMode: 'multiply' }}>{this.renderTransparentAnnotations}</div>
+                    {this.renderOpaqueAnnotations}
                     {this.annotationLayer}
                 </div>
             </div>
@@ -1050,7 +1055,7 @@ export class WebBox extends ViewBoxAnnotatableComponent<ViewBoxAnnotatableProps
     scrollXf = () => this.props.ScreenToLocalTransform().translate(0, NumCast(this.layoutDoc._layout_scrollTop));
     anchorMenuClick = () => this._sidebarRef.current?.anchorMenuClick;
     transparentFilter = () => [...this.props.childFilters(), Utils.IsTransparentFilter()];
-    opaqueFilter = () => [...this.props.childFilters(), Utils.noDragsDocFilter, ...(DragManager.docsBeingDragged.length ? [] : [Utils.IsOpaqueFilter()])];
+    opaqueFilter = () => [...this.props.childFilters(), Utils.noDragsDocFilter, ...(SnappingManager.GetCanEmbed() ? [] : [Utils.IsOpaqueFilter()])];
     childStyleProvider = (doc: Doc | undefined, props: Opt<DocumentViewProps>, property: string): any => {
         if (doc instanceof Doc && property === StyleProp.PointerEvents) {
             if (this.inlineTextAnnotations.includes(doc)) return 'none';
@@ -1131,8 +1136,8 @@ export class WebBox extends ViewBoxAnnotatableComponent<ViewBoxAnnotatableProps
                         removeDocument={this.removeDocument}
                     />
                 </div>
-                {this.sidebarHandle}
-                {!this.props.isContentActive() ? null : this.searchUI}
+                {!this.props.isContentActive() || SnappingManager.GetIsDragging() ? null : this.sidebarHandle}
+                {!this.props.isContentActive() || SnappingManager.GetIsDragging() ? null : this.searchUI}
             </div>
         );
     }