feat: add rfc pr changes

src/components/FunctionalArea/Modal/OverviewImagesModal/OverviewImagesModal.component.tsx

 /* eslint-disable @next/next/no-img-element */
 import * as React from 'react';
-import { useCallback, useState } from 'react';
+import { useCallback, useLayoutEffect, useState } from 'react';
 import { useOverviewImage } from './utils/useOverviewImage';
 
 export const OverviewImagesModal: React.FC = () => {
   const [containerRect, setContainerRect] = useState<DOMRect>();
   const { imageUrl, size, linkConfigs } = useOverviewImage({ containerRect });
   const { width, height } = size;
+  const [containerNode, setContainerNode] = useState<HTMLDivElement | null>(null);
 
-  const handleRect = useCallback((node: HTMLDivElement | null) => {
-    if (!node) {
-      return;
+  const handleContainerRef = useCallback((node: HTMLDivElement | null) => {
+    if (node !== null) {
+      setContainerRect(node.getBoundingClientRect());
+      setContainerNode(node);
     }
-
-    setContainerRect(node.getBoundingClientRect());
   }, []);
 
+  useLayoutEffect(() => {
+    const updateContainerSize = (): void => {
+      if (containerNode !== null) {
+        setContainerRect(containerNode.getBoundingClientRect());
+      }
+    };
+
+    window.addEventListener('resize', updateContainerSize);
+    return () => window.removeEventListener('resize', updateContainerSize);
+  }, [containerNode]);
+
   if (!imageUrl) {
     return null;
   }
@@ -24,7 +35,7 @@ export const OverviewImagesModal: React.FC = () => {
     <div
       data-testid="overview-images-modal"
       className="flex h-full w-full items-center justify-center bg-white"
-      ref={handleRect}
+      ref={handleContainerRef}
     >
       <div className="relative" style={{ width, height }}>
         <img alt="overview" className="block h-full w-full" src={imageUrl} />

src/redux/modal/modal.selector.ts

@@ -6,7 +6,7 @@ export const modalSelector = createSelector(rootSelector, state => state.modal);
 
 export const isModalOpenSelector = createSelector(modalSelector, state => state.isOpen);
 
-export const currentOverviewImageId = createSelector(
+export const currentOverviewImageIdSelector = createSelector(
   modalSelector,
   modal => modal?.overviewImagesState.imageId || OVERVIEW_IMAGE_ID_DEFAULT,
 );

src/redux/project/project.selectors.ts

 import { OverviewImageView } from '@/types/models';
 import { createSelector } from '@reduxjs/toolkit';
 import { OVERVIEW_IMAGE_ID_DEFAULT } from '../map/map.constants';
-import { currentOverviewImageId } from '../modal/modal.selector';
+import { currentOverviewImageIdSelector } from '../modal/modal.selector';
 import { rootSelector } from '../root/root.selectors';
 
 export const projectSelector = createSelector(rootSelector, state => state.project);
@@ -15,7 +15,7 @@ export const projectDefaultOverviewImageIdSelector = createSelector(
 
 export const currentOverviewImageSelector = createSelector(
   projectDataSelector,
-  currentOverviewImageId,
+  currentOverviewImageIdSelector,
   (projectData, imageId): OverviewImageView | undefined =>
     (projectData?.overviewImageViews || []).find(
       overviewImage => overviewImage.idObject === imageId,