fix for ctrl-zoom of map

1 files changed, 9 insertions, 2 deletions

diff --git a/src/client/views/nodes/MapBox/MapBox.tsx b/src/client/views/nodes/MapBox/MapBox.tsx
index eb6a05a49..348e52d6c 100644
--- a/src/client/views/nodes/MapBox/MapBox.tsx
+++ b/src/client/views/nodes/MapBox/MapBox.tsx
@@ -1687,12 +1687,12 @@ export class MapBox extends ViewBoxAnnotatableComponent<ViewBoxAnnotatableProps
                     onPointerDown={async e => {
                         e.button === 0 && !e.ctrlKey && e.stopPropagation();
                     }}
-                    style={{ pointerEvents: this.pointerEvents() }}>
+                    style={{ width: `calc(100% - ${this.sidebarWidthPercent})`, pointerEvents: this.pointerEvents() }}>
                     <div style={{ mixBlendMode: 'multiply' }}>{renderAnnotations(this.transparentFilter)}</div>
                     {renderAnnotations(this.opaqueFilter)}
                     {SnappingManager.GetIsDragging() ? null : renderAnnotations()}
                     {!this.routeToAnimate &&
-                        <div className="mapBox-searchbar">
+                        <div className="mapBox-searchbar" style={{ zIndex: 1, position: 'relative', background: 'lightGray' }}>
                             <TextField 
                                 fullWidth
                                 placeholder='Enter a location'
@@ -1812,6 +1812,13 @@ export class MapBox extends ViewBoxAnnotatableComponent<ViewBoxAnnotatableProps
                             id="mapbox-map"
                             viewState={{ ...this.mapboxMapViewState, width: NumCast(this.layoutDoc._width) / scale, height: NumCast(this.layoutDoc._height) / scale }}
                             mapStyle={this.dataDoc.map_style ? StrCast(this.dataDoc.map_style) : 'mapbox://styles/mapbox/streets-v11'}
+		            style={{
+                                transformOrigin: 'center',
+                                transform: `scale(${scale < 1 ? 1 : scale})`,
+                                zIndex: '0',
+                                width: '100%',
+                                height: '100%',
+                            }}
                             initialViewState={this.isAnimating ? undefined : this.mapboxMapViewState}
                             onMove={this.onMapMove}
                             onClick={this.handleMapClick}