From 6cf0d1f40820a22ce2d49c61514e3d4b06121384 Mon Sep 17 00:00:00 2001
From: KacperKoza343 <kacper.koza@blockydevs.com>
Date: Thu, 17 Oct 2024 13:23:35 +0200
Subject: [PATCH] fix(human-app/frontend): text wrap on mobile job cards

---
 .../apps/human-app/frontend/src/components/ui/chip.tsx   | 6 +++++-
 .../mobile/available-jobs-table-mobile.tsx               | 9 +--------
 2 files changed, 6 insertions(+), 9 deletions(-)

diff --git a/packages/apps/human-app/frontend/src/components/ui/chip.tsx b/packages/apps/human-app/frontend/src/components/ui/chip.tsx
index e6aa269193..f42b370c2f 100644
--- a/packages/apps/human-app/frontend/src/components/ui/chip.tsx
+++ b/packages/apps/human-app/frontend/src/components/ui/chip.tsx
@@ -19,14 +19,18 @@ export function Chip({ label, backgroundColor }: ChipProps) {
           : colorPalette.chip.main,
         width: 'fit-content',
         px: '10px',
-        py: '2px',
+        py: '6px',
         borderRadius: '16px',
         display: 'flex',
+        whiteSpace: 'wrap',
       }}
     >
       <Typography
         color={backgroundColor ? colorPalette.white : colorPalette.text.primary}
         variant="chip"
+        sx={{
+          wordBreak: 'break-all',
+        }}
       >
         {label}
       </Typography>
diff --git a/packages/apps/human-app/frontend/src/pages/worker/jobs/components/available-jobs/mobile/available-jobs-table-mobile.tsx b/packages/apps/human-app/frontend/src/pages/worker/jobs/components/available-jobs/mobile/available-jobs-table-mobile.tsx
index d66f873092..1bf5bf9385 100644
--- a/packages/apps/human-app/frontend/src/pages/worker/jobs/components/available-jobs/mobile/available-jobs-table-mobile.tsx
+++ b/packages/apps/human-app/frontend/src/pages/worker/jobs/components/available-jobs/mobile/available-jobs-table-mobile.tsx
@@ -119,14 +119,7 @@ export function AvailableJobsTableMobile({
               <Grid columnSpacing="2rem" container>
                 <Grid item xs={12}>
                   <ListItem label={t('worker.jobs.jobDescription')}>
-                    <Typography
-                      sx={{
-                        textOverflow: 'ellipsis',
-                        overflow: 'hidden',
-                        whiteSpace: 'nowrap',
-                      }}
-                      variant="subtitle1"
-                    >
+                    <Typography variant="subtitle1">
                       {d.job_description}
                     </Typography>
                   </ListItem>