fixed responsiveness issues for the layout

src/components/FamilyAcc/FamilyManageTabs.jsx

@@ -27,11 +27,13 @@ export default function FamilyManageTabs({
   listReload,
   loader,
 }) {
+  // Initial state for family details
   const initialDetailState = {
     loading: false,
     data: null,
   };
 
+  // State for family details, tasks, waitlist, and pending
   const [details, setDetails] = useState({
     familyDetails: { ...initialDetailState },
     familyTasks: { ...initialDetailState },
@@ -39,6 +41,7 @@ export default function FamilyManageTabs({
     familyPending: { ...initialDetailState },
   });
 
+  // Function to reset family details, tasks, waitlist, and pending
   const resetDetails = () => {
     setDetails({
       familyDetails: { ...initialDetailState },
@@ -48,23 +51,38 @@ export default function FamilyManageTabs({
     });
   };
 
+  // State for family task data
   const [familyTask, setFamilyTask] = useState({ loading: false, data: [] });
-  const [activeTask, setActiveTask] = useState({ id: 0, data: {} }); // HOLDS SELECTED TASK
 
+  // State for active task
+  const [activeTask, setActiveTask] = useState({ id: 0, data: {} });
+
+  // State for error messages
   const [errMsg, setErrMsg] = useState("");
+
+  // State for family task popout
   const [familyTaskPopout, setFamilyTaskPopout] = useState(false);
+
+  // State for profile image
   const [profileImg, setProfileImg] = useState(profile);
+
+  // Ref for profile image input
   const profileImgInput = useRef(null);
+
+  // Create an instance of the usersService class
   const apiCall = useMemo(() => new usersService(), []);
 
+  // Function to handle toggling the family task popout
   const familyPopUpHandler = () => {
     setFamilyTaskPopout((prev) => !prev);
   };
 
+  // Function to trigger a click on the hidden profile image input
   const browseProfileImg = () => {
     profileImgInput.current.click();
   };
 
+  // Function to handle changes in the profile image input
   const profileImgChangeHandler = (e) => {
     if (e.target.value !== "") {
       const imgReader = new FileReader();
@@ -75,24 +93,30 @@ export default function FamilyManageTabs({
     }
   };
 
+  // Ref for the account section
   const accountRef = useRef();
 
+  // React-to-Print hook for handling printing
   const useHandlePrint = useReactToPrint({
     content: () => accountRef.current,
   });
 
+  // Array of tab names
   const tabs = [
     { id: 1, name: "Tasks" },
     { id: 2, name: "Waiting" },
     { id: 3, name: "Pending" },
   ];
 
+  // State for the currently selected tab
   const [tab, setTab] = useState(tabs[0].name);
 
+  // Function to handle tab changes
   const tabHandler = (value) => {
     setTab(value);
   };
 
+  // Object that maps tab names to their corresponding components
   const tabComponents = {
     Tasks: (
       <FamilyTasks
@@ -127,6 +151,7 @@ export default function FamilyManageTabs({
     Profile: <FamilyProfile />,
   };
 
+  // Default tab component
   const defaultTabComponent = (
     <FamilyTasks
       className={className}
@@ -136,8 +161,10 @@ export default function FamilyManageTabs({
     />
   );
 
+  // Selected tab component based on the current 'tab'
   const selectedTabComponent = tabComponents[tab] || defaultTabComponent;
 
+  // Effect to manage family details and related data
   useEffect(() => {
     const manageFamily = async () => {
       try {
@@ -166,7 +193,7 @@ export default function FamilyManageTabs({
         const familyWaitData = familyWaitRes.data;
         const familyPendingData = familyPending.data;
 
-        // In order to check errors
+        // Function to check for errors in data
         const checkDataError = (data) => data?.internal_return < 0;
 
         if (
@@ -191,9 +218,11 @@ export default function FamilyManageTabs({
       }
     };
 
+    // Invoke the manageFamily function when the component mounts
     manageFamily();
   }, []);
 
+  // Effect to manage family tasks
   useEffect(() => {
     let checkFamilyTask = true;
     const reqData = {
@@ -222,6 +251,7 @@ export default function FamilyManageTabs({
         });
     }
 
+    // Cleanup function to prevent memory leaks
     return () => {
       checkFamilyTask = false;
     };