center map in scenario map

app/layout/scenarios/edit/map/component.tsx

@@ -29,6 +29,7 @@ import { useWDPACategories } from 'hooks/wdpa';
 import Loading from 'components/loading';
 import Map from 'components/map';
 // Controls
+import { MapProps } from 'components/map/component';
 import Controls from 'components/map/controls';
 import FitBoundsControl from 'components/map/controls/fit-bounds';
 import LoadingControl from 'components/map/controls/loading';
@@ -47,6 +48,8 @@ export const ScenariosEditMap = (): JSX.Element => {
   const [mapInteractive, setMapInteractive] = useState(false);
   const [mapTilesLoaded, setMapTilesLoaded] = useState(false);
 
+  const { isSidebarOpen } = useAppSelector((state) => state['/projects/[id]']);
+
   const accessToken = useAccessToken();
 
   const { query } = useRouter();
@@ -111,6 +114,14 @@ export const ScenariosEditMap = (): JSX.Element => {
 
   const { data: targetedFeaturesData } = useTargetedFeatures(sid, {});
 
+  useEffect(() => {
+    setBounds((prevState) => ({
+      ...prevState,
+      viewportOptions: { transitionDuration: 1500 },
+      options: { padding: { top: 50, right: 50, bottom: 50, left: isSidebarOpen ? 575 : 50 } },
+    }));
+  }, [isSidebarOpen]);
+
   const previewFeatureIsSelected = useMemo(() => {
     if (tab === TABS['scenario-features']) {
       return (
@@ -181,7 +192,7 @@ export const ScenariosEditMap = (): JSX.Element => {
   const minZoom = 2;
   const maxZoom = 20;
   const [viewport, setViewport] = useState({});
-  const [bounds, setBounds] = useState(null);
+  const [bounds, setBounds] = useState<MapProps['bounds']>(null);
 
   const include = useMemo(() => {
     if (tab === TABS['scenario-protected-areas']) {