From 07d1863ac84289ad63c9451a152edbdd5102f89a Mon Sep 17 00:00:00 2001
From: ttpl-rt-217 <shreyas_s@techjoomla.com>
Date: Tue, 1 Oct 2024 11:29:22 +0530
Subject: [PATCH 1/3] Task #PS-1656 : UI improvements

---
 src/components/CohortSelectionSection.tsx | 6 +++---
 1 file changed, 3 insertions(+), 3 deletions(-)

diff --git a/src/components/CohortSelectionSection.tsx b/src/components/CohortSelectionSection.tsx
index c8b41a9f..877c4fa1 100644
--- a/src/components/CohortSelectionSection.tsx
+++ b/src/components/CohortSelectionSection.tsx
@@ -419,7 +419,7 @@ const CohortSelectionSection: React.FC<CohortSelectionSectionProps> = ({
                               width: '100%',
                               marginBottom: '0rem',
                               '@media (max-width: 900px)': {
-                                width: isAttendanceOverview ? '100%' : '50%',
+                                width: isAttendanceOverview ? '100%' : '62%',
                               },
                             }}
                             MenuProps={{
@@ -517,12 +517,12 @@ const CohortSelectionSection: React.FC<CohortSelectionSectionProps> = ({
                                     '@media (max-width: 902px)': {
                                       width: isAttendanceOverview
                                         ? '100%'
-                                        : '60%',
+                                        : '62%',
                                     },
                                     '@media (max-width: 702px)': {
                                       width: isAttendanceOverview
                                         ? '100%'
-                                        : '50%',
+                                        : '65%',
                                     },
                                   }
                             }

From 6dcee8a8291d6e165737be687b85fffba3fe458a Mon Sep 17 00:00:00 2001
From: ttpl-rt-217 <shreyas_s@techjoomla.com>
Date: Thu, 3 Oct 2024 11:30:31 +0530
Subject: [PATCH 2/3] Task #PS-1656 : UI improvements

---
 src/pages/centers/[cohortId]/index.tsx | 8 ++++----
 1 file changed, 4 insertions(+), 4 deletions(-)

diff --git a/src/pages/centers/[cohortId]/index.tsx b/src/pages/centers/[cohortId]/index.tsx
index d2270c72..2fa0ab72 100644
--- a/src/pages/centers/[cohortId]/index.tsx
+++ b/src/pages/centers/[cohortId]/index.tsx
@@ -619,15 +619,15 @@ const CohortPage = () => {
                     type: 'fraction',
                   }}
                   breakpoints={{
-                    500: {
+                    600: {
                       slidesPerView: 1,
                       spaceBetween: 20,
                     },
-                    740: {
+                    900: {
                       slidesPerView: 2,
                       spaceBetween: 20,
                     },
-                    900: {
+                    1200: {
                       slidesPerView: 3,
                       spaceBetween: 30,
                     },
@@ -725,7 +725,7 @@ const CohortPage = () => {
           <Box mt={3} px="18px">
             <Grid container spacing={3}>
               {sessions?.map((item) => (
-                <Grid item xs={12} sm={6} md={4} key={item.id}>
+                <Grid item xs={12} sm={12} md={6} lg={4} mb={2} key={item.id}>
                   <SessionCard
                     data={item}
                     isEventDeleted={handleEventDeleted}

From c680bf178a900f52926d0965bc0dc177313aa7d2 Mon Sep 17 00:00:00 2001
From: ttpl-rt-217 <shreyas_s@techjoomla.com>
Date: Thu, 3 Oct 2024 23:43:29 +0530
Subject: [PATCH 3/3] Task #PS-2128: Handle Large text translations like
 Malayalam language

---
 public/locales/en/common.json                 |  3 +-
 src/components/FacilitatorDrawer.tsx          |  6 ++--
 src/components/LearnerModal.tsx               |  3 ++
 .../board-enrollment/student-detail/index.tsx |  8 +++--
 src/pages/centers/[cohortId]/index.tsx        |  4 +--
 src/pages/centers/index.tsx                   | 32 +++++++++----------
 src/pages/course-planner-detail.tsx           |  4 +--
 src/pages/learner/[userId].tsx                | 10 +++---
 src/pages/user-profile/[userId].tsx           |  7 ++--
 9 files changed, 44 insertions(+), 33 deletions(-)

diff --git a/public/locales/en/common.json b/public/locales/en/common.json
index 98112d4a..ece26602 100644
--- a/public/locales/en/common.json
+++ b/public/locales/en/common.json
@@ -578,6 +578,7 @@
     "SAVE_AND_NEXT": "Save and Next",
     "TO_SAVE_YOUR_PROGRESS": "“Save & Next” to save your progress. You can come back and change it anytime.",
     "MANDATORY": "Mandatory for {{FeesStepBoards}} only. For other Boards, this step is automatically marked completed. Please click on Save to submit the data.",
-    "COMPLETED": "Completed"
+    "COMPLETED": "Completed",
+    "MARK_AS_COMPLETE":"Mark as Complete"
   }
 }
diff --git a/src/components/FacilitatorDrawer.tsx b/src/components/FacilitatorDrawer.tsx
index df7162d7..7cbc961c 100644
--- a/src/components/FacilitatorDrawer.tsx
+++ b/src/components/FacilitatorDrawer.tsx
@@ -91,7 +91,8 @@ const FacilitatorDrawer: React.FC<FacilitatorDrawerProps> = ({
                   sx={{
                     border: `1px solid ${theme?.palette?.warning['A400']}`,
                     color: theme?.palette?.warning['A400'],
-                    width: '121px',
+                    width: 'fit-content',
+                    px: '20px',
                   }}
                   variant="outlined"
                 >
@@ -105,7 +106,8 @@ const FacilitatorDrawer: React.FC<FacilitatorDrawerProps> = ({
                   variant="contained"
                   color="primary"
                   onClick={onPrimaryClick}
-                  sx={{ width: '199px' }}
+                  sx={{ width: 'fit-content', px: '20px' }}
+                  className="one-line-text"
                 >
                   {primary}
                 </Button>
diff --git a/src/components/LearnerModal.tsx b/src/components/LearnerModal.tsx
index 3ce331ef..2dd71092 100644
--- a/src/components/LearnerModal.tsx
+++ b/src/components/LearnerModal.tsx
@@ -211,6 +211,7 @@ const LearnerModal = ({
             <Box sx={buttonContainerStyles}>
               <Button
                 sx={closeButtonStyles(theme)}
+                style={{ width: 'fit-content', padding: '5px 16px' }}
                 onClick={onClose}
                 variant="outlined"
               >
@@ -218,8 +219,10 @@ const LearnerModal = ({
               </Button>
               <Button
                 sx={profileButtonStyles(theme)}
+                style={{ width: 'fit-content', padding: '5px 16px' }}
                 variant="contained"
                 onClick={handleLearnerFullProfile}
+                fullWidth
               >
                 {t('PROFILE.VIEW_FULL_PROFILE')}
               </Button>
diff --git a/src/pages/board-enrollment/student-detail/index.tsx b/src/pages/board-enrollment/student-detail/index.tsx
index a6e09958..60bf738c 100644
--- a/src/pages/board-enrollment/student-detail/index.tsx
+++ b/src/pages/board-enrollment/student-detail/index.tsx
@@ -393,8 +393,10 @@ const BoardEnrollmentDetail = () => {
                   },
                   border: `1px solid ${theme.palette.error.contrastText}`,
                   mt: '15px',
-                  width: '144px',
+                  width: 'fit-content',
+                  px: '20px',
                 }}
+                className="one-line-text"
                 variant="outlined"
                 onClick={handleBack}
                 disabled={activeStep === 0}
@@ -403,12 +405,14 @@ const BoardEnrollmentDetail = () => {
               </Button>
               <Button
                 sx={{
-                  width: '144px',
                   height: '40px',
                   fontSize: '14px',
                   fontWeight: '500',
                   mt: '15px',
+                  width: 'fit-content',
+                  px: '20px',
                 }}
+                className="one-line-text"
                 variant="contained"
                 color="primary"
                 onClick={handleNext}
diff --git a/src/pages/centers/[cohortId]/index.tsx b/src/pages/centers/[cohortId]/index.tsx
index 2fa0ab72..f4ea8e27 100644
--- a/src/pages/centers/[cohortId]/index.tsx
+++ b/src/pages/centers/[cohortId]/index.tsx
@@ -539,7 +539,7 @@ const CohortPage = () => {
                 border: `1px solid ${theme.palette.error.contrastText}`,
                 borderRadius: '100px',
                 height: '40px',
-                width: '163px',
+                px: '16px',
                 color: theme.palette.error.contrastText,
               }}
               onClick={handleOpen}
@@ -769,7 +769,7 @@ const CohortPage = () => {
                   border: '1px solid #1E1B16',
                   borderRadius: '100px',
                   height: '40px',
-                  width: '126px',
+                  px: '16px',
                   color: theme.palette.error.contrastText,
                 }}
                 className="text-1E"
diff --git a/src/pages/centers/index.tsx b/src/pages/centers/index.tsx
index e3774f7d..fd098229 100644
--- a/src/pages/centers/index.tsx
+++ b/src/pages/centers/index.tsx
@@ -69,34 +69,32 @@ const CentersPage = () => {
     if (router.isReady) {
       const queryParamValue = router.query.tab ? Number(router.query.tab) : 1;
 
-      if ([1,2].includes(queryParamValue))
-        setValue(queryParamValue);
-      else
-        setValue(1);
+      if ([1, 2].includes(queryParamValue)) setValue(queryParamValue);
+      else setValue(1);
     }
   }, [router.isReady, router.query.tab]);
 
   useEffect(() => {
     // Merge existing query params with new ones
     if (router.isReady) {
-    const updatedQuery = { ...router.query, tab: value };
+      const updatedQuery = { ...router.query, tab: value };
 
-    // Update the URL without reloading the page
-    router.push(
-      {
-        pathname: router.pathname,
-        query: updatedQuery,
-      },
-      undefined,
-      { shallow: true }
-    );
-  }
+      // Update the URL without reloading the page
+      router.push(
+        {
+          pathname: router.pathname,
+          query: updatedQuery,
+        },
+        undefined,
+        { shallow: true }
+      );
+    }
   }, [value]);
 
   useEffect(() => {
     if (typeof window !== 'undefined' && window.localStorage) {
       const role = localStorage.getItem('role');
-      setType("");
+      setType('');
       if (role === Role.TEAM_LEADER) {
         setIsTeamLeader(true);
       } else {
@@ -420,7 +418,7 @@ const CentersPage = () => {
                         border: '1px solid #1E1B16',
                         borderRadius: '100px',
                         height: '40px',
-                        width: '9rem',
+                        px: '20px',
                         color: theme.palette.error.contrastText,
                       }}
                       className="text-1E"
diff --git a/src/pages/course-planner-detail.tsx b/src/pages/course-planner-detail.tsx
index 1652170c..601137d4 100644
--- a/src/pages/course-planner-detail.tsx
+++ b/src/pages/course-planner-detail.tsx
@@ -681,8 +681,8 @@ const CoursePlannerDetail = () => {
         )}
       </div>
       <FacilitatorDrawer
-        secondary={'Cancel'}
-        primary={`Mark as Complete (${selectedCount})`}
+        secondary={t('COMMON.CANCEL')}
+        primary={`${t('BOARD_ENROLMENT.MARK_AS_COMPLETE')} (${selectedCount})`}
         toggleDrawer={toggleDrawer}
         drawerState={drawerState}
         onPrimaryClick={() => {
diff --git a/src/pages/learner/[userId].tsx b/src/pages/learner/[userId].tsx
index 81e4466a..aa23637a 100644
--- a/src/pages/learner/[userId].tsx
+++ b/src/pages/learner/[userId].tsx
@@ -262,7 +262,10 @@ const LearnerProfile: React.FC<LearnerProfileProp> = ({
     };
 
     // Conditionally add fromDate and toDate to filters if selectedValue doesn't match the specific condition
-    if (selectedValue !== t('DASHBOARD.AS_OF_TODAY_DATE', { day_date: currentDayMonth })) {
+    if (
+      selectedValue !==
+      t('DASHBOARD.AS_OF_TODAY_DATE', { day_date: currentDayMonth })
+    ) {
       filters.fromDate = fromDates;
       filters.toDate = toDates;
     }
@@ -863,11 +866,10 @@ const LearnerProfile: React.FC<LearnerProfileProp> = ({
         // }}
         >
           <Button
-            className="min-width-md-20"
             sx={{
               fontSize: '14px',
               lineHeight: '20px',
-              minWidth: '100%',
+              minWidth: 'fit-content',
               padding: '10px 24px 10px 16px',
               gap: '8px',
               borderRadius: '100px',
@@ -1013,4 +1015,4 @@ export const getStaticPaths: GetStaticPaths<{ slug: string }> = async () => {
 export default withAccessControl(
   'accessLearnerProfile',
   accessControl
-)(LearnerProfile);
\ No newline at end of file
+)(LearnerProfile);
diff --git a/src/pages/user-profile/[userId].tsx b/src/pages/user-profile/[userId].tsx
index afa71967..5539a16f 100644
--- a/src/pages/user-profile/[userId].tsx
+++ b/src/pages/user-profile/[userId].tsx
@@ -446,8 +446,8 @@ const TeacherProfile: React.FC<TeacherProfileProp> = ({
                 sx={{
                   fontSize: '14px',
                   lineHeight: '20px',
-                  width: '100%',
-                  minWidth: '182px',
+
+                  minWidth: 'fit-content',
                   padding: '10px 24px 10px 16px',
                   gap: '8px',
                   borderRadius: '100px',
@@ -456,7 +456,8 @@ const TeacherProfile: React.FC<TeacherProfileProp> = ({
                   textAlign: 'center',
                   color: theme.palette.warning.A200,
                   border: `1px solid #4D4639`,
-                  maxWidth: '40%',
+
+                  px: '16px',
                 }}
                 onClick={handleOpenAddLearnerModal}
               >