map points fix

src/components/map/Map.tsx

@@ -34,7 +34,9 @@ const Map = () => {
       //   }}
     >
       <TransformComponent
-        wrapperClass={`${isMobile ? "h-screen" : "h-[calc(100vh-60px)]"}`}
+        wrapperClass={`${
+          isMobile ? "h-screen" : "h-[calc(100vh-60px)]"
+        } w-screen`}
       >
         <ImageMarker
           src="images/Map.jpg"

src/components/map/Marker.tsx

@@ -18,22 +18,19 @@ const Marker = (props: MarkerComponentProps) => {
   };
 
   return (
-    <div
+    <div className="relative">
-      className={`flex gap-1 transition-all duration-300 ease-in-out  ${
-        hoveredMarker && hoveredMarker.itemNumber !== currentMarker?.itemNumber
-          ? "brightness-[.7]"
-          : ""
-      }`}
-    >
       <div
-        className={`flex items-end ${
+        className={`flex items-end absolute w-[108px] top-[22px] right-[72px] transition-all duration-300 ease-in-out ${
-          currentMarker?.isPopupLeft ? "block" : "hidden"
+          hoveredMarker &&
-        }`}
+          hoveredMarker.itemNumber !== currentMarker?.itemNumber
+            ? "brightness-[.7]"
+            : ""
+        } ${currentMarker?.isPopupLeft ? "block" : "hidden"}`}
       >
         <div className={`flex items-center py-2 `}>
           <div className={`bg-white px-2 py-1 rounded-lg `}>
             {currentMarker && (
-              <img src={currentMarker.popup} alt="1" width={72} height={36} />
+              <img src={currentMarker.popup} alt="1" width={108} height={54} />
             )}
           </div>
           <div className="relative w-[5.5px] h-2">
@@ -41,12 +38,29 @@ const Marker = (props: MarkerComponentProps) => {
           </div>
         </div>
       </div>
-      <div onMouseEnter={handleOnMouseEnter} onMouseLeave={handleOnMouseLeave}>
+      <div
-        <img src="/images/markers/1.png" alt="1" width={72} height={98} />
+        className={`flex gap-1 transition-all duration-300 ease-in-out  ${
+          hoveredMarker &&
+          hoveredMarker.itemNumber !== currentMarker?.itemNumber
+            ? "brightness-[.7]"
+            : ""
+        }`}
+      >
+        <div
+          onMouseEnter={handleOnMouseEnter}
+          onMouseLeave={handleOnMouseLeave}
+        >
+          <img src="/images/markers/1.png" alt="1" width={72} height={98} />
+        </div>
       </div>
       <div
-        className={`flex items-end ${
+        className={`flex items-end absolute w-[108px] top-[22px] left-[72px] transition-all duration-300 ease-in-out ${
           currentMarker?.isPopupLeft ? "hidden" : "block"
+        } ${
+          hoveredMarker &&
+          hoveredMarker.itemNumber !== currentMarker?.itemNumber
+            ? "brightness-[.7]"
+            : ""
         }`}
       >
         <div className={`flex items-center py-2`}>
@@ -55,7 +69,7 @@ const Marker = (props: MarkerComponentProps) => {
           </div>
           <div className={`bg-white px-2 py-1 rounded-lg`}>
             {currentMarker && (
-              <img src={currentMarker.popup} alt="1" width={72} height={36} />
+              <img src={currentMarker.popup} alt="1" width={108} height={54} />
             )}
           </div>
         </div>