Fix middle alignment of preview design.

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;
   }