file name formating before render, tooltip added for full file name

src/components/client/irregularity/helpers/FileList.tsx

@@ -1,7 +1,17 @@
 import React from 'react'
 
 import { Delete, UploadFile } from '@mui/icons-material'
-import { Avatar, IconButton, List, ListItem, ListItemAvatar, ListItemText } from '@mui/material'
+import {
+  Avatar,
+  IconButton,
+  List,
+  ListItem,
+  ListItemAvatar,
+  ListItemText,
+  Tooltip,
+} from '@mui/material'
+
+import { formatFileName } from './formatFileName'
 
 type Props = {
   files: File[]
@@ -24,8 +34,10 @@ function FileList({ files, onDelete }: Props) {
               <UploadFile />
             </Avatar>
           </ListItemAvatar>
-          <ListItemText primary={file.type} />
-          <ListItemText primary={file.name} />
+          <ListItemText primary={file.type} sx={{ maxWidth: '300px' }} />
+          <Tooltip title={file.name}>
+            <ListItemText primary={formatFileName(file.name)} />
+          </Tooltip>
         </ListItem>
       ))}
     </List>

src/components/client/irregularity/helpers/formatFileName.ts

@@ -0,0 +1,12 @@
+export const formatFileName = (fileName: string) => {
+  const maxLength = 15
+  if (fileName.length <= maxLength) return fileName
+
+  const fileExtension = fileName.split('.').pop()
+  if (fileExtension) {
+    const nameWithoutExtension = fileName.slice(0, -(fileExtension.length + 1))
+    return `${nameWithoutExtension.slice(0, 6)}...${nameWithoutExtension.slice(
+      -6,
+    )}.${fileExtension}`
+  }
+}

src/components/client/irregularity/steps/Info.tsx

@@ -12,6 +12,7 @@ import Subtitle from '../helpers/Subtitle'
 import FileList from '../helpers/FileList'
 import { NotifierTypes } from '../helpers/irregularity.types'
 import IrregularityReasonSelect from '../helpers/IrregularityReasonSelect'
+import { Box } from '@mui/material'
 
 import theme from 'common/theme'
 
@@ -103,21 +104,28 @@ export default function Info({ files, setFiles }: Props) {
             {t('steps.info.files')}
           </Typography>
         </Grid>
-        <Grid container justifyContent="center" mt={2}>
+        <Grid
+          container
+          justifyContent={'center'}
+          flexDirection={'column'}
+          alignItems={'center'}
+          mt={4}>
           <FileUpload
             onUpload={(newFiles) => {
               setFiles((prevFiles: File[]) => [...prevFiles, ...newFiles])
             }}
             buttonLabel={t('cta.upload-files')}
           />
-          <FileList
-            files={files}
-            onDelete={(deletedFile) =>
-              setFiles((prevFiles: File[]) =>
-                prevFiles.filter((file: File) => file.name !== deletedFile.name),
-              )
-            }
-          />
+          <Box sx={{ width: '100%', marginTop: theme.spacing(2) }}>
+            <FileList
+              files={files}
+              onDelete={(deletedFile) =>
+                setFiles((prevFiles: File[]) =>
+                  prevFiles.filter((file: File) => file.name !== deletedFile.name),
+                )
+              }
+            />
+          </Box>
         </Grid>
       </Grid>
       <Grid item xs={12}>