Revert popup size consistency changes to resolve prod issue (hotfix).

Author: swoocn

src/components/shared/map/Map.tsx

@@ -9,7 +9,6 @@ import { ISeller, ISellerWithSettings } from '@/constants/types';
 import { fetchSellers } from '@/services/sellerApi';
 
 import MapMarkerPopup from './MapMarkerPopup';
-import { CloseButton } from '../Forms/Buttons/Buttons';
 
 import { AppContext } from '../../../../context/AppContextProvider';
 import logger from '../../../../logger.config.mjs';
@@ -88,7 +87,6 @@ const Map = ({
   const [locationError, setLocationError] = useState(false);
   const [isLocationAvailable, setIsLocationAvailable] = useState(false);
   const [initialLocationSet, setInitialLocationSet] = useState(false);
-  const [lastClickedMarker, setLastClickedMarker] = useState<LatLngTuple | null>(null);
 
   useEffect(() => {
     if (searchResults.length > 0) {
@@ -134,38 +132,34 @@ const Map = ({
     logger.debug('Sellers Array:', { sellers });
   }, [sellers]);
 
-  useEffect(() => {
-    if (mapRef.current) {
-      fetchInitialCoordinates();  // Fetch sellers when map is ready
-    }
-  }, [mapRef.current]);
-
-  // Function to handle marker click and center popup
+  // Function to handle marker click
   const handleMarkerClick = (sellerCoordinates: LatLngTuple) => {
     if (!mapRef.current) return;
 
     const map = mapRef.current;
-    setLastClickedMarker(sellerCoordinates);
-
-    // Set the target zoom level
-    const targetZoom = 5; // Zoom level when clicking the marker
-
-    // Center the map to the marker position without animation
-    map.setView(sellerCoordinates, targetZoom, { animate: false });
+    const currentZoom = map.getZoom();
 
-    // Calculate offset to center the popup (move right by 2x)
+    // Set the view to the seller's coordinates
+    map.setView(sellerCoordinates, currentZoom, { animate: true });
+    // Get the position of the clicked marker
     const markerPoint = map.latLngToContainerPoint(sellerCoordinates);
+     // Get the width and height of the map container
     const mapSize = map.getSize();
+    const mapWidth = mapSize.x;
+    const mapHeight = mapSize.y;
+    // Calculate the offsets to center the marker in the map view
+    const panOffset = L.point(mapWidth / 2 - markerPoint.x, mapHeight / 2 - markerPoint.y);
 
-    const centerOffset = L.point(
-      mapSize.x / 2 - markerPoint.x - 40,   // Shift horizontal offset slightly (-40 moves right)
-      mapSize.y / 2 - markerPoint.y - 229   // Vertical offset unchanged
-    );
-
-    // Pan the map instantly to center the popup without animation
-    map.panBy(centerOffset, { animate: false });
+    // Pan the map by the calculated offset
+    map.panBy(panOffset, { animate: false }); // Disable animation to make the movement instant
   };
 
+  useEffect(() => {
+    if (mapRef.current) {
+      fetchInitialCoordinates();  // Fetch sellers when map is ready
+    }
+  }, [mapRef.current]);
+
   const saveMapState = () => {
     try{
       if (!mapRef.current) {
@@ -383,27 +377,12 @@ const Map = ({
               }}
             >
               <Popup
-                minWidth={140}
-                maxWidth={190}
+                closeButton={true}
+                minWidth={200}
+                maxWidth={250}
                 className="custom-popup"
-                offset={L.point(4, -0.5)} // Shifted offset from [0, -3] to [10, -3] to move the popup right
+                offset={L.point(0, -3)} // Ensures the popup is slightly lower than the marker
               >
-                <div
-                  style={{
-                    position: 'absolute',
-                    top: '-6px',
-                    right: '-6px',
-                    zIndex: 1000,
-                  }}
-                >
-                  <CloseButton
-                    onClick={() => {
-                      mapRef.current?.closePopup(); // Close the popup programmatically
-                    }}
-                    aria-label="Close Popup"
-                  />
-                </div>
-                {/* Popup Content */}
                 <MapMarkerPopup seller={seller} />
               </Popup>
             </Marker>

src/components/shared/map/MapMarkerPopup.tsx

@@ -1,7 +1,6 @@
 import { useTranslations, useLocale } from 'next-intl';
 import Image from 'next/image';
 import Link from 'next/link';
-import { useEffect, useRef, useState } from 'react';
 
 import TrustMeter from '@/components/shared/Review/TrustMeter';
 import { Button } from '../Forms/Buttons/Buttons';
@@ -11,17 +10,6 @@ import logger from '../../../../logger.config.mjs';
 const MapMarkerPopup = ({ seller }: { seller: any }) => {
   const t = useTranslations();
   const locale = useLocale();
-  const nameRef = useRef<HTMLHeadingElement>(null);
-  const [imageHeight, setImageHeight] = useState(100); // Default height
-
-  // Dynamically adjust the image height based on name height
-  useEffect(() => {
-    if (nameRef.current) {
-      const nameHeight = nameRef.current.offsetHeight;
-      // Reduce image height slightly if name wraps (i.e., height > 22px)
-      setImageHeight(nameHeight > 22 ? 75 : 100);
-    }
-  }, [seller.name]);
 
   const imageUrl =
     seller.image && seller.image.trim() !== ''
@@ -45,18 +33,9 @@ const MapMarkerPopup = ({ seller }: { seller: any }) => {
 
   return (
     <div style={{ position: 'relative', zIndex: 20, padding: '10px' }}>
-      {/* Seller name and type */}
+      {/* Seller name and type - Close with a small gap */}
       <div style={{ textAlign: 'center', marginBottom: '5px' }}>
-        <h2
-          ref={nameRef}
-          style={{
-            fontWeight: 'bold',
-            fontSize: '18px',
-            marginBottom: '2px',
-            lineHeight: '1.2',
-            overflowWrap: 'break-word', // Ensures long words break properly
-          }}
-        >
+        <h2 style={{ fontWeight: 'bold', fontSize: '18px', marginBottom: '2px' }}>
           {seller.name}
         </h2>
         {seller.seller_type && (
@@ -66,46 +45,33 @@ const MapMarkerPopup = ({ seller }: { seller: any }) => {
         )}
       </div>
 
-      {/* Seller image */}
+      {/* Seller image - Close to seller type */}
       <div style={{ textAlign: 'center', marginBottom: '5px' }}>
         <Image
           src={imageUrl}
           alt="Seller Image"
-          width={155}
-          height={135} // Base dimensions
-          style={{
-            objectFit: 'cover',
-            display: 'block',
-            margin: '0 auto',
-            maxHeight: `${imageHeight}px`, // Dynamic height based on name length
-            width: 'auto',
-          }}
+          width={150}
+          height={50}
+          style={{ borderRadius: '0px', objectFit: 'cover', display: 'block', margin: '0 auto' }}
         />
       </div>
 
-      {/* Trust-o-meter Label */}
+      {/* Trust-o-meter Label - Close to image */}
       <p style={{ textAlign: 'center', fontWeight: 'bold', fontSize: '14px', marginBottom: '2px' }}>
         Trust-o-meter
       </p>
 
-      {/* Trust-o-meter */}
-      <div
-        style={{
-          display: 'flex',
-          flexDirection: 'column',
-          alignItems: 'center',
-          width: '150px',
-          margin: '0 auto',
-          marginBottom: '8px',
-        }}
-      >
-        <TrustMeter ratings={seller.trust_meter_rating} />
+      {/* Trust-o-meter - Close to the Trust-o-meter label */}
+      <div style={{ display: 'flex', flexDirection: 'column', alignItems: 'center', marginBottom: '8px' }}>
+        <TrustMeter
+          ratings={seller.trust_meter_rating}
+        />
       </div>
 
       {/* Link to Buy button */}
       <div style={{ display: 'flex', justifyContent: 'center', marginTop: '5px' }}>
         <Link
-          href={`/${locale}/seller/sale-items/${seller.seller_id}`}
+          href={`/${locale}/seller/sale-items/${seller.seller_id}`} // Update to your target link
           style={{ display: 'flex', justifyContent: 'center', width: '100%' }}
         >
           <Button