Fix middle alignment of preview design.

layouts/scripts/dist/index.min.js

@@ -11554,6 +11554,10 @@ function DesignPreview({
   });
   const [opacity, setOpacity] = react.exports.useState(100);
   const keyDownHandler = react.exports.useCallback(function (e) {
+    if (!active) {
+      return;
+    }
+
     const step = e.shiftKey ? 10 : 1;
 
     if (e.key === 'ArrowUp') {
@@ -11573,13 +11577,18 @@ function DesignPreview({
         x: step
       }, true);
     }
-  }, [position]);
+  }, [position, active]);
   react.exports.useEffect(() => {
     document.addEventListener('keydown', keyDownHandler);
     return () => {
       document.removeEventListener('keydown', keyDownHandler);
     };
   }, [keyDownHandler]);
+  react.exports.useEffect(() => {
+    updatePosition({
+      x: getInitialXPosition(previewOption)
+    });
+  }, [previewOption.widthDimension]);
 
   if (!previewOption) {
     return;
@@ -11706,7 +11715,7 @@ function DataOptions(props = {}) {
       })();
     }
   }, []);
-  react.exports.useEffect(async () => {
+  react.exports.useEffect(() => {
     document.addEventListener("keydown", handleCloseSidebarEscEvent); // Unsubscribe from ESC listener.
 
     return () => {

layouts/scripts/toolbar/data-options/DataOptions.jsx

@@ -31,7 +31,7 @@ function DataOptions(props = {}) {
     }
   }, []);
 
-  useEffect(async () => {
+  useEffect(() => {
     document.addEventListener("keydown", handleCloseSidebarEscEvent);
 
     // Unsubscribe from ESC listener.
@@ -103,7 +103,7 @@ function DataOptions(props = {}) {
     dataOptions.sort((a, b) => b.widthDimension - a.widthDimension);
 
     return dataOptions.find((item) => {
-      return item.widthDimension; // first
+      return item.widthDimension // first
     });
   }
 }

layouts/scripts/toolbar/data-options/DesignPreview.jsx

@@ -11,6 +11,10 @@ export function DesignPreview({previewOption = {widthDimension: 0}}) {
 
   const keyDownHandler = useCallback(
     function (e) {
+      if (!active) {
+        return;
+      }
+
       const step = e.shiftKey ? 10 : 1;
       if (e.key === 'ArrowUp') {
         updatePosition({y: step * -1}, true)
@@ -22,7 +26,7 @@ export function DesignPreview({previewOption = {widthDimension: 0}}) {
         updatePosition({x: step}, true)
       }
 
-    }, [position]);
+    }, [position, active]);
 
   useEffect(() => {
     document.addEventListener('keydown', keyDownHandler);
@@ -32,6 +36,10 @@ export function DesignPreview({previewOption = {widthDimension: 0}}) {
     }
   }, [keyDownHandler]);
 
+  useEffect(() => {
+    updatePosition({x: getInitialXPosition(previewOption)});
+  }, [previewOption.widthDimension])
+
   if (!previewOption) {
     return;
   }