chore: changing truncated text

frontend/src/__test__/components/TruncatedText.test.tsx

@@ -26,15 +26,10 @@ describe('TruncatedText Component', () => {
     expect(screen.getByText("Short text")).toBeInTheDocument();
   });
 
-  it('truncates text based on parentWidth less than 200px', () => {
-    render(<TruncatedText text="This is a test text that should be truncated" parentWidth={150} />);
-    expect(screen.getByText("This is a test ...")).toBeInTheDocument(); // 150/10 = 15 chars
-  });
-
   it('truncates text based on parentWidth greater than 200px', () => {
     const text = "This is a test text that should be truncated".repeat(10);
     render(<TruncatedText text={text} parentWidth={300} />);
-    expect(screen.getByText("This is a test text that should be truncatedThis is a test t...")).toBeInTheDocument(); // 300/5 = 60 chars
+    expect(screen.getByText("This is a test text that should be truncated...")).toBeInTheDocument(); // 300/5 = 60 chars
   });
 
   it('renders tooltip with full text on hover', async () => {

frontend/src/components/TruncatedText/index.tsx

@@ -7,14 +7,15 @@ const TruncatedText: React.FC<{text: string, maxLength?: number, parentWidth?: n
   // Otherwise, use maxLength if provided, otherwise default to 50
   // The number of characters that can fit in the parent container is calculated based on the parentWidth
   // If the parentWidth is less than 200px, we divide the parentWidth by 10, otherwise we divide by 5
-  const charCount = parentWidth ? Math.floor(parentWidth / (parentWidth < 200 ? 10 : 5)) : maxLength ? maxLength : 50;
+  const charCount = parentWidth ? Math.floor(parentWidth / 6.68) : maxLength ? maxLength : 50;
   const truncated = text.length > charCount ? text.slice(0, charCount) + "..." : text; 
   return <Tooltip  
-  label={text}
-  align="bottom-left"
-  autoAlign
-> 
-<span>{truncated}</span></Tooltip>;
+            label={text}
+            align="bottom-left"
+            autoAlign
+          > 
+            <span>{truncated}</span>
+          </Tooltip>;
 }
 
 export default TruncatedText;