Repository: laboratoriobridge/bold (ts)

Issue:
[FileUploader] The file name overflows when annexing a file with a long name
### **Description**
When a file with a long name is annexed, the name extends beyond the component's borders.
 
### **Steps to reproduce the behavior**:
1. Annex a file with a long name (longer than ~70 characters);
2. See that the file name is displayed incorrectly.
 
### **Expected behavior**
If the file name is too long, it should break into multiple lines.
 
### **Screenshots**

![Image](https://github.com/user-attachments/assets/506b5436-1e35-40f4-abac-4995853b012e)

### **Desktop:**
 - OS: Ubuntu 22.04.5 LTS x86_64
 - Browser: Firefox
 - Version: 134.0.2

Pull request:
Truncate the filename in the Fileuploader component
* closes #889 



Patch:
diff --git a/src/components/FileUploader/FileUploader.tsx b/src/components/FileUploader/FileUploader.tsx
index c25dd35e3..57fc22c7b 100644
--- a/src/components/FileUploader/FileUploader.tsx
+++ b/src/components/FileUploader/FileUploader.tsx
@@ -90,7 +90,7 @@ export function FileInfo(props: FileInfoProps) {
       {!file.error && !file.uploading && (
         <Icon icon='checkDefault' fill='primary' size={1} style={{ marginRight: 5 }} />
       )}
-      <Text fontWeight='bold' style={{ marginRight: 10 }}>
+      <Text fontWeight='bold' style={classes.fileName}>
         {file.selectedFile.name}
       </Text>
       <Text>{format(file.selectedFile.size, 0)}</Text>
@@ -168,4 +168,8 @@ export const createStyles = (theme: Theme) => ({
     flexGrow: 1,
     marginLeft: '1rem',
   },
+  fileName: {
+    wordBreak: 'break-all',
+    marginRight: 10,
+  } as CSSProperties,
 })


Test patch:
diff --git a/src/components/FileUploader/__snapshots__/FileUploader.test.tsx.snap b/src/components/FileUploader/__snapshots__/FileUploader.test.tsx.snap
index 783aab33d..e7db6f579 100644
--- a/src/components/FileUploader/__snapshots__/FileUploader.test.tsx.snap
+++ b/src/components/FileUploader/__snapshots__/FileUploader.test.tsx.snap
@@ -119,6 +119,7 @@ exports[`should render correct without extension 1`] = `
   line-height: 1.5;
   color: #24252E;
   font-weight: bold;
+  word-break: break-all;
   margin-right: 10px;
 }
 
@@ -430,6 +431,7 @@ exports[`should render correctly at uploading state 1`] = `
   line-height: 1.5;
   color: #24252E;
   font-weight: bold;
+  word-break: break-all;
   margin-right: 10px;
 }
 
@@ -656,6 +658,7 @@ exports[`should render correctly complete state 1`] = `
   line-height: 1.5;
   color: #24252E;
   font-weight: bold;
+  word-break: break-all;
   margin-right: 10px;
 }