increase duty name width in editor

Author: rhahao

src/features/meetings/duties_schedule/audio_video/index.tsx

@@ -25,7 +25,7 @@ const AudioVideo = () => {
       />
 
       <Stack spacing="8px" flex={1} width="100%">
-        <Grid container spacing={2}>
+        <Grid container spacing="8px">
           <Grid size={{ mobile: 12, laptop: 6 }}>
             <PersonSelector
               label={t('tr_brother')}

src/features/meetings/duties_schedule/auditorium_attendant/index.tsx

@@ -25,7 +25,7 @@ const AuditoriumAttendant = () => {
       />
 
       <Stack spacing="8px" flex={1} width="100%">
-        <Grid container spacing={2}>
+        <Grid container spacing="8px">
           <Grid size={{ mobile: 12, laptop: 6 }}>
             <PersonSelector
               label={t('tr_brother')}

src/features/meetings/duties_schedule/duty_name/index.tsx

@@ -9,7 +9,7 @@ const DutyName = ({ icon, duty }: DutyNameProps) => {
   return (
     <Box
       sx={{
-        minWidth: '200px',
+        minWidth: '240px',
         borderRadius: 'var(--radius-l)',
         padding: '8px',
         display: 'flex',
@@ -21,7 +21,11 @@ const DutyName = ({ icon, duty }: DutyNameProps) => {
       }}
     >
       {icon}
-      <Typography className="body-small-semibold" color="var(--accent-dark)">
+      <Typography
+        className="body-small-semibold"
+        color="var(--accent-dark)"
+        sx={{ textWrap: 'wrap' }}
+      >
         {duty}
       </Typography>
     </Box>

src/features/meetings/duties_schedule/stage/index.tsx

@@ -25,7 +25,7 @@ const Stage = () => {
       />
 
       <Stack spacing="8px" flex={1} width="100%">
-        <Grid container spacing={2}>
+        <Grid container spacing="8px">
           <Grid size={{ mobile: 12, laptop: 6 }}>
             <PersonSelector
               label={t('tr_brother')}