fix(human-app/frontend): text wrap on mobile job cards

KacperKoza343 · Oct 23, 2024 · 6cf0d1f · 6cf0d1f
1 parent 4d2c963
commit 6cf0d1f
Show file tree

Hide file tree

Showing 2 changed files with 6 additions and 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
@@ -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/...nd/src/pages/worker/jobs/components/available-jobs/mobile/available-jobs-table-mobile.tsx b/...nd/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>