Resolved reported bugs ,pop-up Size consistency and map panning

src/components/shared/map/Map.tsx

@@ -87,6 +87,7 @@ 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) {
@@ -137,21 +138,25 @@ const Map = ({
     if (!mapRef.current) return;
 
     const map = mapRef.current;
-    const currentZoom = map.getZoom();
+    setLastClickedMarker(sellerCoordinates);
 
-    // Set the view to the seller's coordinates
-    map.setView(sellerCoordinates, currentZoom, { animate: true });
-    // Get the position of the clicked marker
+    // 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 });
+
+    // Calculate offset to center the popup (move right by 2x)
     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 + 12, // Shift map right (+100 moves popup left)
+      mapSize.y / 2 - markerPoint.y - 219   // Vertical offset unchanged
+    );
 
     // Pan the map by the calculated offset
-    map.panBy(panOffset, { animate: false }); // Disable animation to make the movement instant
+    map.panBy(centerOffset, { animate: false }); // Disable animation to make the movement instant
   };
 
   useEffect(() => {

src/components/shared/map/MapMarkerPopup.tsx

@@ -1,6 +1,7 @@
 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';
@@ -10,11 +11,31 @@ 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
 
+  const [imageSize, setImageSize] = useState(110);  // Default image size
+  const [placeholderSize, setPlaceholderSize] = useState(60);  // Default placeholder size
+
+  useEffect(() => {
+    if (nameRef.current) {
+      const nameHeight = nameRef.current.offsetHeight;
+
+      // Reduce image size when name wraps
+      if (nameHeight > 22) {
+        setImageSize(70);  // Shrink actual image
+        setPlaceholderSize(50);  // Shrink placeholder image
+      } else {
+        setImageSize(105);
+        setPlaceholderSize(60);
+      }
+    }
+  }, [seller.name]);
+
   const imageUrl =
-    seller.image && seller.image.trim() !== ''
-      ? seller.image
-      : '/images/logo.svg';
+  seller.image && seller.image.trim() !== ''
+    ? seller.image
+    : process.env.NEXT_PUBLIC_IMAGE_PLACEHOLDER_URL || '/images/logo.svg'; // Placeholder fallback
 
   const translateSellerCategory = (category: string): string => {
     switch (category) {
@@ -35,7 +56,20 @@ const MapMarkerPopup = ({ seller }: { seller: any }) => {
     <div style={{ position: 'relative', zIndex: 20, padding: '10px' }}>
       {/* Seller name and type - Close with a small gap */}
       <div style={{ textAlign: 'center', marginBottom: '5px' }}>
-        <h2 style={{ fontWeight: 'bold', fontSize: '18px', marginBottom: '2px' }}>
+        <h2
+          ref={nameRef}
+          style={{
+            fontWeight: 'bold',
+            fontSize: '16px', // Slightly smaller font size
+            marginBottom: '2px',
+            lineHeight: '1.2',
+            overflow: 'hidden', // Ensure content doesn't overflow
+            textOverflow: 'ellipsis', // Adds ellipsis for overflow
+            display: '-webkit-box', // Required for line-clamp to work
+            WebkitLineClamp: 2, // Limit to 2 lines
+            WebkitBoxOrient: 'vertical', // Required for line-clamp
+          }}
+        >
           {seller.name}
         </h2>
         {seller.seller_type && (
@@ -45,15 +79,22 @@ const MapMarkerPopup = ({ seller }: { seller: any }) => {
         )}
       </div>
 
-      {/* Seller image - Close to seller type */}
-      <div style={{ textAlign: 'center', marginBottom: '5px' }}>
-        <Image
-          src={imageUrl}
-          alt="Seller Image"
-          width={150}
-          height={50}
-          style={{ borderRadius: '0px', objectFit: 'cover', display: 'block', margin: '0 auto' }}
-        />
+      {/* Seller image */}
+      <div style={{ display: 'flex', justifyContent: 'center', marginTop: '10px' }}>
+      <Image
+        src={imageUrl}
+        alt="Seller Image"
+        width={
+          imageUrl === (process.env.NEXT_PUBLIC_IMAGE_PLACEHOLDER_URL || '/images/logo.svg')
+            ? 60  // Reduced from 75 to 70
+            : 105 // Reduced from 120 to 110
+        }
+        height={
+          imageUrl === (process.env.NEXT_PUBLIC_IMAGE_PLACEHOLDER_URL || '/images/logo.svg')
+            ? 60  // Reduced from 75 to 70
+            : imageHeight * 0.9  // Slightly reduce by 10%
+        }
+      />
       </div>
 
       {/* Trust-o-meter Label - Close to image */}
@@ -63,15 +104,12 @@ const MapMarkerPopup = ({ seller }: { seller: any }) => {
 
       {/* 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}
-        />
+        <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}`} // Update to your target link
+        <Link href={`/${locale}/seller/sale-items/${seller.seller_id}`} // Include locale dynamically
           style={{ display: 'flex', justifyContent: 'center', width: '100%' }}
         >
           <Button
@@ -91,4 +129,3 @@ const MapMarkerPopup = ({ seller }: { seller: any }) => {
 };
 
 export default MapMarkerPopup;
-