Prevented wrapping of team name, payment status and start/end dates.

Author: MadOPcode

src/routes/WorkPeriods/components/PaymentStatus/styles.module.scss

@@ -7,6 +7,7 @@
   font-size: 12px;
   line-height: 16px;
   letter-spacing: 0.5px;
+  white-space: nowrap;
   border-radius: 5px;
   background: #aaa;
   color: #fff;

src/routes/WorkPeriods/components/PeriodItem/index.jsx

@@ -52,9 +52,9 @@ const PeriodItem = ({ isSelected, item, onToggle, onWorkingDaysChange }) => {
           </a>
         </span>
       </td>
-      <td>{item.projectId}</td>
-      <td>{item.startDate}</td>
-      <td>{item.endDate}</td>
+      <td className={styles.teamName}>{item.projectId}</td>
+      <td className={styles.startDate}>{item.startDate}</td>
+      <td className={styles.endDate}>{item.endDate}</td>
       <td>{currencyFormatter.format(item.weeklyRate)}</td>
       <td>
         <PaymentStatus status={item.paymentStatus} />

src/routes/WorkPeriods/components/PeriodItem/styles.module.scss

@@ -33,8 +33,14 @@ td.toggle {
   }
 }
 
-.teamName {
+td.teamName {
   @include roboto-medium;
+  white-space: nowrap;
+}
+
+td.startDate,
+td.endDate {
+  white-space: nowrap;
 }
 
 td.workingDays {