fix: editor zoom device centering

Author: qradle-yndx

src/editor-v2/containers/MiddleScreen/MiddleScreen.scss

@@ -24,13 +24,23 @@ $block: '.#{$ns}middle-screen';
         width: 100%;
         height: 100%;
         margin: auto;
+        display: flex;
+        justify-content: center;
+        align-items: flex-start;
+        overflow: hidden;
     }
 
     &__canvas {
-        transform-origin: left top;
+        transform-origin: center top;
         overflow-y: scroll;
         position: relative;
         height: 100%;
+        max-width: 100%;
+    }
+
+    &__iframe {
+        display: block;
+        margin: 0 auto;
     }
 
     &__overlay {

src/editor-v2/containers/MiddleScreen/MiddleScreen.tsx

@@ -45,22 +45,23 @@ const MiddleScreen = ({className, CustomTop}: MiddleScreenProps) => {
                 </div>
             ) : null}
             <div className={b('content')}>
-                <div className={b('wrapper')} style={{width: deviceWidth}}>
+                <div className={b('wrapper')}>
                     <div
                         ref={setCanvasRef}
                         className={b('canvas', {hidden: !initialized})}
                         style={{
                             transform: `scale(${zoom}%)`,
                             height: `${(100 / zoom) * 100}%`,
-                            width: `${(100 / zoom) * 100}%`,
+                            width: deviceWidth,
+                            maxWidth: `${(100 / zoom) * 100}%`,
                         }}
                     >
                         <iframe
                             ref={(instance) => instance && setIframeElement(instance)}
                             className={b('iframe')}
                             src={url}
                             height={`${height}px`}
-                            width="100%"
+                            width={deviceWidth}
                             frameBorder="0"
                             title="Page Constructor Iframe"
                         />