diff --git a/front/assets/js/flaky_tests/components/flaky_test_row.tsx b/front/assets/js/flaky_tests/components/flaky_test_row.tsx
index 2440725c6..6b59be102 100644
--- a/front/assets/js/flaky_tests/components/flaky_test_row.tsx
+++ b/front/assets/js/flaky_tests/components/flaky_test_row.tsx
@@ -7,7 +7,6 @@ import { Link } from "react-router-dom";
 import * as stores from "../stores";
 import * as components from "../components";
 
-
 export const FlakyTestRow = ({ item }: { item: FlakyTestItem, }) => {
   const [labels, setLabels] = useState([``]);
   useEffect(() => {
@@ -17,70 +16,88 @@ export const FlakyTestRow = ({ item }: { item: FlakyTestItem, }) => {
     setLabels(labels);
   }, [item]);
 
+  return (
+    <div className="flex-m bt b--black-10 pv2 items-center">
+      {/*Name*/}
+      <div className="w-25-m" style={{ wordBreak: `break-word` }}>
+        <Name item={item}/>
+      </div>
 
-  return <div className="flex-m bt b--black-10 pv2 items-center">
-    {/*Name*/}
-    <div className="w-25-m truncate">
-      <Name item={item}/>
-    </div>
-
-    {/*  Labels */}
-    <div className="w-10-m flex flex-column items-center justify-center">
-      <components.LabelList testId={item.testId} labels={labels} setLabels={setLabels}/>
-    </div>
-
-    {/* Age */}
-    <div className="w-10-m flex flex-column items-center justify-center">
-      <span className="gray">{item.daysAge()}</span>
-    </div>
-
+      {/*  Labels */}
+      <div className="w-10-m flex flex-column items-center justify-center">
+        <components.LabelList
+          testId={item.testId}
+          labels={labels}
+          setLabels={setLabels}
+        />
+      </div>
 
-    {/*  Latest flaky occurrence */}
-    <div className="w-10-m flex flex-column items-center justify-center">
-      <LatestFlakyOccurrence item={item}/>
-    </div>
+      {/* Age */}
+      <div className="w-10-m flex flex-column items-center justify-center">
+        <span className="gray">{item.daysAge()}</span>
+      </div>
 
+      {/*  Latest flaky occurrence */}
+      <div className="w-10-m flex flex-column items-center justify-center">
+        <LatestFlakyOccurrence item={item}/>
+      </div>
 
-    {/*  Disruption History*/}
-    <div className="w-25-m flex flex-column items-center justify-center flex-wrap">
-      <DisruptionHistoryChart items={item.disruptionHistory}/>
-    </div>
+      {/*  Disruption History*/}
+      <div className="w-25-m flex flex-column items-center justify-center flex-wrap">
+        <DisruptionHistoryChart items={item.disruptionHistory}/>
+      </div>
 
-    {/*  Disruptions */}
-    <div className="w-10-m flex flex-column items-center justify-center">
-      <span className="f3 b">{item.disruptions}</span>
-    </div>
+      {/*  Disruptions */}
+      <div className="w-10-m flex flex-column items-center justify-center">
+        <span className="f3 b">{item.disruptions}</span>
+      </div>
 
-    {/*    Actions */}
-    <div className="w-10-m flex flex-column items-center justify-center">
-      <components.Actions item={item}/>
+      {/*    Actions */}
+      <div className="w-10-m flex flex-column items-center justify-center">
+        <components.Actions item={item}/>
+      </div>
     </div>
-  </div>;
+  );
 };
 
 const Name = ({ item }: { item: FlakyTestItem, }) => {
-  const { state: filterState, dispatch: dispatchFilter } = useContext(stores.Filter.Context);
-
+  const { state: filterState, dispatch: dispatchFilter } = useContext(
+    stores.Filter.Context
+  );
 
   const onClick = (toAppend: string) => {
     const query = filterState.query;
-    const setQuery = (q: string) => dispatchFilter({ type: `SET_QUERY`, value: q });
-    if(query.includes(toAppend))
-      return;
+    const setQuery = (q: string) =>
+      dispatchFilter({ type: `SET_QUERY`, value: q });
+    if (query.includes(toAppend)) return;
     const q = `${query} ${toAppend}`;
     setQuery(q);
   };
 
-
   return (
     <div className="flex-m items-start justify-between">
       <div className="pr3-m">
         <div>
           <Link to={item.testId}>{item.testName}</Link>
         </div>
-        <a className="f5 mt1 black link underline-hover db pointer" onClick={() => onClick(`@test.group:"${item.testGroup}"`)}>{item.testGroup}</a>
-        <a className="f6 gray link underline-hover db pointer" onClick={() => onClick(`@test.runner:"${item.testRunner}"`)}>{item.testRunner}</a>
-        <a className="f6 gray link underline-hover db pointer" onClick={() => onClick(`@test.suite:"${item.testSuite}"`)}>{item.testSuite}</a>
+        <a
+          className="f5 mt1 black link underline-hover db pointer"
+          onClick={() => onClick(`@test.group:"${item.testGroup}"`)}
+        >
+          {item.testGroup}
+        </a>
+        <a
+          className="f6 gray link underline-hover db pointer"
+          onClick={() => onClick(`@test.runner:"${item.testRunner}"`)}
+        >
+          {item.testRunner}
+        </a>
+        <a
+          className="f6 gray link underline-hover db pointer"
+          onClick={() => onClick(`@test.suite:"${item.testSuite}"`)}
+        >
+          {item.testSuite}
+        </a>
       </div>
     </div>
   );
@@ -90,11 +107,27 @@ const LatestFlakyOccurrence = ({ item }: { item: FlakyTestItem, }) => {
   return (
     <Fragment>
       <div title={util.Formatter.dateTime(item.latestDisruptionTimestamp)}>
-        <a href={item.latestDisruptionJobUrl} className="link gray underline-hover" target="_blank" rel="noreferrer">{util.Formatter.dateDiff(item.latestDisruptionTimestamp, new Date())}</a>
+        <a
+          href={item.latestDisruptionJobUrl}
+          className="link gray underline-hover"
+          target="_blank"
+          rel="noreferrer"
+        >
+          {util.Formatter.dateDiff(item.latestDisruptionTimestamp, new Date())}
+        </a>
       </div>
       <div className="flex items-center ph2">
-        <span className="material-symbols-outlined b f4 db mr2 gray">commit</span>
-        <a href={item.latestDisruptionJobUrl} className="link gray underline-hover" target="_blank" rel="noreferrer">{item.latestDisruptionHash.slice(0, 7)}</a>
+        <span className="material-symbols-outlined b f4 db mr2 gray">
+          commit
+        </span>
+        <a
+          href={item.latestDisruptionJobUrl}
+          className="link gray underline-hover"
+          target="_blank"
+          rel="noreferrer"
+        >
+          {item.latestDisruptionHash.slice(0, 7)}
+        </a>
       </div>
     </Fragment>
   );
diff --git a/front/test/support/fake_clients/superjerry.ex b/front/test/support/fake_clients/superjerry.ex
index e80c82803..caadba626 100644
--- a/front/test/support/fake_clients/superjerry.ex
+++ b/front/test/support/fake_clients/superjerry.ex
@@ -144,10 +144,10 @@ defmodule Support.FakeClients.Superjerry do
 
     %FlakyTestItem{
       test_id: Ecto.UUID.generate(),
-      test_name: Faker.Commerce.product_name(),
-      test_group: Faker.Commerce.product_name(),
-      test_runner: Faker.Commerce.product_name(),
-      test_suite: Faker.Commerce.product_name(),
+      test_name: Faker.Lorem.sentence(6..12),
+      test_group: Faker.Lorem.sentence(6..12),
+      test_runner: Faker.Lorem.sentence(6..12),
+      test_suite: Faker.Lorem.sentence(6..12),
       test_file: Faker.File.file_name(),
       disruptions_count: disruption_count,
       pass_rate: Faker.random_between(0, 100),