radio btn size fixed

src/components/FamilyAcc/FamilyPopout/AssignTaskPopout.jsx

@@ -152,7 +152,7 @@ function AssignTaskPopout({action, situation, familyDetails}) {
                               onChange={()=>handleActiveTask(item.job_uid, item)}
                               className="w-[15px] h-[15px] cursor-pointer" 
                             />
-                            <p className="text-dark-gray tracking-wide">{item?.title}</p>
+                            <p className="w-full text-dark-gray tracking-wide">{item?.title}</p>
                           </div>
                           ))
                           :

src/components/FamilyAcc/Tabs/FamilyManageTabs.jsx

@@ -14,9 +14,6 @@ import LoadingSpinner from "../../Spinners/LoadingSpinner";
 import profile from "../../../assets/images/profile-info-profile.png";
 import FamilyTasks from "./FamilyTasks";
 
-import AssignTaskPopout from '../FamilyPopout/AssignTaskPopout'
-
-
 export default function FamilyManageTabs({
   className,
   accountDetails,
@@ -53,13 +50,6 @@ export default function FamilyManageTabs({
   const tabHandler = (value) => {
     setTab(value);
   };
-
-  let [familyTaskPopout, setFamilyTaskPopout] = useState(false) // DETERMINES WHEN FAMILY ADD TASK POPOUT DISPLAYS
-
-  const familyPopUpHandler = () => { // FUNCTION TO CHANGE THE FAMILY ADD TASK POPOIUT STATE
-    setFamilyTaskPopout(prev => !prev)
-  }
-
   //   For profile uploads
   const [profileImg, setProfileImg] = useState(profile);
   // profile img
@@ -130,7 +120,7 @@ export default function FamilyManageTabs({
       className={`w-full bg-white dark:bg-dark-white overflow-y-auto rounded-2xl section-shadow min-h-[520px] max-h-[600px] ${
         className || ""
       }`}
-    > 
+    >
       <div className="relative w-full overflow-x-auto sm:rounded-lg">
         <Suspense
           fallback={
@@ -151,31 +141,21 @@ export default function FamilyManageTabs({
             </div>
             <div className="col-span-3 justify-self-end h-full w-full">
               <div className="flex flex-col w-full">
-                <div className="w-full pr-8 flex items-center gap-1">
-                  <ul className="flex gap-2 items-center border-b border-b-[#FAFAF] w-full">
-                    {tabs.map(({ name, id }) => (
-                      <li
-                        onClick={() => tabHandler(name)}
-                        className={`p-4 flex hover:text-purple transition-all ease-in-out items-center cursor-pointer overflow-hidden text-xl ${
-                          tab === name
-                            ? "text-purple border-r"
-                            : " text-thin-light-gray"
-                        }`}
-                        key={id}
-                      >
-                        <h1>{name}</h1>
-                      </li>
-                    ))}
-                  </ul>
-                  <button
-                    type="button"
-                    onClick={familyPopUpHandler}
-                    className="p-1 my-1 w-[100px] flex justify-center items-center btn-gradient text-base rounded-full text-white"
-                  >
-                    Add task
-                    {/* {accountDetails?.firstname} */}
-                  </button>
-                </div>
+                <ul className="flex-[0.1] flex gap-2 items-center border-b border-b-[#FAFAF] w-full">
+                  {tabs.map(({ name, id }) => (
+                    <li
+                      onClick={() => tabHandler(name)}
+                      className={`p-4 flex hover:text-purple transition-all ease-in-out items-center cursor-pointer overflow-hidden text-xl ${
+                        tab === name
+                          ? "text-purple border-r"
+                          : " text-thin-light-gray"
+                      }`}
+                      key={id}
+                    >
+                      <h1>{name}</h1>
+                    </li>
+                  ))}
+                </ul>
                 <div className="flex-[0.9] lg:min-h-[450px] h-full">
                   {/* Your content here */}
                   {tabs.map(({ name, id }) => {
@@ -191,6 +171,7 @@ export default function FamilyManageTabs({
                             className={className}
                             loader={details.familyTasks.loading}
                             familyData={details.familyTasks.data}
+                            familyDetails={details.familyDetails.data}
                             accountDetails={accountDetails}
                           />
                         )}
@@ -212,15 +193,6 @@ export default function FamilyManageTabs({
           </div>
         </Suspense>
       </div>
-
-      {/* FAMILY ADD TASK POPOUT */}
-      {familyTaskPopout &&
-        <AssignTaskPopout 
-          action={familyPopUpHandler}
-          situation={familyTaskPopout}
-          familyDetails={details.familyDetails.data}
-        />
-      }
     </div>
   );
 }

src/components/FamilyAcc/Tabs/FamilyTasks.jsx

@@ -8,12 +8,18 @@ import Icons from "../../Helpers/Icons";
 import { PriceFormatter } from "../../Helpers/PriceFormatter";
 import ModalCom from "../../Helpers/ModalCom";
 import Detail from "../../jobPopout/popoutcomponent/Detail";
+import AssignTaskPopout from "../FamilyPopout/AssignTaskPopout";
 
-
-export default function FamilyTasks({ familyData, className, loader, accountDetails }) {
+export default function FamilyTasks({ familyData, familyDetails, className, loader, accountDetails }) {
   let navigate = useNavigate();
   let { pathname } = useLocation();
 
+  let [familyTaskPopout, setFamilyTaskPopout] = useState(false)
+
+  const familyPopUpHandler = () => {
+    setFamilyTaskPopout(prev => !prev)
+  }
+
   const [currentPage, setCurrentPage] = useState(0);
   const indexOfFirstItem = Number(currentPage);
   const indexOfLastItem =
@@ -37,6 +43,15 @@ export default function FamilyTasks({ familyData, className, loader, accountDeta
         </div>
       ) : (
         <>
+          <div className="w-full p-2 my-2 flex justify-end items-center">
+            <button
+              type="button"
+              onClick={familyPopUpHandler}
+              className="px-1 h-11 flex justify-center items-center btn-gradient text-base rounded-full text-white"
+            >
+              Add task for {familyDetails?.firstname}
+            </button>
+          </div>
           {familyData && familyData?.result_list && (
             <div className="relative w-full overflow-x-auto sm:rounded-lg flex flex-col justify-between h-full">
               <table className="w-full text-sm text-left text-gray-500 dark:text-gray-400">
@@ -142,6 +157,13 @@ export default function FamilyTasks({ familyData, className, loader, accountDeta
           )}
         </>
       )}
+      {familyTaskPopout &&
+        <AssignTaskPopout 
+          action={familyPopUpHandler}
+          situation={familyTaskPopout}
+          familyDetails={familyDetails}
+        />
+      }
     </div>
   );
 }