Merge pull request #4536 from OneCommunityGlobal/venkataramanan_fix_progress_bar_width

Venkataramanan 🔥 Progress bar width in Tasks and Timelogs table

Author: one-community

src/components/TeamMemberTasks/TeamMemberTask.jsx

@@ -595,7 +595,7 @@ const TeamMemberTask = React.memo(
                                         darkMode ? 'bg-yinmn-blue text-light' : ''
                                       }`}
                                     >
-                                      <>
+                                      <div className={styles['progress-wrapper']}>
                                         <div className={styles['team-task-progress-container']}>
                                           <div
                                             data-testid={`times-${task.taskName}`}
@@ -661,7 +661,7 @@ const TeamMemberTask = React.memo(
                                           )}
                                           className={styles['team-task-progress-bar']}
                                         />
-                                      </>
+                                      </div>
                                     </td>
                                   )}
                                 </tr>

src/components/TeamMemberTasks/style.module.css

@@ -11,9 +11,21 @@
   overflow: hidden;
 }
 
+.progress-wrapper {
+  display: inline-block;
+}
 
+.team-task-progress-container {
+  display: flex;
+  flex-direction: row;
+  align-items: center;
+  flex-wrap: wrap;          
+}
 
-
+.team-task-progress-bar {
+  width: 100%;
+  margin-top: 4px;  
+}
 
 
 .team-member-task-review-button {
@@ -491,13 +503,6 @@
   /* min-width: 150px; */
 }
 
-.team-task-progress-container {
-  display: flex;
-  flex-direction: row;
-  align-items: center;
-  flex-wrap: wrap;                 
-}
-
 .progress-text{
   margin: 0;
   /* border: green 1px solid; */
@@ -522,17 +527,6 @@
   align-self: center;
 }
 
-.team-task-progress-bar {
-  /* width: 60%;              
-  max-width: 180px;       
-  min-width: 100px;         */
-  align-self: flex-start;  
-  margin-top: 4px;         
-  height: 10px;
-  border-radius: 4px;
-}
-
-
 .hours-btn-div {
   display: flex;
   flex-direction: row;