src/components/DailyProgressRport/TaskReportList.jsx

@@ -205,7 +205,7 @@ const TaskReportList = () => {
                     id="total_pending_task"
                     title="Total Pending Task"
                     content={
-                      <div className="text-wrap" style={{ minWidth: "200px" }}>
+                      <div className="text-wrap" style={{ maxWidth: "200px" }}>
                         This shows the total pending tasks for each activity on that date.
                       </div>
                     }

src/components/ServiceProject/ServiceProjectJob/ManageJobTicket.jsx

@@ -69,7 +69,7 @@ const ManageJobTicket = ({ Job }) => {
                   id="STATUS_CHANEG"
                   Mode="click"
                   className=""
-                  align="left"
+                  align="right"
                   content={
                     <ChangeStatus
                       statusId={data?.status?.id}
@@ -141,7 +141,7 @@ const ManageJobTicket = ({ Job }) => {
             })()}
         </div>
         {data?.projectBranch && (
-          <div className="d-flex gap-3 my-2 position-relative" ref={drawerRef} >
+          <div className="d-flex gap-3 my-2 position-relative"  ref={drawerRef} >
             <span className="text-secondary">
               <i className="bx bx-buildings"></i> Branch Name:
             </span>
@@ -149,8 +149,7 @@ const ManageJobTicket = ({ Job }) => {
             <HoverPopup
               id="BRANCH_DETAILS"
               Mode="click"
-              align="right"
+              align="auto"
-              minWidth="340px"
               boundaryRef={drawerRef}
               content={<BranchDetails branch={data?.projectBranch?.id} />}
             >

src/components/common/HoverPopup.jsx

@@ -6,6 +6,10 @@ import {
   togglePopup,
 } from "../../slices/localVariablesSlice";
 
+/**
+ * align: "auto" | "left" | "right"
+ * boundaryRef: optional ref to the drawer/container element to use as boundary
+ */
 const HoverPopup = ({
   id,
   title,
@@ -13,9 +17,7 @@ const HoverPopup = ({
   children,
   className = "",
   Mode = "hover",
-  align = "auto", // <-- dynamic placement
+  align = "auto",
-  minWidth = "250px",
-  maxWidth = "350px",
   boundaryRef = null,
 }) => {
   const dispatch = useDispatch();
@@ -24,15 +26,20 @@ const HoverPopup = ({
   const triggerRef = useRef(null);
   const popupRef = useRef(null);
 
-  const handleMouseEnter = () => Mode === "hover" && dispatch(openPopup(id));
+  const handleMouseEnter = () => {
-  const handleMouseLeave = () => Mode === "hover" && dispatch(closePopup(id));
+    if (Mode === "hover") dispatch(openPopup(id));
+  };
+  const handleMouseLeave = () => {
+    if (Mode === "hover") dispatch(closePopup(id));
+  };
   const handleClick = (e) => {
-    if (Mode !== "click") return;
+    if (Mode === "click") {
-    e.stopPropagation();
+      e.stopPropagation();
-    dispatch(togglePopup(id));
+      dispatch(togglePopup(id));
+    }
   };
 
-  // Close popup when clicking outside (click mode)
+  // Close on outside click when using click mode
   useEffect(() => {
     if (Mode !== "click" || !visible) return;
 
@@ -49,68 +56,40 @@ const HoverPopup = ({
 
     document.addEventListener("click", handler);
     return () => document.removeEventListener("click", handler);
-  }, [visible, Mode, id, dispatch]);
+  }, [Mode, visible, dispatch, id]);
 
-  // ---------- DYNAMIC POSITIONING LOGIC ----------
   useEffect(() => {
     if (!visible || !popupRef.current || !triggerRef.current) return;
 
     requestAnimationFrame(() => {
       const popup = popupRef.current;
-      const trigger = triggerRef.current;
+      const boundaryEl = (boundaryRef && boundaryRef.current) || popup.parentElement;
-
+      if (!boundaryEl) return;
-      const boundaryEl =
-        (boundaryRef && boundaryRef.current) || popup.parentElement;
 
       const boundaryRect = boundaryEl.getBoundingClientRect();
-      const triggerRect = trigger.getBoundingClientRect();
+      const triggerRect = triggerRef.current.getBoundingClientRect();
+      popup.style.left = "";
+      popup.style.right = "";
+      popup.style.transform = "";
+      popup.style.top = "";
+
       const popupRect = popup.getBoundingClientRect();
+      const triggerCenterX = triggerRect.left + triggerRect.width / 2 - boundaryRect.left;
+      let left = triggerCenterX - popupRect.width / 2;
 
-      let left;
+      // Clamp to boundaries
-
+      left = Math.max(0, Math.min(left, boundaryRect.width - popupRect.width));
-      // AUTO ALIGN (smart)
-      if (align === "auto") {
-        const center =
-          triggerRect.left +
-          triggerRect.width / 2 -
-          boundaryRect.left -
-          popupRect.width / 2;
-
-        left = Math.max(
-          0,
-          Math.min(center, boundaryRect.width - popupRect.width)
-        );
-      }
-
-      // LEFT ALIGN
-      else if (align === "left") {
-        left = triggerRect.left - boundaryRect.left;
-        if (left + popupRect.width > boundaryRect.width) {
-          left = boundaryRect.width - popupRect.width; // clamp right
-        }
-      }
-
-      // RIGHT ALIGN
-      else if (align === "right") {
-        left =
-          triggerRect.left +
-          triggerRect.width -
-          boundaryRect.left -
-          popupRect.width;
-
-        if (left < 0) left = 0; // clamp left
-      }
-
       popup.style.left = `${left}px`;
-      popup.style.top = `100%`;
     });
   }, [visible, align, boundaryRef]);
 
-  // ------------------------------------------------
-
   return (
-    <div className="d-inline-block position-relative" style={{ overflow: "visible" }}>
+    <div
+      className="d-inline-block position-relative"   // <-- ADD THIS !!
+      style={{ overflow: "visible" }}
+    >
       <div
+
         ref={triggerRef}
         onMouseEnter={handleMouseEnter}
         onMouseLeave={handleMouseLeave}
@@ -124,20 +103,22 @@ const HoverPopup = ({
         <div
           ref={popupRef}
           className={`hover-popup bg-white border rounded shadow-sm p-3 position-absolute mt-2 ${className}`}
-          style={{
+         style={{
             zIndex: 2000,
-            minWidth,
+            top: "100%",
-            maxWidth,
+            minWidth: "200px",
+            maxWidth: "300px",
             wordWrap: "break-word",
           }}
           onClick={(e) => e.stopPropagation()}
         >
           {title && <h6 className="fw-semibold mb-2">{title}</h6>}
-          {content}
+          <div>{content}</div>
         </div>
       )}
     </div>
   );
+
 };
 
 export default HoverPopup;