Fix word wrap with no white spaces for status

src/components/ui/History_Drawer.tsx

@@ -97,7 +97,7 @@ const History_Drawer: React.FC<History_Drawer_Props> = ({ user_id }) => {
             {history.map((entry, index) => (
               <TableRow key={index}>
                 <TableCell className="font-medium lg:max-w-[100px]">{entry.name}</TableCell>
-                <TableCell className="font-medium lg:max-w-[100px]">{entry.status}</TableCell>
+                <TableCell className="font-medium lg:max-w-[100px] wrapword">{entry.status}</TableCell>
                 <TableCell className="font-medium lg:max-w-[100px] justify-end items-end text-right">{new Date(entry.updatedAt).toLocaleString()}</TableCell>
               </TableRow>
             ))}

src/components/ui/Tech_Table.tsx

@@ -204,7 +204,8 @@ export default function Tech_Table({ employees }: { employees: Employee[] }) {
                 <td className="n-column px-1 md:py-3 border border-[#3e4446]">
                   {employee.name}
                 </td>
-                <td className="s-column max-w-[700px] px-1 md:py-3 border border-[#3e4446]">
+                <td className="s-column max-w-[700px] px-1 md:py-3 border
+                  border-[#3e4446] wrapword">
                     <Drawer>
                       <DrawerTrigger>
                       <button onClick={() => handleStatusClick(employee.id)}>

src/styles/globals.css

@@ -134,3 +134,14 @@
 .tablefill {
   height: 10vh;
 }
+
+.wrapword {
+    white-space: -moz-pre-wrap !important;  /* Mozilla, since 1999 */
+    white-space: -webkit-pre-wrap;          /* Chrome & Safari */ 
+    white-space: -pre-wrap;                 /* Opera 4-6 */
+    white-space: -o-pre-wrap;               /* Opera 7 */
+    white-space: pre-wrap;                  /* CSS3 */
+    word-wrap: break-word;                  /* Internet Explorer 5.5+ */
+    word-break: break-all;
+    white-space: normal;
+}