From 7e32468bd12819ca21b69bf7ea6ea18a124606a4 Mon Sep 17 00:00:00 2001
From: atanasster <atanasster@gmail.com>
Date: Sun, 9 May 2021 08:11:14 +0300
Subject: [PATCH] fix: table header centered labels

---
 .../__snapshots__/AttributeUsage.test.ts.snap |    3 +
 .../AttributesUsageDetails.test.ts.snap       |    3 +
 .../AttributesUsageList.test.ts.snap          |    6 +
 .../__snapshots__/ComponentUsage.test.ts.snap |    3 +
 .../ComponentUsageDetails.test.ts.snap        |    3 +
 .../ComponentUsageList.test.ts.snap           |    3 +
 .../__snapshots__/SidebarsPage.test.ts.snap   |    3 +
 .../ComponentCommits.test.ts.snap             |   18 +
 .../ExternalDependencies.test.ts.snap         |    3 +
 .../LocalDependencies.test.ts.snap            |    3 +
 .../__snapshots__/PropsTable.test.ts.snap     |   21 +
 .../__snapshots__/TestsCoverage.test.ts.snap  |   18 +
 .../src/TestsResults/BaseTestsResults.tsx     |   18 +-
 .../__snapshots__/TestsResults.test.ts.snap   | 1422 ++++++++++-------
 ui/components/src/Table/Table.tsx             |    4 +-
 .../Table/__snapshots__/Table.test.ts.snap    |   33 +
 16 files changed, 958 insertions(+), 606 deletions(-)

diff --git a/plugins/addon-stats/src/ui/AttributeUsage/__snapshots__/AttributeUsage.test.ts.snap b/plugins/addon-stats/src/ui/AttributeUsage/__snapshots__/AttributeUsage.test.ts.snap
index 98e0562cf..c82157a8f 100644
--- a/plugins/addon-stats/src/ui/AttributeUsage/__snapshots__/AttributeUsage.test.ts.snap
+++ b/plugins/addon-stats/src/ui/AttributeUsage/__snapshots__/AttributeUsage.test.ts.snap
@@ -211,6 +211,9 @@ exports[`AttributeUsage overview snapshot 1`] = `
   margin: 0;
   min-width: 0;
   margin-right: 4px;
+  -webkit-flex: 1;
+  -ms-flex: 1;
+  flex: 1;
 }
 
 .emotion-24 {
diff --git a/plugins/addon-stats/src/ui/AttributesUsageDetails/__snapshots__/AttributesUsageDetails.test.ts.snap b/plugins/addon-stats/src/ui/AttributesUsageDetails/__snapshots__/AttributesUsageDetails.test.ts.snap
index 105d497c1..e5e79b43b 100644
--- a/plugins/addon-stats/src/ui/AttributesUsageDetails/__snapshots__/AttributesUsageDetails.test.ts.snap
+++ b/plugins/addon-stats/src/ui/AttributesUsageDetails/__snapshots__/AttributesUsageDetails.test.ts.snap
@@ -211,6 +211,9 @@ exports[`AttributesUsageDetails overview snapshot 1`] = `
   margin: 0;
   min-width: 0;
   margin-right: 4px;
+  -webkit-flex: 1;
+  -ms-flex: 1;
+  flex: 1;
 }
 
 .emotion-18 {
diff --git a/plugins/addon-stats/src/ui/AttributesUsageList/__snapshots__/AttributesUsageList.test.ts.snap b/plugins/addon-stats/src/ui/AttributesUsageList/__snapshots__/AttributesUsageList.test.ts.snap
index 2d58ce820..4fcf3d90a 100644
--- a/plugins/addon-stats/src/ui/AttributesUsageList/__snapshots__/AttributesUsageList.test.ts.snap
+++ b/plugins/addon-stats/src/ui/AttributesUsageList/__snapshots__/AttributesUsageList.test.ts.snap
@@ -211,6 +211,9 @@ exports[`AttributesUsageList overview snapshot 1`] = `
   margin: 0;
   min-width: 0;
   margin-right: 4px;
+  -webkit-flex: 1;
+  -ms-flex: 1;
+  flex: 1;
 }
 
 .emotion-18 {
@@ -732,6 +735,9 @@ exports[`AttributesUsageList overview snapshot 1`] = `
   margin: 0;
   min-width: 0;
   margin-right: 4px;
+  -webkit-flex: 1;
+  -ms-flex: 1;
+  flex: 1;
 }
 
 .emotion-18 {
diff --git a/plugins/addon-stats/src/ui/ComponentUsage/__snapshots__/ComponentUsage.test.ts.snap b/plugins/addon-stats/src/ui/ComponentUsage/__snapshots__/ComponentUsage.test.ts.snap
index 018ff41c9..7d2c7c694 100644
--- a/plugins/addon-stats/src/ui/ComponentUsage/__snapshots__/ComponentUsage.test.ts.snap
+++ b/plugins/addon-stats/src/ui/ComponentUsage/__snapshots__/ComponentUsage.test.ts.snap
@@ -211,6 +211,9 @@ exports[`ComponentUsage overview snapshot 1`] = `
   margin: 0;
   min-width: 0;
   margin-right: 4px;
+  -webkit-flex: 1;
+  -ms-flex: 1;
+  flex: 1;
 }
 
 .emotion-24 {
diff --git a/plugins/addon-stats/src/ui/ComponentUsageDetails/__snapshots__/ComponentUsageDetails.test.ts.snap b/plugins/addon-stats/src/ui/ComponentUsageDetails/__snapshots__/ComponentUsageDetails.test.ts.snap
index 692007179..4350d7948 100644
--- a/plugins/addon-stats/src/ui/ComponentUsageDetails/__snapshots__/ComponentUsageDetails.test.ts.snap
+++ b/plugins/addon-stats/src/ui/ComponentUsageDetails/__snapshots__/ComponentUsageDetails.test.ts.snap
@@ -211,6 +211,9 @@ exports[`ComponentUsageDetails overview snapshot 1`] = `
   margin: 0;
   min-width: 0;
   margin-right: 4px;
+  -webkit-flex: 1;
+  -ms-flex: 1;
+  flex: 1;
 }
 
 .emotion-18 {
diff --git a/plugins/addon-stats/src/ui/ComponentUsageList/__snapshots__/ComponentUsageList.test.ts.snap b/plugins/addon-stats/src/ui/ComponentUsageList/__snapshots__/ComponentUsageList.test.ts.snap
index f3165a145..477bc8250 100644
--- a/plugins/addon-stats/src/ui/ComponentUsageList/__snapshots__/ComponentUsageList.test.ts.snap
+++ b/plugins/addon-stats/src/ui/ComponentUsageList/__snapshots__/ComponentUsageList.test.ts.snap
@@ -211,6 +211,9 @@ exports[`ComponentUsageList overview snapshot 1`] = `
   margin: 0;
   min-width: 0;
   margin-right: 4px;
+  -webkit-flex: 1;
+  -ms-flex: 1;
+  flex: 1;
 }
 
 .emotion-18 {
diff --git a/ui/app/src/SidebarsPage/__snapshots__/SidebarsPage.test.ts.snap b/ui/app/src/SidebarsPage/__snapshots__/SidebarsPage.test.ts.snap
index 15ad80be7..b941e96f7 100644
--- a/ui/app/src/SidebarsPage/__snapshots__/SidebarsPage.test.ts.snap
+++ b/ui/app/src/SidebarsPage/__snapshots__/SidebarsPage.test.ts.snap
@@ -1072,6 +1072,9 @@ exports[`SidebarsPage overview snapshot 1`] = `
   margin: 0;
   min-width: 0;
   margin-right: 4px;
+  -webkit-flex: 1;
+  -ms-flex: 1;
+  flex: 1;
 }
 
 .emotion-119 {
diff --git a/ui/blocks/src/ComponentCommits/__snapshots__/ComponentCommits.test.ts.snap b/ui/blocks/src/ComponentCommits/__snapshots__/ComponentCommits.test.ts.snap
index 495589b0c..ce4e06c10 100644
--- a/ui/blocks/src/ComponentCommits/__snapshots__/ComponentCommits.test.ts.snap
+++ b/ui/blocks/src/ComponentCommits/__snapshots__/ComponentCommits.test.ts.snap
@@ -140,6 +140,9 @@ exports[`ComponentCommits overview snapshot 1`] = `
   margin: 0;
   min-width: 0;
   margin-right: 4px;
+  -webkit-flex: 1;
+  -ms-flex: 1;
+  flex: 1;
 }
 
 .emotion-16 {
@@ -1199,6 +1202,9 @@ exports[`ComponentCommits pagination 0 snapshot 1`] = `
   margin: 0;
   min-width: 0;
   margin-right: 4px;
+  -webkit-flex: 1;
+  -ms-flex: 1;
+  flex: 1;
 }
 
 .emotion-16 {
@@ -2263,6 +2269,9 @@ exports[`ComponentCommits pagination 1 snapshot 1`] = `
   margin: 0;
   min-width: 0;
   margin-right: 4px;
+  -webkit-flex: 1;
+  -ms-flex: 1;
+  flex: 1;
 }
 
 .emotion-16 {
@@ -3327,6 +3336,9 @@ exports[`ComponentCommits pagination 2 snapshot 1`] = `
   margin: 0;
   min-width: 0;
   margin-right: 4px;
+  -webkit-flex: 1;
+  -ms-flex: 1;
+  flex: 1;
 }
 
 .emotion-16 {
@@ -4391,6 +4403,9 @@ exports[`ComponentCommits pagination 3 snapshot 1`] = `
   margin: 0;
   min-width: 0;
   margin-right: 4px;
+  -webkit-flex: 1;
+  -ms-flex: 1;
+  flex: 1;
 }
 
 .emotion-16 {
@@ -5279,6 +5294,9 @@ exports[`ComponentCommits pagination 4 snapshot 1`] = `
   margin: 0;
   min-width: 0;
   margin-right: 4px;
+  -webkit-flex: 1;
+  -ms-flex: 1;
+  flex: 1;
 }
 
 .emotion-16 {
diff --git a/ui/blocks/src/ComponentDependencies/__snapshots__/ExternalDependencies.test.ts.snap b/ui/blocks/src/ComponentDependencies/__snapshots__/ExternalDependencies.test.ts.snap
index 95e35d889..86ebea87b 100644
--- a/ui/blocks/src/ComponentDependencies/__snapshots__/ExternalDependencies.test.ts.snap
+++ b/ui/blocks/src/ComponentDependencies/__snapshots__/ExternalDependencies.test.ts.snap
@@ -214,6 +214,9 @@ exports[`ExternalDependencies overview snapshot 1`] = `
   margin: 0;
   min-width: 0;
   margin-right: 4px;
+  -webkit-flex: 1;
+  -ms-flex: 1;
+  flex: 1;
 }
 
 .emotion-17 {
diff --git a/ui/blocks/src/ComponentDependencies/__snapshots__/LocalDependencies.test.ts.snap b/ui/blocks/src/ComponentDependencies/__snapshots__/LocalDependencies.test.ts.snap
index 1089a1c0e..d9b812850 100644
--- a/ui/blocks/src/ComponentDependencies/__snapshots__/LocalDependencies.test.ts.snap
+++ b/ui/blocks/src/ComponentDependencies/__snapshots__/LocalDependencies.test.ts.snap
@@ -214,6 +214,9 @@ exports[`LocalDependencies overview snapshot 1`] = `
   margin: 0;
   min-width: 0;
   margin-right: 4px;
+  -webkit-flex: 1;
+  -ms-flex: 1;
+  flex: 1;
 }
 
 .emotion-14 {
diff --git a/ui/blocks/src/PropsTable/__snapshots__/PropsTable.test.ts.snap b/ui/blocks/src/PropsTable/__snapshots__/PropsTable.test.ts.snap
index c15089686..6f64b189f 100644
--- a/ui/blocks/src/PropsTable/__snapshots__/PropsTable.test.ts.snap
+++ b/ui/blocks/src/PropsTable/__snapshots__/PropsTable.test.ts.snap
@@ -311,6 +311,9 @@ exports[`PropsTable controls snapshot 1`] = `
   margin: 0;
   min-width: 0;
   margin-right: 4px;
+  -webkit-flex: 1;
+  -ms-flex: 1;
+  flex: 1;
 }
 
 .emotion-32 {
@@ -1134,6 +1137,9 @@ exports[`PropsTable customTitle snapshot 1`] = `
   margin: 0;
   min-width: 0;
   margin-right: 4px;
+  -webkit-flex: 1;
+  -ms-flex: 1;
+  flex: 1;
 }
 
 .emotion-27 {
@@ -1627,6 +1633,9 @@ exports[`PropsTable extraColumns snapshot 1`] = `
   margin: 0;
   min-width: 0;
   margin-right: 4px;
+  -webkit-flex: 1;
+  -ms-flex: 1;
+  flex: 1;
 }
 
 .emotion-24 {
@@ -3384,6 +3393,9 @@ exports[`PropsTable notCollapsible snapshot 1`] = `
   margin: 0;
   min-width: 0;
   margin-right: 4px;
+  -webkit-flex: 1;
+  -ms-flex: 1;
+  flex: 1;
 }
 
 .emotion-24 {
@@ -3841,6 +3853,9 @@ exports[`PropsTable overview snapshot 1`] = `
   margin: 0;
   min-width: 0;
   margin-right: 4px;
+  -webkit-flex: 1;
+  -ms-flex: 1;
+  flex: 1;
 }
 
 .emotion-21 {
@@ -5412,6 +5427,9 @@ exports[`PropsTable subcomponents snapshot 1`] = `
   margin: 0;
   min-width: 0;
   margin-right: 4px;
+  -webkit-flex: 1;
+  -ms-flex: 1;
+  flex: 1;
 }
 
 .emotion-22 {
@@ -5992,6 +6010,9 @@ exports[`PropsTable title snapshot 1`] = `
   margin: 0;
   min-width: 0;
   margin-right: 4px;
+  -webkit-flex: 1;
+  -ms-flex: 1;
+  flex: 1;
 }
 
 .emotion-27 {
diff --git a/ui/blocks/src/TestsCoverage/__snapshots__/TestsCoverage.test.ts.snap b/ui/blocks/src/TestsCoverage/__snapshots__/TestsCoverage.test.ts.snap
index 7eadd9274..2ced2d387 100644
--- a/ui/blocks/src/TestsCoverage/__snapshots__/TestsCoverage.test.ts.snap
+++ b/ui/blocks/src/TestsCoverage/__snapshots__/TestsCoverage.test.ts.snap
@@ -140,6 +140,9 @@ exports[`TestsCoverage overview snapshot 1`] = `
   margin: 0;
   min-width: 0;
   margin-right: 4px;
+  -webkit-flex: 1;
+  -ms-flex: 1;
+  flex: 1;
 }
 
 .emotion-25 {
@@ -1407,6 +1410,9 @@ exports[`TestsCoverage pagination 0 snapshot 1`] = `
   margin: 0;
   min-width: 0;
   margin-right: 4px;
+  -webkit-flex: 1;
+  -ms-flex: 1;
+  flex: 1;
 }
 
 .emotion-25 {
@@ -2358,6 +2364,9 @@ exports[`TestsCoverage pagination 1 snapshot 1`] = `
   margin: 0;
   min-width: 0;
   margin-right: 4px;
+  -webkit-flex: 1;
+  -ms-flex: 1;
+  flex: 1;
 }
 
 .emotion-25 {
@@ -3114,6 +3123,9 @@ exports[`TestsCoverage pagination 2 snapshot 1`] = `
   margin: 0;
   min-width: 0;
   margin-right: 4px;
+  -webkit-flex: 1;
+  -ms-flex: 1;
+  flex: 1;
 }
 
 .emotion-25 {
@@ -3870,6 +3882,9 @@ exports[`TestsCoverage pagination 3 snapshot 1`] = `
   margin: 0;
   min-width: 0;
   margin-right: 4px;
+  -webkit-flex: 1;
+  -ms-flex: 1;
+  flex: 1;
 }
 
 .emotion-25 {
@@ -4785,6 +4800,9 @@ exports[`TestsCoverage pagination 4 snapshot 1`] = `
   margin: 0;
   min-width: 0;
   margin-right: 4px;
+  -webkit-flex: 1;
+  -ms-flex: 1;
+  flex: 1;
 }
 
 .emotion-25 {
diff --git a/ui/blocks/src/TestsResults/BaseTestsResults.tsx b/ui/blocks/src/TestsResults/BaseTestsResults.tsx
index 60cb53a40..349343840 100644
--- a/ui/blocks/src/TestsResults/BaseTestsResults.tsx
+++ b/ui/blocks/src/TestsResults/BaseTestsResults.tsx
@@ -116,16 +116,26 @@ export const BaseTestsResults: FC<BaseTestsResultsProps> = ({
         },
       },
       {
-        Header: 'Full name',
+        Header: <div sx={{ textAlign: 'center' }}>Full name</div>,
         accessor: 'fullName',
         Cell: ({
           row: {
             original: { ancestorTitles },
           },
-        }) => <div>{ancestorTitles.join(' > ')}</div>,
+        }) => (
+          <div
+            sx={{
+              whiteSpace: 'nowrap',
+              textOverflow: 'ellipsis',
+              maxWidth: '400px',
+            }}
+          >
+            {ancestorTitles.join(' > ')}
+          </div>
+        ),
       },
       {
-        Header: 'Title',
+        Header: <div sx={{ textAlign: 'center' }}>Title</div>,
         accessor: 'title',
         Cell: ({
           row: {
@@ -134,7 +144,7 @@ export const BaseTestsResults: FC<BaseTestsResultsProps> = ({
         }) => <div sx={{ fontWeight: 'bolder' }}>{title}</div>,
       },
       {
-        Header: 'Time(ms)',
+        Header: <div sx={{ textAlign: 'center' }}>Time(ms)</div>,
         accessor: 'duration',
         Cell: ({
           row: {
diff --git a/ui/blocks/src/TestsResults/__snapshots__/TestsResults.test.ts.snap b/ui/blocks/src/TestsResults/__snapshots__/TestsResults.test.ts.snap
index 0adfc5f4a..bb761e65e 100644
--- a/ui/blocks/src/TestsResults/__snapshots__/TestsResults.test.ts.snap
+++ b/ui/blocks/src/TestsResults/__snapshots__/TestsResults.test.ts.snap
@@ -140,26 +140,33 @@ exports[`TestsResults overview snapshot 1`] = `
   margin: 0;
   min-width: 0;
   margin-right: 4px;
+  -webkit-flex: 1;
+  -ms-flex: 1;
+  flex: 1;
 }
 
-.emotion-22 {
+.emotion-16 {
+  text-align: center;
+}
+
+.emotion-25 {
   box-sizing: border-box;
   margin: 0;
   min-width: 0;
 }
 
-.emotion-22 tr:last-of-type {
+.emotion-25 tr:last-of-type {
   border-bottom: 0;
 }
 
-.emotion-23 {
+.emotion-26 {
   box-sizing: border-box;
   margin: 0;
   min-width: 0;
   border-bottom: 1px solid rgba(0, 0, 0, 0.1);
 }
 
-.emotion-24 {
+.emotion-27 {
   box-sizing: border-box;
   margin: 0;
   min-width: 0;
@@ -183,7 +190,7 @@ exports[`TestsResults overview snapshot 1`] = `
   display: flex;
 }
 
-.emotion-25 {
+.emotion-28 {
   box-sizing: border-box;
   margin: 0;
   min-width: 0;
@@ -191,7 +198,7 @@ exports[`TestsResults overview snapshot 1`] = `
   margin-right: 8px;
 }
 
-.emotion-27 {
+.emotion-30 {
   box-sizing: border-box;
   margin: 0;
   min-width: 0;
@@ -202,7 +209,7 @@ exports[`TestsResults overview snapshot 1`] = `
   border-bottom: 0;
 }
 
-.emotion-29 {
+.emotion-32 {
   box-sizing: border-box;
   margin: 0;
   min-width: 0;
@@ -215,15 +222,21 @@ exports[`TestsResults overview snapshot 1`] = `
   border: 2px solid #4caf50;
 }
 
-.emotion-33 {
+.emotion-35 {
+  white-space: nowrap;
+  text-overflow: ellipsis;
+  max-width: 400px;
+}
+
+.emotion-37 {
   font-weight: bolder;
 }
 
-.emotion-35 {
+.emotion-39 {
   text-align: end;
 }
 
-.emotion-49 {
+.emotion-54 {
   box-sizing: border-box;
   margin: 0;
   min-width: 0;
@@ -236,7 +249,7 @@ exports[`TestsResults overview snapshot 1`] = `
   border: 2px solid #f44336;
 }
 
-.emotion-51 {
+.emotion-56 {
   display: -webkit-box;
   display: -webkit-flex;
   display: -ms-flexbox;
@@ -250,7 +263,7 @@ exports[`TestsResults overview snapshot 1`] = `
   align-items: center;
 }
 
-.emotion-60 {
+.emotion-66 {
   box-sizing: border-box;
   margin: 0;
   min-width: 0;
@@ -263,7 +276,7 @@ exports[`TestsResults overview snapshot 1`] = `
   border: 2px solid #9ea7ad;
 }
 
-.emotion-70 {
+.emotion-77 {
   box-sizing: border-box;
   margin: 0;
   min-width: 0;
@@ -276,7 +289,7 @@ exports[`TestsResults overview snapshot 1`] = `
   border: 2px solid #fce83a;
 }
 
-.emotion-80 {
+.emotion-88 {
   box-sizing: border-box;
   margin: 0;
   min-width: 0;
@@ -289,7 +302,7 @@ exports[`TestsResults overview snapshot 1`] = `
   border: 2px solid #fab305;
 }
 
-.emotion-90 {
+.emotion-99 {
   box-sizing: border-box;
   margin: 0;
   min-width: 0;
@@ -302,7 +315,7 @@ exports[`TestsResults overview snapshot 1`] = `
   border: 2px solid #39ccff;
 }
 
-.emotion-117 {
+.emotion-129 {
   box-sizing: border-box;
   margin: 0;
   min-width: 0;
@@ -325,7 +338,7 @@ exports[`TestsResults overview snapshot 1`] = `
   padding-bottom: 8px;
 }
 
-.emotion-118 {
+.emotion-130 {
   box-sizing: border-box;
   margin: 0;
   min-width: 0;
@@ -344,7 +357,7 @@ exports[`TestsResults overview snapshot 1`] = `
   padding-right: 16px;
 }
 
-.emotion-119 {
+.emotion-131 {
   box-sizing: border-box;
   margin: 0;
   min-width: 0;
@@ -361,7 +374,7 @@ exports[`TestsResults overview snapshot 1`] = `
   align-items: center;
 }
 
-.emotion-120 {
+.emotion-132 {
   box-sizing: border-box;
   margin: 0;
   min-width: 0;
@@ -380,13 +393,13 @@ exports[`TestsResults overview snapshot 1`] = `
   padding-right: 8px;
 }
 
-.emotion-120 button {
+.emotion-132 button {
   width: 50px;
   margin-left: 2px;
   margin-right: 2px;
 }
 
-.emotion-121 {
+.emotion-133 {
   box-sizing: border-box;
   margin: 0;
   min-width: 0;
@@ -395,7 +408,7 @@ exports[`TestsResults overview snapshot 1`] = `
   margin-right: 2px;
 }
 
-.emotion-122 {
+.emotion-134 {
   box-sizing: border-box;
   margin: 0;
   min-width: 0;
@@ -423,7 +436,7 @@ exports[`TestsResults overview snapshot 1`] = `
   box-shadow: rgba(0, 0, 0, 0.1) 0px 0px 0px 1px inset;
 }
 
-.emotion-122:disabled {
+.emotion-134:disabled {
   color: #aaa;
 }
 
@@ -502,7 +515,11 @@ exports[`TestsResults overview snapshot 1`] = `
                     <div
                       class="emotion-9"
                     >
-                      Full name
+                      <div
+                        class="emotion-16"
+                      >
+                        Full name
+                      </div>
                     </div>
                   </div>
                 </th>
@@ -519,7 +536,11 @@ exports[`TestsResults overview snapshot 1`] = `
                     <div
                       class="emotion-9"
                     >
-                      Title
+                      <div
+                        class="emotion-16"
+                      >
+                        Title
+                      </div>
                     </div>
                   </div>
                 </th>
@@ -536,25 +557,29 @@ exports[`TestsResults overview snapshot 1`] = `
                     <div
                       class="emotion-9"
                     >
-                      Time(ms)
+                      <div
+                        class="emotion-16"
+                      >
+                        Time(ms)
+                      </div>
                     </div>
                   </div>
                 </th>
               </tr>
             </thead>
             <tbody
-              class="emotion-22"
+              class="emotion-25"
               role="rowgroup"
             >
               <tr
-                class="emotion-23"
+                class="emotion-26"
                 role="row"
               >
                 <td
                   colspan="5"
                 >
                   <div
-                    class="emotion-24"
+                    class="emotion-27"
                     style="cursor: pointer;"
                     title="Toggle Row Expanded"
                   >
@@ -575,7 +600,7 @@ exports[`TestsResults overview snapshot 1`] = `
                     </svg>
                      
                     <span
-                      class="emotion-25"
+                      class="emotion-28"
                     >
                       Table.test.ts(12 tests)
                     </span>
@@ -583,21 +608,21 @@ exports[`TestsResults overview snapshot 1`] = `
                 </td>
               </tr>
               <tr
-                class="emotion-23"
+                class="emotion-26"
                 role="row"
               >
                 <td
-                  class="emotion-27"
+                  class="emotion-30"
                   role="cell"
                   style="width: 20px;"
                 />
                 <td
-                  class="emotion-27"
+                  class="emotion-30"
                   role="cell"
                   style="width: 150px;"
                 >
                   <span
-                    class="emotion-29"
+                    class="emotion-32"
                   >
                     <span
                       class="emotion-6"
@@ -609,53 +634,55 @@ exports[`TestsResults overview snapshot 1`] = `
                   </span>
                 </td>
                 <td
-                  class="emotion-27"
+                  class="emotion-30"
                   role="cell"
                   style="width: 150px;"
                 >
-                  <div>
+                  <div
+                    class="emotion-35"
+                  >
                     Table
                   </div>
                 </td>
                 <td
-                  class="emotion-27"
+                  class="emotion-30"
                   role="cell"
                   style="width: 150px;"
                 >
                   <div
-                    class="emotion-33"
+                    class="emotion-37"
                   >
                     overview
                   </div>
                 </td>
                 <td
-                  class="emotion-27"
+                  class="emotion-30"
                   role="cell"
                   style="width: 150px;"
                 >
                   <div
-                    class="emotion-35"
+                    class="emotion-39"
                   >
                     196
                   </div>
                 </td>
               </tr>
               <tr
-                class="emotion-23"
+                class="emotion-26"
                 role="row"
               >
                 <td
-                  class="emotion-27"
+                  class="emotion-30"
                   role="cell"
                   style="width: 20px;"
                 />
                 <td
-                  class="emotion-27"
+                  class="emotion-30"
                   role="cell"
                   style="width: 150px;"
                 >
                   <span
-                    class="emotion-29"
+                    class="emotion-32"
                   >
                     <span
                       class="emotion-6"
@@ -667,59 +694,61 @@ exports[`TestsResults overview snapshot 1`] = `
                   </span>
                 </td>
                 <td
-                  class="emotion-27"
+                  class="emotion-30"
                   role="cell"
                   style="width: 150px;"
                 >
-                  <div>
+                  <div
+                    class="emotion-35"
+                  >
                     Table
                   </div>
                 </td>
                 <td
-                  class="emotion-27"
+                  class="emotion-30"
                   role="cell"
                   style="width: 150px;"
                 >
                   <div
-                    class="emotion-33"
+                    class="emotion-37"
                   >
                     noHeader
                   </div>
                 </td>
                 <td
-                  class="emotion-27"
+                  class="emotion-30"
                   role="cell"
                   style="width: 150px;"
                 >
                   <div
-                    class="emotion-35"
+                    class="emotion-39"
                   >
                     91
                   </div>
                 </td>
               </tr>
               <tr
-                class="emotion-23"
+                class="emotion-26"
                 role="row"
               >
                 <td
-                  class="emotion-27"
+                  class="emotion-30"
                   role="cell"
                   style="width: 20px;"
                 />
                 <td
-                  class="emotion-27"
+                  class="emotion-30"
                   role="cell"
                   style="width: 150px;"
                 >
                   <span
-                    class="emotion-49"
+                    class="emotion-54"
                   >
                     <span
                       class="emotion-6"
                     >
                       <div
-                        class="emotion-51"
+                        class="emotion-56"
                         style="cursor: pointer;"
                         title="Toggle Row Expanded"
                       >
@@ -747,53 +776,55 @@ exports[`TestsResults overview snapshot 1`] = `
                   </span>
                 </td>
                 <td
-                  class="emotion-27"
+                  class="emotion-30"
                   role="cell"
                   style="width: 150px;"
                 >
-                  <div>
+                  <div
+                    class="emotion-35"
+                  >
                     Table
                   </div>
                 </td>
                 <td
-                  class="emotion-27"
+                  class="emotion-30"
                   role="cell"
                   style="width: 150px;"
                 >
                   <div
-                    class="emotion-33"
+                    class="emotion-37"
                   >
                     editing
                   </div>
                 </td>
                 <td
-                  class="emotion-27"
+                  class="emotion-30"
                   role="cell"
                   style="width: 150px;"
                 >
                   <div
-                    class="emotion-35"
+                    class="emotion-39"
                   >
                     33
                   </div>
                 </td>
               </tr>
               <tr
-                class="emotion-23"
+                class="emotion-26"
                 role="row"
               >
                 <td
-                  class="emotion-27"
+                  class="emotion-30"
                   role="cell"
                   style="width: 20px;"
                 />
                 <td
-                  class="emotion-27"
+                  class="emotion-30"
                   role="cell"
                   style="width: 150px;"
                 >
                   <span
-                    class="emotion-60"
+                    class="emotion-66"
                   >
                     <span
                       class="emotion-6"
@@ -805,53 +836,55 @@ exports[`TestsResults overview snapshot 1`] = `
                   </span>
                 </td>
                 <td
-                  class="emotion-27"
+                  class="emotion-30"
                   role="cell"
                   style="width: 150px;"
                 >
-                  <div>
+                  <div
+                    class="emotion-35"
+                  >
                     Table
                   </div>
                 </td>
                 <td
-                  class="emotion-27"
+                  class="emotion-30"
                   role="cell"
                   style="width: 150px;"
                 >
                   <div
-                    class="emotion-33"
+                    class="emotion-37"
                   >
                     disable
                   </div>
                 </td>
                 <td
-                  class="emotion-27"
+                  class="emotion-30"
                   role="cell"
                   style="width: 150px;"
                 >
                   <div
-                    class="emotion-35"
+                    class="emotion-39"
                   >
                     33
                   </div>
                 </td>
               </tr>
               <tr
-                class="emotion-23"
+                class="emotion-26"
                 role="row"
               >
                 <td
-                  class="emotion-27"
+                  class="emotion-30"
                   role="cell"
                   style="width: 20px;"
                 />
                 <td
-                  class="emotion-27"
+                  class="emotion-30"
                   role="cell"
                   style="width: 150px;"
                 >
                   <span
-                    class="emotion-70"
+                    class="emotion-77"
                   >
                     <span
                       class="emotion-6"
@@ -863,53 +896,55 @@ exports[`TestsResults overview snapshot 1`] = `
                   </span>
                 </td>
                 <td
-                  class="emotion-27"
+                  class="emotion-30"
                   role="cell"
                   style="width: 150px;"
                 >
-                  <div>
+                  <div
+                    class="emotion-35"
+                  >
                     Table
                   </div>
                 </td>
                 <td
-                  class="emotion-27"
+                  class="emotion-30"
                   role="cell"
                   style="width: 150px;"
                 >
                   <div
-                    class="emotion-33"
+                    class="emotion-37"
                   >
                     pending
                   </div>
                 </td>
                 <td
-                  class="emotion-27"
+                  class="emotion-30"
                   role="cell"
                   style="width: 150px;"
                 >
                   <div
-                    class="emotion-35"
+                    class="emotion-39"
                   >
                     33
                   </div>
                 </td>
               </tr>
               <tr
-                class="emotion-23"
+                class="emotion-26"
                 role="row"
               >
                 <td
-                  class="emotion-27"
+                  class="emotion-30"
                   role="cell"
                   style="width: 20px;"
                 />
                 <td
-                  class="emotion-27"
+                  class="emotion-30"
                   role="cell"
                   style="width: 150px;"
                 >
                   <span
-                    class="emotion-80"
+                    class="emotion-88"
                   >
                     <span
                       class="emotion-6"
@@ -921,53 +956,55 @@ exports[`TestsResults overview snapshot 1`] = `
                   </span>
                 </td>
                 <td
-                  class="emotion-27"
+                  class="emotion-30"
                   role="cell"
                   style="width: 150px;"
                 >
-                  <div>
+                  <div
+                    class="emotion-35"
+                  >
                     Table
                   </div>
                 </td>
                 <td
-                  class="emotion-27"
+                  class="emotion-30"
                   role="cell"
                   style="width: 150px;"
                 >
                   <div
-                    class="emotion-33"
+                    class="emotion-37"
                   >
                     skipped
                   </div>
                 </td>
                 <td
-                  class="emotion-27"
+                  class="emotion-30"
                   role="cell"
                   style="width: 150px;"
                 >
                   <div
-                    class="emotion-35"
+                    class="emotion-39"
                   >
                     33
                   </div>
                 </td>
               </tr>
               <tr
-                class="emotion-23"
+                class="emotion-26"
                 role="row"
               >
                 <td
-                  class="emotion-27"
+                  class="emotion-30"
                   role="cell"
                   style="width: 20px;"
                 />
                 <td
-                  class="emotion-27"
+                  class="emotion-30"
                   role="cell"
                   style="width: 150px;"
                 >
                   <span
-                    class="emotion-90"
+                    class="emotion-99"
                   >
                     <span
                       class="emotion-6"
@@ -979,53 +1016,55 @@ exports[`TestsResults overview snapshot 1`] = `
                   </span>
                 </td>
                 <td
-                  class="emotion-27"
+                  class="emotion-30"
                   role="cell"
                   style="width: 150px;"
                 >
-                  <div>
+                  <div
+                    class="emotion-35"
+                  >
                     Table
                   </div>
                 </td>
                 <td
-                  class="emotion-27"
+                  class="emotion-30"
                   role="cell"
                   style="width: 150px;"
                 >
                   <div
-                    class="emotion-33"
+                    class="emotion-37"
                   >
                     todo
                   </div>
                 </td>
                 <td
-                  class="emotion-27"
+                  class="emotion-30"
                   role="cell"
                   style="width: 150px;"
                 >
                   <div
-                    class="emotion-35"
+                    class="emotion-39"
                   >
                     33
                   </div>
                 </td>
               </tr>
               <tr
-                class="emotion-23"
+                class="emotion-26"
                 role="row"
               >
                 <td
-                  class="emotion-27"
+                  class="emotion-30"
                   role="cell"
                   style="width: 20px;"
                 />
                 <td
-                  class="emotion-27"
+                  class="emotion-30"
                   role="cell"
                   style="width: 150px;"
                 >
                   <span
-                    class="emotion-29"
+                    class="emotion-32"
                   >
                     <span
                       class="emotion-6"
@@ -1037,53 +1076,55 @@ exports[`TestsResults overview snapshot 1`] = `
                   </span>
                 </td>
                 <td
-                  class="emotion-27"
+                  class="emotion-30"
                   role="cell"
                   style="width: 150px;"
                 >
-                  <div>
+                  <div
+                    class="emotion-35"
+                  >
                     Table
                   </div>
                 </td>
                 <td
-                  class="emotion-27"
+                  class="emotion-30"
                   role="cell"
                   style="width: 150px;"
                 >
                   <div
-                    class="emotion-33"
+                    class="emotion-37"
                   >
                     rowSelect
                   </div>
                 </td>
                 <td
-                  class="emotion-27"
+                  class="emotion-30"
                   role="cell"
                   style="width: 150px;"
                 >
                   <div
-                    class="emotion-35"
+                    class="emotion-39"
                   >
                     144
                   </div>
                 </td>
               </tr>
               <tr
-                class="emotion-23"
+                class="emotion-26"
                 role="row"
               >
                 <td
-                  class="emotion-27"
+                  class="emotion-30"
                   role="cell"
                   style="width: 20px;"
                 />
                 <td
-                  class="emotion-27"
+                  class="emotion-30"
                   role="cell"
                   style="width: 150px;"
                 >
                   <span
-                    class="emotion-29"
+                    class="emotion-32"
                   >
                     <span
                       class="emotion-6"
@@ -1095,32 +1136,34 @@ exports[`TestsResults overview snapshot 1`] = `
                   </span>
                 </td>
                 <td
-                  class="emotion-27"
+                  class="emotion-30"
                   role="cell"
                   style="width: 150px;"
                 >
-                  <div>
+                  <div
+                    class="emotion-35"
+                  >
                     Table
                   </div>
                 </td>
                 <td
-                  class="emotion-27"
+                  class="emotion-30"
                   role="cell"
                   style="width: 150px;"
                 >
                   <div
-                    class="emotion-33"
+                    class="emotion-37"
                   >
                     pagination
                   </div>
                 </td>
                 <td
-                  class="emotion-27"
+                  class="emotion-30"
                   role="cell"
                   style="width: 150px;"
                 >
                   <div
-                    class="emotion-35"
+                    class="emotion-39"
                   >
                     169
                   </div>
@@ -1129,53 +1172,53 @@ exports[`TestsResults overview snapshot 1`] = `
             </tbody>
           </table>
           <div
-            class="emotion-117"
+            class="emotion-129"
           >
             <div
-              class="emotion-118"
+              class="emotion-130"
             >
               total 12 tests
             </div>
             <div
-              class="emotion-119"
+              class="emotion-131"
             >
               <div
-                class="emotion-120"
+                class="emotion-132"
               >
                 <div
-                  class="emotion-121"
+                  class="emotion-133"
                 >
                   <button
-                    class="emotion-122"
+                    class="emotion-134"
                     disabled=""
                   >
                     &lt;&lt;
                   </button>
                 </div>
                 <div
-                  class="emotion-121"
+                  class="emotion-133"
                 >
                   <button
-                    class="emotion-122"
+                    class="emotion-134"
                     disabled=""
                   >
                     &lt;
                   </button>
                 </div>
                 <div
-                  class="emotion-121"
+                  class="emotion-133"
                 >
                   <button
-                    class="emotion-122"
+                    class="emotion-134"
                   >
                     &gt;
                   </button>
                 </div>
                 <div
-                  class="emotion-121"
+                  class="emotion-133"
                 >
                   <button
-                    class="emotion-122"
+                    class="emotion-134"
                   >
                     &gt;&gt;
                   </button>
@@ -1330,26 +1373,33 @@ exports[`TestsResults pagination 0 snapshot 1`] = `
   margin: 0;
   min-width: 0;
   margin-right: 4px;
+  -webkit-flex: 1;
+  -ms-flex: 1;
+  flex: 1;
+}
+
+.emotion-16 {
+  text-align: center;
 }
 
-.emotion-22 {
+.emotion-25 {
   box-sizing: border-box;
   margin: 0;
   min-width: 0;
 }
 
-.emotion-22 tr:last-of-type {
+.emotion-25 tr:last-of-type {
   border-bottom: 0;
 }
 
-.emotion-23 {
+.emotion-26 {
   box-sizing: border-box;
   margin: 0;
   min-width: 0;
   border-bottom: 1px solid rgba(0, 0, 0, 0.1);
 }
 
-.emotion-24 {
+.emotion-27 {
   box-sizing: border-box;
   margin: 0;
   min-width: 0;
@@ -1373,7 +1423,7 @@ exports[`TestsResults pagination 0 snapshot 1`] = `
   display: flex;
 }
 
-.emotion-25 {
+.emotion-28 {
   box-sizing: border-box;
   margin: 0;
   min-width: 0;
@@ -1381,7 +1431,7 @@ exports[`TestsResults pagination 0 snapshot 1`] = `
   margin-right: 8px;
 }
 
-.emotion-27 {
+.emotion-30 {
   box-sizing: border-box;
   margin: 0;
   min-width: 0;
@@ -1392,7 +1442,7 @@ exports[`TestsResults pagination 0 snapshot 1`] = `
   border-bottom: 0;
 }
 
-.emotion-29 {
+.emotion-32 {
   box-sizing: border-box;
   margin: 0;
   min-width: 0;
@@ -1405,15 +1455,21 @@ exports[`TestsResults pagination 0 snapshot 1`] = `
   border: 2px solid #4caf50;
 }
 
-.emotion-33 {
+.emotion-35 {
+  white-space: nowrap;
+  text-overflow: ellipsis;
+  max-width: 400px;
+}
+
+.emotion-37 {
   font-weight: bolder;
 }
 
-.emotion-35 {
+.emotion-39 {
   text-align: end;
 }
 
-.emotion-49 {
+.emotion-54 {
   box-sizing: border-box;
   margin: 0;
   min-width: 0;
@@ -1426,7 +1482,7 @@ exports[`TestsResults pagination 0 snapshot 1`] = `
   border: 2px solid #f44336;
 }
 
-.emotion-51 {
+.emotion-56 {
   display: -webkit-box;
   display: -webkit-flex;
   display: -ms-flexbox;
@@ -1440,7 +1496,7 @@ exports[`TestsResults pagination 0 snapshot 1`] = `
   align-items: center;
 }
 
-.emotion-60 {
+.emotion-66 {
   box-sizing: border-box;
   margin: 0;
   min-width: 0;
@@ -1453,7 +1509,7 @@ exports[`TestsResults pagination 0 snapshot 1`] = `
   border: 2px solid #9ea7ad;
 }
 
-.emotion-70 {
+.emotion-77 {
   box-sizing: border-box;
   margin: 0;
   min-width: 0;
@@ -1466,7 +1522,7 @@ exports[`TestsResults pagination 0 snapshot 1`] = `
   border: 2px solid #fce83a;
 }
 
-.emotion-80 {
+.emotion-88 {
   box-sizing: border-box;
   margin: 0;
   min-width: 0;
@@ -1479,7 +1535,7 @@ exports[`TestsResults pagination 0 snapshot 1`] = `
   border: 2px solid #fab305;
 }
 
-.emotion-87 {
+.emotion-96 {
   box-sizing: border-box;
   margin: 0;
   min-width: 0;
@@ -1502,7 +1558,7 @@ exports[`TestsResults pagination 0 snapshot 1`] = `
   padding-bottom: 8px;
 }
 
-.emotion-88 {
+.emotion-97 {
   box-sizing: border-box;
   margin: 0;
   min-width: 0;
@@ -1521,7 +1577,7 @@ exports[`TestsResults pagination 0 snapshot 1`] = `
   padding-right: 16px;
 }
 
-.emotion-89 {
+.emotion-98 {
   box-sizing: border-box;
   margin: 0;
   min-width: 0;
@@ -1538,7 +1594,7 @@ exports[`TestsResults pagination 0 snapshot 1`] = `
   align-items: center;
 }
 
-.emotion-90 {
+.emotion-99 {
   box-sizing: border-box;
   margin: 0;
   min-width: 0;
@@ -1557,13 +1613,13 @@ exports[`TestsResults pagination 0 snapshot 1`] = `
   padding-right: 8px;
 }
 
-.emotion-90 button {
+.emotion-99 button {
   width: 50px;
   margin-left: 2px;
   margin-right: 2px;
 }
 
-.emotion-91 {
+.emotion-100 {
   box-sizing: border-box;
   margin: 0;
   min-width: 0;
@@ -1572,7 +1628,7 @@ exports[`TestsResults pagination 0 snapshot 1`] = `
   margin-right: 2px;
 }
 
-.emotion-92 {
+.emotion-101 {
   box-sizing: border-box;
   margin: 0;
   min-width: 0;
@@ -1600,7 +1656,7 @@ exports[`TestsResults pagination 0 snapshot 1`] = `
   box-shadow: rgba(0, 0, 0, 0.1) 0px 0px 0px 1px inset;
 }
 
-.emotion-92:disabled {
+.emotion-101:disabled {
   color: #aaa;
 }
 
@@ -1679,7 +1735,11 @@ exports[`TestsResults pagination 0 snapshot 1`] = `
                     <div
                       class="emotion-9"
                     >
-                      Full name
+                      <div
+                        class="emotion-16"
+                      >
+                        Full name
+                      </div>
                     </div>
                   </div>
                 </th>
@@ -1696,7 +1756,11 @@ exports[`TestsResults pagination 0 snapshot 1`] = `
                     <div
                       class="emotion-9"
                     >
-                      Title
+                      <div
+                        class="emotion-16"
+                      >
+                        Title
+                      </div>
                     </div>
                   </div>
                 </th>
@@ -1713,25 +1777,29 @@ exports[`TestsResults pagination 0 snapshot 1`] = `
                     <div
                       class="emotion-9"
                     >
-                      Time(ms)
+                      <div
+                        class="emotion-16"
+                      >
+                        Time(ms)
+                      </div>
                     </div>
                   </div>
                 </th>
               </tr>
             </thead>
             <tbody
-              class="emotion-22"
+              class="emotion-25"
               role="rowgroup"
             >
               <tr
-                class="emotion-23"
+                class="emotion-26"
                 role="row"
               >
                 <td
                   colspan="5"
                 >
                   <div
-                    class="emotion-24"
+                    class="emotion-27"
                     style="cursor: pointer;"
                     title="Toggle Row Expanded"
                   >
@@ -1752,7 +1820,7 @@ exports[`TestsResults pagination 0 snapshot 1`] = `
                     </svg>
                      
                     <span
-                      class="emotion-25"
+                      class="emotion-28"
                     >
                       Table.test.ts(12 tests)
                     </span>
@@ -1760,21 +1828,21 @@ exports[`TestsResults pagination 0 snapshot 1`] = `
                 </td>
               </tr>
               <tr
-                class="emotion-23"
+                class="emotion-26"
                 role="row"
               >
                 <td
-                  class="emotion-27"
+                  class="emotion-30"
                   role="cell"
                   style="width: 20px;"
                 />
                 <td
-                  class="emotion-27"
+                  class="emotion-30"
                   role="cell"
                   style="width: 150px;"
                 >
                   <span
-                    class="emotion-29"
+                    class="emotion-32"
                   >
                     <span
                       class="emotion-6"
@@ -1786,53 +1854,55 @@ exports[`TestsResults pagination 0 snapshot 1`] = `
                   </span>
                 </td>
                 <td
-                  class="emotion-27"
+                  class="emotion-30"
                   role="cell"
                   style="width: 150px;"
                 >
-                  <div>
+                  <div
+                    class="emotion-35"
+                  >
                     Table
                   </div>
                 </td>
                 <td
-                  class="emotion-27"
+                  class="emotion-30"
                   role="cell"
                   style="width: 150px;"
                 >
                   <div
-                    class="emotion-33"
+                    class="emotion-37"
                   >
                     overview
                   </div>
                 </td>
                 <td
-                  class="emotion-27"
+                  class="emotion-30"
                   role="cell"
                   style="width: 150px;"
                 >
                   <div
-                    class="emotion-35"
+                    class="emotion-39"
                   >
                     196
                   </div>
                 </td>
               </tr>
               <tr
-                class="emotion-23"
+                class="emotion-26"
                 role="row"
               >
                 <td
-                  class="emotion-27"
+                  class="emotion-30"
                   role="cell"
                   style="width: 20px;"
                 />
                 <td
-                  class="emotion-27"
+                  class="emotion-30"
                   role="cell"
                   style="width: 150px;"
                 >
                   <span
-                    class="emotion-29"
+                    class="emotion-32"
                   >
                     <span
                       class="emotion-6"
@@ -1844,59 +1914,61 @@ exports[`TestsResults pagination 0 snapshot 1`] = `
                   </span>
                 </td>
                 <td
-                  class="emotion-27"
+                  class="emotion-30"
                   role="cell"
                   style="width: 150px;"
                 >
-                  <div>
+                  <div
+                    class="emotion-35"
+                  >
                     Table
                   </div>
                 </td>
                 <td
-                  class="emotion-27"
+                  class="emotion-30"
                   role="cell"
                   style="width: 150px;"
                 >
                   <div
-                    class="emotion-33"
+                    class="emotion-37"
                   >
                     noHeader
                   </div>
                 </td>
                 <td
-                  class="emotion-27"
+                  class="emotion-30"
                   role="cell"
                   style="width: 150px;"
                 >
                   <div
-                    class="emotion-35"
+                    class="emotion-39"
                   >
                     91
                   </div>
                 </td>
               </tr>
               <tr
-                class="emotion-23"
+                class="emotion-26"
                 role="row"
               >
                 <td
-                  class="emotion-27"
+                  class="emotion-30"
                   role="cell"
                   style="width: 20px;"
                 />
                 <td
-                  class="emotion-27"
+                  class="emotion-30"
                   role="cell"
                   style="width: 150px;"
                 >
                   <span
-                    class="emotion-49"
+                    class="emotion-54"
                   >
                     <span
                       class="emotion-6"
                     >
                       <div
-                        class="emotion-51"
+                        class="emotion-56"
                         style="cursor: pointer;"
                         title="Toggle Row Expanded"
                       >
@@ -1924,53 +1996,55 @@ exports[`TestsResults pagination 0 snapshot 1`] = `
                   </span>
                 </td>
                 <td
-                  class="emotion-27"
+                  class="emotion-30"
                   role="cell"
                   style="width: 150px;"
                 >
-                  <div>
+                  <div
+                    class="emotion-35"
+                  >
                     Table
                   </div>
                 </td>
                 <td
-                  class="emotion-27"
+                  class="emotion-30"
                   role="cell"
                   style="width: 150px;"
                 >
                   <div
-                    class="emotion-33"
+                    class="emotion-37"
                   >
                     editing
                   </div>
                 </td>
                 <td
-                  class="emotion-27"
+                  class="emotion-30"
                   role="cell"
                   style="width: 150px;"
                 >
                   <div
-                    class="emotion-35"
+                    class="emotion-39"
                   >
                     33
                   </div>
                 </td>
               </tr>
               <tr
-                class="emotion-23"
+                class="emotion-26"
                 role="row"
               >
                 <td
-                  class="emotion-27"
+                  class="emotion-30"
                   role="cell"
                   style="width: 20px;"
                 />
                 <td
-                  class="emotion-27"
+                  class="emotion-30"
                   role="cell"
                   style="width: 150px;"
                 >
                   <span
-                    class="emotion-60"
+                    class="emotion-66"
                   >
                     <span
                       class="emotion-6"
@@ -1982,53 +2056,55 @@ exports[`TestsResults pagination 0 snapshot 1`] = `
                   </span>
                 </td>
                 <td
-                  class="emotion-27"
+                  class="emotion-30"
                   role="cell"
                   style="width: 150px;"
                 >
-                  <div>
+                  <div
+                    class="emotion-35"
+                  >
                     Table
                   </div>
                 </td>
                 <td
-                  class="emotion-27"
+                  class="emotion-30"
                   role="cell"
                   style="width: 150px;"
                 >
                   <div
-                    class="emotion-33"
+                    class="emotion-37"
                   >
                     disable
                   </div>
                 </td>
                 <td
-                  class="emotion-27"
+                  class="emotion-30"
                   role="cell"
                   style="width: 150px;"
                 >
                   <div
-                    class="emotion-35"
+                    class="emotion-39"
                   >
                     33
                   </div>
                 </td>
               </tr>
               <tr
-                class="emotion-23"
+                class="emotion-26"
                 role="row"
               >
                 <td
-                  class="emotion-27"
+                  class="emotion-30"
                   role="cell"
                   style="width: 20px;"
                 />
                 <td
-                  class="emotion-27"
+                  class="emotion-30"
                   role="cell"
                   style="width: 150px;"
                 >
                   <span
-                    class="emotion-70"
+                    class="emotion-77"
                   >
                     <span
                       class="emotion-6"
@@ -2040,53 +2116,55 @@ exports[`TestsResults pagination 0 snapshot 1`] = `
                   </span>
                 </td>
                 <td
-                  class="emotion-27"
+                  class="emotion-30"
                   role="cell"
                   style="width: 150px;"
                 >
-                  <div>
+                  <div
+                    class="emotion-35"
+                  >
                     Table
                   </div>
                 </td>
                 <td
-                  class="emotion-27"
+                  class="emotion-30"
                   role="cell"
                   style="width: 150px;"
                 >
                   <div
-                    class="emotion-33"
+                    class="emotion-37"
                   >
                     pending
                   </div>
                 </td>
                 <td
-                  class="emotion-27"
+                  class="emotion-30"
                   role="cell"
                   style="width: 150px;"
                 >
                   <div
-                    class="emotion-35"
+                    class="emotion-39"
                   >
                     33
                   </div>
                 </td>
               </tr>
               <tr
-                class="emotion-23"
+                class="emotion-26"
                 role="row"
               >
                 <td
-                  class="emotion-27"
+                  class="emotion-30"
                   role="cell"
                   style="width: 20px;"
                 />
                 <td
-                  class="emotion-27"
+                  class="emotion-30"
                   role="cell"
                   style="width: 150px;"
                 >
                   <span
-                    class="emotion-80"
+                    class="emotion-88"
                   >
                     <span
                       class="emotion-6"
@@ -2098,32 +2176,34 @@ exports[`TestsResults pagination 0 snapshot 1`] = `
                   </span>
                 </td>
                 <td
-                  class="emotion-27"
+                  class="emotion-30"
                   role="cell"
                   style="width: 150px;"
                 >
-                  <div>
+                  <div
+                    class="emotion-35"
+                  >
                     Table
                   </div>
                 </td>
                 <td
-                  class="emotion-27"
+                  class="emotion-30"
                   role="cell"
                   style="width: 150px;"
                 >
                   <div
-                    class="emotion-33"
+                    class="emotion-37"
                   >
                     skipped
                   </div>
                 </td>
                 <td
-                  class="emotion-27"
+                  class="emotion-30"
                   role="cell"
                   style="width: 150px;"
                 >
                   <div
-                    class="emotion-35"
+                    class="emotion-39"
                   >
                     33
                   </div>
@@ -2132,53 +2212,53 @@ exports[`TestsResults pagination 0 snapshot 1`] = `
             </tbody>
           </table>
           <div
-            class="emotion-87"
+            class="emotion-96"
           >
             <div
-              class="emotion-88"
+              class="emotion-97"
             >
               Total: 12 records
             </div>
             <div
-              class="emotion-89"
+              class="emotion-98"
             >
               <div
-                class="emotion-90"
+                class="emotion-99"
               >
                 <div
-                  class="emotion-91"
+                  class="emotion-100"
                 >
                   <button
-                    class="emotion-92"
+                    class="emotion-101"
                     disabled=""
                   >
                     &lt;&lt;
                   </button>
                 </div>
                 <div
-                  class="emotion-91"
+                  class="emotion-100"
                 >
                   <button
-                    class="emotion-92"
+                    class="emotion-101"
                     disabled=""
                   >
                     &lt;
                   </button>
                 </div>
                 <div
-                  class="emotion-91"
+                  class="emotion-100"
                 >
                   <button
-                    class="emotion-92"
+                    class="emotion-101"
                   >
                     &gt;
                   </button>
                 </div>
                 <div
-                  class="emotion-91"
+                  class="emotion-100"
                 >
                   <button
-                    class="emotion-92"
+                    class="emotion-101"
                   >
                     &gt;&gt;
                   </button>
@@ -2333,26 +2413,33 @@ exports[`TestsResults pagination 1 snapshot 1`] = `
   margin: 0;
   min-width: 0;
   margin-right: 4px;
+  -webkit-flex: 1;
+  -ms-flex: 1;
+  flex: 1;
 }
 
-.emotion-22 {
+.emotion-16 {
+  text-align: center;
+}
+
+.emotion-25 {
   box-sizing: border-box;
   margin: 0;
   min-width: 0;
 }
 
-.emotion-22 tr:last-of-type {
+.emotion-25 tr:last-of-type {
   border-bottom: 0;
 }
 
-.emotion-23 {
+.emotion-26 {
   box-sizing: border-box;
   margin: 0;
   min-width: 0;
   border-bottom: 1px solid rgba(0, 0, 0, 0.1);
 }
 
-.emotion-24 {
+.emotion-27 {
   box-sizing: border-box;
   margin: 0;
   min-width: 0;
@@ -2376,7 +2463,7 @@ exports[`TestsResults pagination 1 snapshot 1`] = `
   display: flex;
 }
 
-.emotion-25 {
+.emotion-28 {
   box-sizing: border-box;
   margin: 0;
   min-width: 0;
@@ -2384,7 +2471,7 @@ exports[`TestsResults pagination 1 snapshot 1`] = `
   margin-right: 8px;
 }
 
-.emotion-27 {
+.emotion-30 {
   box-sizing: border-box;
   margin: 0;
   min-width: 0;
@@ -2395,7 +2482,7 @@ exports[`TestsResults pagination 1 snapshot 1`] = `
   border-bottom: 0;
 }
 
-.emotion-29 {
+.emotion-32 {
   box-sizing: border-box;
   margin: 0;
   min-width: 0;
@@ -2408,15 +2495,21 @@ exports[`TestsResults pagination 1 snapshot 1`] = `
   border: 2px solid #4caf50;
 }
 
-.emotion-33 {
+.emotion-35 {
+  white-space: nowrap;
+  text-overflow: ellipsis;
+  max-width: 400px;
+}
+
+.emotion-37 {
   font-weight: bolder;
 }
 
-.emotion-35 {
+.emotion-39 {
   text-align: end;
 }
 
-.emotion-49 {
+.emotion-54 {
   box-sizing: border-box;
   margin: 0;
   min-width: 0;
@@ -2429,7 +2522,7 @@ exports[`TestsResults pagination 1 snapshot 1`] = `
   border: 2px solid #f44336;
 }
 
-.emotion-51 {
+.emotion-56 {
   display: -webkit-box;
   display: -webkit-flex;
   display: -ms-flexbox;
@@ -2443,7 +2536,7 @@ exports[`TestsResults pagination 1 snapshot 1`] = `
   align-items: center;
 }
 
-.emotion-60 {
+.emotion-66 {
   box-sizing: border-box;
   margin: 0;
   min-width: 0;
@@ -2456,7 +2549,7 @@ exports[`TestsResults pagination 1 snapshot 1`] = `
   border: 2px solid #9ea7ad;
 }
 
-.emotion-67 {
+.emotion-74 {
   box-sizing: border-box;
   margin: 0;
   min-width: 0;
@@ -2479,7 +2572,7 @@ exports[`TestsResults pagination 1 snapshot 1`] = `
   padding-bottom: 8px;
 }
 
-.emotion-68 {
+.emotion-75 {
   box-sizing: border-box;
   margin: 0;
   min-width: 0;
@@ -2498,7 +2591,7 @@ exports[`TestsResults pagination 1 snapshot 1`] = `
   padding-right: 16px;
 }
 
-.emotion-69 {
+.emotion-76 {
   box-sizing: border-box;
   margin: 0;
   min-width: 0;
@@ -2515,7 +2608,7 @@ exports[`TestsResults pagination 1 snapshot 1`] = `
   align-items: center;
 }
 
-.emotion-70 {
+.emotion-77 {
   box-sizing: border-box;
   margin: 0;
   min-width: 0;
@@ -2534,13 +2627,13 @@ exports[`TestsResults pagination 1 snapshot 1`] = `
   padding-right: 8px;
 }
 
-.emotion-70 button {
+.emotion-77 button {
   width: 50px;
   margin-left: 2px;
   margin-right: 2px;
 }
 
-.emotion-71 {
+.emotion-78 {
   box-sizing: border-box;
   margin: 0;
   min-width: 0;
@@ -2549,7 +2642,7 @@ exports[`TestsResults pagination 1 snapshot 1`] = `
   margin-right: 2px;
 }
 
-.emotion-72 {
+.emotion-79 {
   box-sizing: border-box;
   margin: 0;
   min-width: 0;
@@ -2577,7 +2670,7 @@ exports[`TestsResults pagination 1 snapshot 1`] = `
   box-shadow: rgba(0, 0, 0, 0.1) 0px 0px 0px 1px inset;
 }
 
-.emotion-72:disabled {
+.emotion-79:disabled {
   color: #aaa;
 }
 
@@ -2656,7 +2749,11 @@ exports[`TestsResults pagination 1 snapshot 1`] = `
                     <div
                       class="emotion-9"
                     >
-                      Full name
+                      <div
+                        class="emotion-16"
+                      >
+                        Full name
+                      </div>
                     </div>
                   </div>
                 </th>
@@ -2673,7 +2770,11 @@ exports[`TestsResults pagination 1 snapshot 1`] = `
                     <div
                       class="emotion-9"
                     >
-                      Title
+                      <div
+                        class="emotion-16"
+                      >
+                        Title
+                      </div>
                     </div>
                   </div>
                 </th>
@@ -2690,25 +2791,29 @@ exports[`TestsResults pagination 1 snapshot 1`] = `
                     <div
                       class="emotion-9"
                     >
-                      Time(ms)
+                      <div
+                        class="emotion-16"
+                      >
+                        Time(ms)
+                      </div>
                     </div>
                   </div>
                 </th>
               </tr>
             </thead>
             <tbody
-              class="emotion-22"
+              class="emotion-25"
               role="rowgroup"
             >
               <tr
-                class="emotion-23"
+                class="emotion-26"
                 role="row"
               >
                 <td
                   colspan="5"
                 >
                   <div
-                    class="emotion-24"
+                    class="emotion-27"
                     style="cursor: pointer;"
                     title="Toggle Row Expanded"
                   >
@@ -2729,7 +2834,7 @@ exports[`TestsResults pagination 1 snapshot 1`] = `
                     </svg>
                      
                     <span
-                      class="emotion-25"
+                      class="emotion-28"
                     >
                       Table.test.ts(12 tests)
                     </span>
@@ -2737,21 +2842,21 @@ exports[`TestsResults pagination 1 snapshot 1`] = `
                 </td>
               </tr>
               <tr
-                class="emotion-23"
+                class="emotion-26"
                 role="row"
               >
                 <td
-                  class="emotion-27"
+                  class="emotion-30"
                   role="cell"
                   style="width: 20px;"
                 />
                 <td
-                  class="emotion-27"
+                  class="emotion-30"
                   role="cell"
                   style="width: 150px;"
                 >
                   <span
-                    class="emotion-29"
+                    class="emotion-32"
                   >
                     <span
                       class="emotion-6"
@@ -2763,53 +2868,55 @@ exports[`TestsResults pagination 1 snapshot 1`] = `
                   </span>
                 </td>
                 <td
-                  class="emotion-27"
+                  class="emotion-30"
                   role="cell"
                   style="width: 150px;"
                 >
-                  <div>
+                  <div
+                    class="emotion-35"
+                  >
                     Table
                   </div>
                 </td>
                 <td
-                  class="emotion-27"
+                  class="emotion-30"
                   role="cell"
                   style="width: 150px;"
                 >
                   <div
-                    class="emotion-33"
+                    class="emotion-37"
                   >
                     overview
                   </div>
                 </td>
                 <td
-                  class="emotion-27"
+                  class="emotion-30"
                   role="cell"
                   style="width: 150px;"
                 >
                   <div
-                    class="emotion-35"
+                    class="emotion-39"
                   >
                     196
                   </div>
                 </td>
               </tr>
               <tr
-                class="emotion-23"
+                class="emotion-26"
                 role="row"
               >
                 <td
-                  class="emotion-27"
+                  class="emotion-30"
                   role="cell"
                   style="width: 20px;"
                 />
                 <td
-                  class="emotion-27"
+                  class="emotion-30"
                   role="cell"
                   style="width: 150px;"
                 >
                   <span
-                    class="emotion-29"
+                    class="emotion-32"
                   >
                     <span
                       class="emotion-6"
@@ -2821,59 +2928,61 @@ exports[`TestsResults pagination 1 snapshot 1`] = `
                   </span>
                 </td>
                 <td
-                  class="emotion-27"
+                  class="emotion-30"
                   role="cell"
                   style="width: 150px;"
                 >
-                  <div>
+                  <div
+                    class="emotion-35"
+                  >
                     Table
                   </div>
                 </td>
                 <td
-                  class="emotion-27"
+                  class="emotion-30"
                   role="cell"
                   style="width: 150px;"
                 >
                   <div
-                    class="emotion-33"
+                    class="emotion-37"
                   >
                     noHeader
                   </div>
                 </td>
                 <td
-                  class="emotion-27"
+                  class="emotion-30"
                   role="cell"
                   style="width: 150px;"
                 >
                   <div
-                    class="emotion-35"
+                    class="emotion-39"
                   >
                     91
                   </div>
                 </td>
               </tr>
               <tr
-                class="emotion-23"
+                class="emotion-26"
                 role="row"
               >
                 <td
-                  class="emotion-27"
+                  class="emotion-30"
                   role="cell"
                   style="width: 20px;"
                 />
                 <td
-                  class="emotion-27"
+                  class="emotion-30"
                   role="cell"
                   style="width: 150px;"
                 >
                   <span
-                    class="emotion-49"
+                    class="emotion-54"
                   >
                     <span
                       class="emotion-6"
                     >
                       <div
-                        class="emotion-51"
+                        class="emotion-56"
                         style="cursor: pointer;"
                         title="Toggle Row Expanded"
                       >
@@ -2901,53 +3010,55 @@ exports[`TestsResults pagination 1 snapshot 1`] = `
                   </span>
                 </td>
                 <td
-                  class="emotion-27"
+                  class="emotion-30"
                   role="cell"
                   style="width: 150px;"
                 >
-                  <div>
+                  <div
+                    class="emotion-35"
+                  >
                     Table
                   </div>
                 </td>
                 <td
-                  class="emotion-27"
+                  class="emotion-30"
                   role="cell"
                   style="width: 150px;"
                 >
                   <div
-                    class="emotion-33"
+                    class="emotion-37"
                   >
                     editing
                   </div>
                 </td>
                 <td
-                  class="emotion-27"
+                  class="emotion-30"
                   role="cell"
                   style="width: 150px;"
                 >
                   <div
-                    class="emotion-35"
+                    class="emotion-39"
                   >
                     33
                   </div>
                 </td>
               </tr>
               <tr
-                class="emotion-23"
+                class="emotion-26"
                 role="row"
               >
                 <td
-                  class="emotion-27"
+                  class="emotion-30"
                   role="cell"
                   style="width: 20px;"
                 />
                 <td
-                  class="emotion-27"
+                  class="emotion-30"
                   role="cell"
                   style="width: 150px;"
                 >
                   <span
-                    class="emotion-60"
+                    class="emotion-66"
                   >
                     <span
                       class="emotion-6"
@@ -2959,32 +3070,34 @@ exports[`TestsResults pagination 1 snapshot 1`] = `
                   </span>
                 </td>
                 <td
-                  class="emotion-27"
+                  class="emotion-30"
                   role="cell"
                   style="width: 150px;"
                 >
-                  <div>
+                  <div
+                    class="emotion-35"
+                  >
                     Table
                   </div>
                 </td>
                 <td
-                  class="emotion-27"
+                  class="emotion-30"
                   role="cell"
                   style="width: 150px;"
                 >
                   <div
-                    class="emotion-33"
+                    class="emotion-37"
                   >
                     disable
                   </div>
                 </td>
                 <td
-                  class="emotion-27"
+                  class="emotion-30"
                   role="cell"
                   style="width: 150px;"
                 >
                   <div
-                    class="emotion-35"
+                    class="emotion-39"
                   >
                     33
                   </div>
@@ -2993,53 +3106,53 @@ exports[`TestsResults pagination 1 snapshot 1`] = `
             </tbody>
           </table>
           <div
-            class="emotion-67"
+            class="emotion-74"
           >
             <div
-              class="emotion-68"
+              class="emotion-75"
             >
               Total: 12 records
             </div>
             <div
-              class="emotion-69"
+              class="emotion-76"
             >
               <div
-                class="emotion-70"
+                class="emotion-77"
               >
                 <div
-                  class="emotion-71"
+                  class="emotion-78"
                 >
                   <button
-                    class="emotion-72"
+                    class="emotion-79"
                     disabled=""
                   >
                     &lt;&lt;
                   </button>
                 </div>
                 <div
-                  class="emotion-71"
+                  class="emotion-78"
                 >
                   <button
-                    class="emotion-72"
+                    class="emotion-79"
                     disabled=""
                   >
                     &lt;
                   </button>
                 </div>
                 <div
-                  class="emotion-71"
+                  class="emotion-78"
                 >
                   <button
-                    class="emotion-72"
+                    class="emotion-79"
                   >
                     &gt;
                   </button>
                 </div>
                 <div
-                  class="emotion-71"
+                  class="emotion-78"
                 >
                   <button
-                    class="emotion-72"
+                    class="emotion-79"
                   >
                     &gt;&gt;
                   </button>
@@ -3194,26 +3307,33 @@ exports[`TestsResults pagination 2 snapshot 1`] = `
   margin: 0;
   min-width: 0;
   margin-right: 4px;
+  -webkit-flex: 1;
+  -ms-flex: 1;
+  flex: 1;
+}
+
+.emotion-16 {
+  text-align: center;
 }
 
-.emotion-22 {
+.emotion-25 {
   box-sizing: border-box;
   margin: 0;
   min-width: 0;
 }
 
-.emotion-22 tr:last-of-type {
+.emotion-25 tr:last-of-type {
   border-bottom: 0;
 }
 
-.emotion-23 {
+.emotion-26 {
   box-sizing: border-box;
   margin: 0;
   min-width: 0;
   border-bottom: 1px solid rgba(0, 0, 0, 0.1);
 }
 
-.emotion-24 {
+.emotion-27 {
   box-sizing: border-box;
   margin: 0;
   min-width: 0;
@@ -3237,7 +3357,7 @@ exports[`TestsResults pagination 2 snapshot 1`] = `
   display: flex;
 }
 
-.emotion-25 {
+.emotion-28 {
   box-sizing: border-box;
   margin: 0;
   min-width: 0;
@@ -3245,7 +3365,7 @@ exports[`TestsResults pagination 2 snapshot 1`] = `
   margin-right: 8px;
 }
 
-.emotion-27 {
+.emotion-30 {
   box-sizing: border-box;
   margin: 0;
   min-width: 0;
@@ -3256,7 +3376,7 @@ exports[`TestsResults pagination 2 snapshot 1`] = `
   border-bottom: 0;
 }
 
-.emotion-29 {
+.emotion-32 {
   box-sizing: border-box;
   margin: 0;
   min-width: 0;
@@ -3269,15 +3389,21 @@ exports[`TestsResults pagination 2 snapshot 1`] = `
   border: 2px solid #4caf50;
 }
 
-.emotion-33 {
+.emotion-35 {
+  white-space: nowrap;
+  text-overflow: ellipsis;
+  max-width: 400px;
+}
+
+.emotion-37 {
   font-weight: bolder;
 }
 
-.emotion-35 {
+.emotion-39 {
   text-align: end;
 }
 
-.emotion-49 {
+.emotion-54 {
   box-sizing: border-box;
   margin: 0;
   min-width: 0;
@@ -3290,7 +3416,7 @@ exports[`TestsResults pagination 2 snapshot 1`] = `
   border: 2px solid #f44336;
 }
 
-.emotion-51 {
+.emotion-56 {
   display: -webkit-box;
   display: -webkit-flex;
   display: -ms-flexbox;
@@ -3304,7 +3430,7 @@ exports[`TestsResults pagination 2 snapshot 1`] = `
   align-items: center;
 }
 
-.emotion-60 {
+.emotion-66 {
   box-sizing: border-box;
   margin: 0;
   min-width: 0;
@@ -3317,7 +3443,7 @@ exports[`TestsResults pagination 2 snapshot 1`] = `
   border: 2px solid #9ea7ad;
 }
 
-.emotion-70 {
+.emotion-77 {
   box-sizing: border-box;
   margin: 0;
   min-width: 0;
@@ -3330,7 +3456,7 @@ exports[`TestsResults pagination 2 snapshot 1`] = `
   border: 2px solid #fce83a;
 }
 
-.emotion-77 {
+.emotion-85 {
   box-sizing: border-box;
   margin: 0;
   min-width: 0;
@@ -3353,7 +3479,7 @@ exports[`TestsResults pagination 2 snapshot 1`] = `
   padding-bottom: 8px;
 }
 
-.emotion-78 {
+.emotion-86 {
   box-sizing: border-box;
   margin: 0;
   min-width: 0;
@@ -3372,7 +3498,7 @@ exports[`TestsResults pagination 2 snapshot 1`] = `
   padding-right: 16px;
 }
 
-.emotion-79 {
+.emotion-87 {
   box-sizing: border-box;
   margin: 0;
   min-width: 0;
@@ -3389,7 +3515,7 @@ exports[`TestsResults pagination 2 snapshot 1`] = `
   align-items: center;
 }
 
-.emotion-80 {
+.emotion-88 {
   box-sizing: border-box;
   margin: 0;
   min-width: 0;
@@ -3408,13 +3534,13 @@ exports[`TestsResults pagination 2 snapshot 1`] = `
   padding-right: 8px;
 }
 
-.emotion-80 button {
+.emotion-88 button {
   width: 50px;
   margin-left: 2px;
   margin-right: 2px;
 }
 
-.emotion-81 {
+.emotion-89 {
   box-sizing: border-box;
   margin: 0;
   min-width: 0;
@@ -3423,7 +3549,7 @@ exports[`TestsResults pagination 2 snapshot 1`] = `
   margin-right: 2px;
 }
 
-.emotion-82 {
+.emotion-90 {
   box-sizing: border-box;
   margin: 0;
   min-width: 0;
@@ -3451,7 +3577,7 @@ exports[`TestsResults pagination 2 snapshot 1`] = `
   box-shadow: rgba(0, 0, 0, 0.1) 0px 0px 0px 1px inset;
 }
 
-.emotion-82:disabled {
+.emotion-90:disabled {
   color: #aaa;
 }
 
@@ -3530,7 +3656,11 @@ exports[`TestsResults pagination 2 snapshot 1`] = `
                     <div
                       class="emotion-9"
                     >
-                      Full name
+                      <div
+                        class="emotion-16"
+                      >
+                        Full name
+                      </div>
                     </div>
                   </div>
                 </th>
@@ -3547,7 +3677,11 @@ exports[`TestsResults pagination 2 snapshot 1`] = `
                     <div
                       class="emotion-9"
                     >
-                      Title
+                      <div
+                        class="emotion-16"
+                      >
+                        Title
+                      </div>
                     </div>
                   </div>
                 </th>
@@ -3564,25 +3698,29 @@ exports[`TestsResults pagination 2 snapshot 1`] = `
                     <div
                       class="emotion-9"
                     >
-                      Time(ms)
+                      <div
+                        class="emotion-16"
+                      >
+                        Time(ms)
+                      </div>
                     </div>
                   </div>
                 </th>
               </tr>
             </thead>
             <tbody
-              class="emotion-22"
+              class="emotion-25"
               role="rowgroup"
             >
               <tr
-                class="emotion-23"
+                class="emotion-26"
                 role="row"
               >
                 <td
                   colspan="5"
                 >
                   <div
-                    class="emotion-24"
+                    class="emotion-27"
                     style="cursor: pointer;"
                     title="Toggle Row Expanded"
                   >
@@ -3603,7 +3741,7 @@ exports[`TestsResults pagination 2 snapshot 1`] = `
                     </svg>
                      
                     <span
-                      class="emotion-25"
+                      class="emotion-28"
                     >
                       Table.test.ts(12 tests)
                     </span>
@@ -3611,21 +3749,21 @@ exports[`TestsResults pagination 2 snapshot 1`] = `
                 </td>
               </tr>
               <tr
-                class="emotion-23"
+                class="emotion-26"
                 role="row"
               >
                 <td
-                  class="emotion-27"
+                  class="emotion-30"
                   role="cell"
                   style="width: 20px;"
                 />
                 <td
-                  class="emotion-27"
+                  class="emotion-30"
                   role="cell"
                   style="width: 150px;"
                 >
                   <span
-                    class="emotion-29"
+                    class="emotion-32"
                   >
                     <span
                       class="emotion-6"
@@ -3637,53 +3775,55 @@ exports[`TestsResults pagination 2 snapshot 1`] = `
                   </span>
                 </td>
                 <td
-                  class="emotion-27"
+                  class="emotion-30"
                   role="cell"
                   style="width: 150px;"
                 >
-                  <div>
+                  <div
+                    class="emotion-35"
+                  >
                     Table
                   </div>
                 </td>
                 <td
-                  class="emotion-27"
+                  class="emotion-30"
                   role="cell"
                   style="width: 150px;"
                 >
                   <div
-                    class="emotion-33"
+                    class="emotion-37"
                   >
                     overview
                   </div>
                 </td>
                 <td
-                  class="emotion-27"
+                  class="emotion-30"
                   role="cell"
                   style="width: 150px;"
                 >
                   <div
-                    class="emotion-35"
+                    class="emotion-39"
                   >
                     196
                   </div>
                 </td>
               </tr>
               <tr
-                class="emotion-23"
+                class="emotion-26"
                 role="row"
               >
                 <td
-                  class="emotion-27"
+                  class="emotion-30"
                   role="cell"
                   style="width: 20px;"
                 />
                 <td
-                  class="emotion-27"
+                  class="emotion-30"
                   role="cell"
                   style="width: 150px;"
                 >
                   <span
-                    class="emotion-29"
+                    class="emotion-32"
                   >
                     <span
                       class="emotion-6"
@@ -3695,59 +3835,61 @@ exports[`TestsResults pagination 2 snapshot 1`] = `
                   </span>
                 </td>
                 <td
-                  class="emotion-27"
+                  class="emotion-30"
                   role="cell"
                   style="width: 150px;"
                 >
-                  <div>
+                  <div
+                    class="emotion-35"
+                  >
                     Table
                   </div>
                 </td>
                 <td
-                  class="emotion-27"
+                  class="emotion-30"
                   role="cell"
                   style="width: 150px;"
                 >
                   <div
-                    class="emotion-33"
+                    class="emotion-37"
                   >
                     noHeader
                   </div>
                 </td>
                 <td
-                  class="emotion-27"
+                  class="emotion-30"
                   role="cell"
                   style="width: 150px;"
                 >
                   <div
-                    class="emotion-35"
+                    class="emotion-39"
                   >
                     91
                   </div>
                 </td>
               </tr>
               <tr
-                class="emotion-23"
+                class="emotion-26"
                 role="row"
               >
                 <td
-                  class="emotion-27"
+                  class="emotion-30"
                   role="cell"
                   style="width: 20px;"
                 />
                 <td
-                  class="emotion-27"
+                  class="emotion-30"
                   role="cell"
                   style="width: 150px;"
                 >
                   <span
-                    class="emotion-49"
+                    class="emotion-54"
                   >
                     <span
                       class="emotion-6"
                     >
                       <div
-                        class="emotion-51"
+                        class="emotion-56"
                         style="cursor: pointer;"
                         title="Toggle Row Expanded"
                       >
@@ -3775,53 +3917,55 @@ exports[`TestsResults pagination 2 snapshot 1`] = `
                   </span>
                 </td>
                 <td
-                  class="emotion-27"
+                  class="emotion-30"
                   role="cell"
                   style="width: 150px;"
                 >
-                  <div>
+                  <div
+                    class="emotion-35"
+                  >
                     Table
                   </div>
                 </td>
                 <td
-                  class="emotion-27"
+                  class="emotion-30"
                   role="cell"
                   style="width: 150px;"
                 >
                   <div
-                    class="emotion-33"
+                    class="emotion-37"
                   >
                     editing
                   </div>
                 </td>
                 <td
-                  class="emotion-27"
+                  class="emotion-30"
                   role="cell"
                   style="width: 150px;"
                 >
                   <div
-                    class="emotion-35"
+                    class="emotion-39"
                   >
                     33
                   </div>
                 </td>
               </tr>
               <tr
-                class="emotion-23"
+                class="emotion-26"
                 role="row"
               >
                 <td
-                  class="emotion-27"
+                  class="emotion-30"
                   role="cell"
                   style="width: 20px;"
                 />
                 <td
-                  class="emotion-27"
+                  class="emotion-30"
                   role="cell"
                   style="width: 150px;"
                 >
                   <span
-                    class="emotion-60"
+                    class="emotion-66"
                   >
                     <span
                       class="emotion-6"
@@ -3833,53 +3977,55 @@ exports[`TestsResults pagination 2 snapshot 1`] = `
                   </span>
                 </td>
                 <td
-                  class="emotion-27"
+                  class="emotion-30"
                   role="cell"
                   style="width: 150px;"
                 >
-                  <div>
+                  <div
+                    class="emotion-35"
+                  >
                     Table
                   </div>
                 </td>
                 <td
-                  class="emotion-27"
+                  class="emotion-30"
                   role="cell"
                   style="width: 150px;"
                 >
                   <div
-                    class="emotion-33"
+                    class="emotion-37"
                   >
                     disable
                   </div>
                 </td>
                 <td
-                  class="emotion-27"
+                  class="emotion-30"
                   role="cell"
                   style="width: 150px;"
                 >
                   <div
-                    class="emotion-35"
+                    class="emotion-39"
                   >
                     33
                   </div>
                 </td>
               </tr>
               <tr
-                class="emotion-23"
+                class="emotion-26"
                 role="row"
               >
                 <td
-                  class="emotion-27"
+                  class="emotion-30"
                   role="cell"
                   style="width: 20px;"
                 />
                 <td
-                  class="emotion-27"
+                  class="emotion-30"
                   role="cell"
                   style="width: 150px;"
                 >
                   <span
-                    class="emotion-70"
+                    class="emotion-77"
                   >
                     <span
                       class="emotion-6"
@@ -3891,32 +4037,34 @@ exports[`TestsResults pagination 2 snapshot 1`] = `
                   </span>
                 </td>
                 <td
-                  class="emotion-27"
+                  class="emotion-30"
                   role="cell"
                   style="width: 150px;"
                 >
-                  <div>
+                  <div
+                    class="emotion-35"
+                  >
                     Table
                   </div>
                 </td>
                 <td
-                  class="emotion-27"
+                  class="emotion-30"
                   role="cell"
                   style="width: 150px;"
                 >
                   <div
-                    class="emotion-33"
+                    class="emotion-37"
                   >
                     pending
                   </div>
                 </td>
                 <td
-                  class="emotion-27"
+                  class="emotion-30"
                   role="cell"
                   style="width: 150px;"
                 >
                   <div
-                    class="emotion-35"
+                    class="emotion-39"
                   >
                     33
                   </div>
@@ -3925,53 +4073,53 @@ exports[`TestsResults pagination 2 snapshot 1`] = `
             </tbody>
           </table>
           <div
-            class="emotion-77"
+            class="emotion-85"
           >
             <div
-              class="emotion-78"
+              class="emotion-86"
             >
               Total: 12 records
             </div>
             <div
-              class="emotion-79"
+              class="emotion-87"
             >
               <div
-                class="emotion-80"
+                class="emotion-88"
               >
                 <div
-                  class="emotion-81"
+                  class="emotion-89"
                 >
                   <button
-                    class="emotion-82"
+                    class="emotion-90"
                     disabled=""
                   >
                     &lt;&lt;
                   </button>
                 </div>
                 <div
-                  class="emotion-81"
+                  class="emotion-89"
                 >
                   <button
-                    class="emotion-82"
+                    class="emotion-90"
                     disabled=""
                   >
                     &lt;
                   </button>
                 </div>
                 <div
-                  class="emotion-81"
+                  class="emotion-89"
                 >
                   <button
-                    class="emotion-82"
+                    class="emotion-90"
                   >
                     &gt;
                   </button>
                 </div>
                 <div
-                  class="emotion-81"
+                  class="emotion-89"
                 >
                   <button
-                    class="emotion-82"
+                    class="emotion-90"
                   >
                     &gt;&gt;
                   </button>
@@ -4126,26 +4274,33 @@ exports[`TestsResults pagination 3 snapshot 1`] = `
   margin: 0;
   min-width: 0;
   margin-right: 4px;
+  -webkit-flex: 1;
+  -ms-flex: 1;
+  flex: 1;
 }
 
-.emotion-22 {
+.emotion-16 {
+  text-align: center;
+}
+
+.emotion-25 {
   box-sizing: border-box;
   margin: 0;
   min-width: 0;
 }
 
-.emotion-22 tr:last-of-type {
+.emotion-25 tr:last-of-type {
   border-bottom: 0;
 }
 
-.emotion-23 {
+.emotion-26 {
   box-sizing: border-box;
   margin: 0;
   min-width: 0;
   border-bottom: 1px solid rgba(0, 0, 0, 0.1);
 }
 
-.emotion-24 {
+.emotion-27 {
   box-sizing: border-box;
   margin: 0;
   min-width: 0;
@@ -4169,7 +4324,7 @@ exports[`TestsResults pagination 3 snapshot 1`] = `
   display: flex;
 }
 
-.emotion-25 {
+.emotion-28 {
   box-sizing: border-box;
   margin: 0;
   min-width: 0;
@@ -4177,7 +4332,7 @@ exports[`TestsResults pagination 3 snapshot 1`] = `
   margin-right: 8px;
 }
 
-.emotion-27 {
+.emotion-30 {
   box-sizing: border-box;
   margin: 0;
   min-width: 0;
@@ -4188,7 +4343,7 @@ exports[`TestsResults pagination 3 snapshot 1`] = `
   border-bottom: 0;
 }
 
-.emotion-29 {
+.emotion-32 {
   box-sizing: border-box;
   margin: 0;
   min-width: 0;
@@ -4201,15 +4356,21 @@ exports[`TestsResults pagination 3 snapshot 1`] = `
   border: 2px solid #4caf50;
 }
 
-.emotion-33 {
+.emotion-35 {
+  white-space: nowrap;
+  text-overflow: ellipsis;
+  max-width: 400px;
+}
+
+.emotion-37 {
   font-weight: bolder;
 }
 
-.emotion-35 {
+.emotion-39 {
   text-align: end;
 }
 
-.emotion-49 {
+.emotion-54 {
   box-sizing: border-box;
   margin: 0;
   min-width: 0;
@@ -4222,7 +4383,7 @@ exports[`TestsResults pagination 3 snapshot 1`] = `
   border: 2px solid #f44336;
 }
 
-.emotion-51 {
+.emotion-56 {
   display: -webkit-box;
   display: -webkit-flex;
   display: -ms-flexbox;
@@ -4236,7 +4397,7 @@ exports[`TestsResults pagination 3 snapshot 1`] = `
   align-items: center;
 }
 
-.emotion-60 {
+.emotion-66 {
   box-sizing: border-box;
   margin: 0;
   min-width: 0;
@@ -4249,7 +4410,7 @@ exports[`TestsResults pagination 3 snapshot 1`] = `
   border: 2px solid #9ea7ad;
 }
 
-.emotion-70 {
+.emotion-77 {
   box-sizing: border-box;
   margin: 0;
   min-width: 0;
@@ -4262,7 +4423,7 @@ exports[`TestsResults pagination 3 snapshot 1`] = `
   border: 2px solid #fce83a;
 }
 
-.emotion-80 {
+.emotion-88 {
   box-sizing: border-box;
   margin: 0;
   min-width: 0;
@@ -4275,7 +4436,7 @@ exports[`TestsResults pagination 3 snapshot 1`] = `
   border: 2px solid #fab305;
 }
 
-.emotion-90 {
+.emotion-99 {
   box-sizing: border-box;
   margin: 0;
   min-width: 0;
@@ -4288,7 +4449,7 @@ exports[`TestsResults pagination 3 snapshot 1`] = `
   border: 2px solid #39ccff;
 }
 
-.emotion-97 {
+.emotion-107 {
   box-sizing: border-box;
   margin: 0;
   min-width: 0;
@@ -4311,7 +4472,7 @@ exports[`TestsResults pagination 3 snapshot 1`] = `
   padding-bottom: 8px;
 }
 
-.emotion-98 {
+.emotion-108 {
   box-sizing: border-box;
   margin: 0;
   min-width: 0;
@@ -4330,7 +4491,7 @@ exports[`TestsResults pagination 3 snapshot 1`] = `
   padding-right: 16px;
 }
 
-.emotion-99 {
+.emotion-109 {
   box-sizing: border-box;
   margin: 0;
   min-width: 0;
@@ -4347,7 +4508,7 @@ exports[`TestsResults pagination 3 snapshot 1`] = `
   align-items: center;
 }
 
-.emotion-100 {
+.emotion-110 {
   box-sizing: border-box;
   margin: 0;
   min-width: 0;
@@ -4366,13 +4527,13 @@ exports[`TestsResults pagination 3 snapshot 1`] = `
   padding-right: 8px;
 }
 
-.emotion-100 button {
+.emotion-110 button {
   width: 50px;
   margin-left: 2px;
   margin-right: 2px;
 }
 
-.emotion-101 {
+.emotion-111 {
   box-sizing: border-box;
   margin: 0;
   min-width: 0;
@@ -4381,7 +4542,7 @@ exports[`TestsResults pagination 3 snapshot 1`] = `
   margin-right: 2px;
 }
 
-.emotion-102 {
+.emotion-112 {
   box-sizing: border-box;
   margin: 0;
   min-width: 0;
@@ -4409,7 +4570,7 @@ exports[`TestsResults pagination 3 snapshot 1`] = `
   box-shadow: rgba(0, 0, 0, 0.1) 0px 0px 0px 1px inset;
 }
 
-.emotion-102:disabled {
+.emotion-112:disabled {
   color: #aaa;
 }
 
@@ -4488,7 +4649,11 @@ exports[`TestsResults pagination 3 snapshot 1`] = `
                     <div
                       class="emotion-9"
                     >
-                      Full name
+                      <div
+                        class="emotion-16"
+                      >
+                        Full name
+                      </div>
                     </div>
                   </div>
                 </th>
@@ -4505,7 +4670,11 @@ exports[`TestsResults pagination 3 snapshot 1`] = `
                     <div
                       class="emotion-9"
                     >
-                      Title
+                      <div
+                        class="emotion-16"
+                      >
+                        Title
+                      </div>
                     </div>
                   </div>
                 </th>
@@ -4522,25 +4691,29 @@ exports[`TestsResults pagination 3 snapshot 1`] = `
                     <div
                       class="emotion-9"
                     >
-                      Time(ms)
+                      <div
+                        class="emotion-16"
+                      >
+                        Time(ms)
+                      </div>
                     </div>
                   </div>
                 </th>
               </tr>
             </thead>
             <tbody
-              class="emotion-22"
+              class="emotion-25"
               role="rowgroup"
             >
               <tr
-                class="emotion-23"
+                class="emotion-26"
                 role="row"
               >
                 <td
                   colspan="5"
                 >
                   <div
-                    class="emotion-24"
+                    class="emotion-27"
                     style="cursor: pointer;"
                     title="Toggle Row Expanded"
                   >
@@ -4561,7 +4734,7 @@ exports[`TestsResults pagination 3 snapshot 1`] = `
                     </svg>
                      
                     <span
-                      class="emotion-25"
+                      class="emotion-28"
                     >
                       Table.test.ts(12 tests)
                     </span>
@@ -4569,21 +4742,21 @@ exports[`TestsResults pagination 3 snapshot 1`] = `
                 </td>
               </tr>
               <tr
-                class="emotion-23"
+                class="emotion-26"
                 role="row"
               >
                 <td
-                  class="emotion-27"
+                  class="emotion-30"
                   role="cell"
                   style="width: 20px;"
                 />
                 <td
-                  class="emotion-27"
+                  class="emotion-30"
                   role="cell"
                   style="width: 150px;"
                 >
                   <span
-                    class="emotion-29"
+                    class="emotion-32"
                   >
                     <span
                       class="emotion-6"
@@ -4595,53 +4768,55 @@ exports[`TestsResults pagination 3 snapshot 1`] = `
                   </span>
                 </td>
                 <td
-                  class="emotion-27"
+                  class="emotion-30"
                   role="cell"
                   style="width: 150px;"
                 >
-                  <div>
+                  <div
+                    class="emotion-35"
+                  >
                     Table
                   </div>
                 </td>
                 <td
-                  class="emotion-27"
+                  class="emotion-30"
                   role="cell"
                   style="width: 150px;"
                 >
                   <div
-                    class="emotion-33"
+                    class="emotion-37"
                   >
                     overview
                   </div>
                 </td>
                 <td
-                  class="emotion-27"
+                  class="emotion-30"
                   role="cell"
                   style="width: 150px;"
                 >
                   <div
-                    class="emotion-35"
+                    class="emotion-39"
                   >
                     196
                   </div>
                 </td>
               </tr>
               <tr
-                class="emotion-23"
+                class="emotion-26"
                 role="row"
               >
                 <td
-                  class="emotion-27"
+                  class="emotion-30"
                   role="cell"
                   style="width: 20px;"
                 />
                 <td
-                  class="emotion-27"
+                  class="emotion-30"
                   role="cell"
                   style="width: 150px;"
                 >
                   <span
-                    class="emotion-29"
+                    class="emotion-32"
                   >
                     <span
                       class="emotion-6"
@@ -4653,59 +4828,61 @@ exports[`TestsResults pagination 3 snapshot 1`] = `
                   </span>
                 </td>
                 <td
-                  class="emotion-27"
+                  class="emotion-30"
                   role="cell"
                   style="width: 150px;"
                 >
-                  <div>
+                  <div
+                    class="emotion-35"
+                  >
                     Table
                   </div>
                 </td>
                 <td
-                  class="emotion-27"
+                  class="emotion-30"
                   role="cell"
                   style="width: 150px;"
                 >
                   <div
-                    class="emotion-33"
+                    class="emotion-37"
                   >
                     noHeader
                   </div>
                 </td>
                 <td
-                  class="emotion-27"
+                  class="emotion-30"
                   role="cell"
                   style="width: 150px;"
                 >
                   <div
-                    class="emotion-35"
+                    class="emotion-39"
                   >
                     91
                   </div>
                 </td>
               </tr>
               <tr
-                class="emotion-23"
+                class="emotion-26"
                 role="row"
               >
                 <td
-                  class="emotion-27"
+                  class="emotion-30"
                   role="cell"
                   style="width: 20px;"
                 />
                 <td
-                  class="emotion-27"
+                  class="emotion-30"
                   role="cell"
                   style="width: 150px;"
                 >
                   <span
-                    class="emotion-49"
+                    class="emotion-54"
                   >
                     <span
                       class="emotion-6"
                     >
                       <div
-                        class="emotion-51"
+                        class="emotion-56"
                         style="cursor: pointer;"
                         title="Toggle Row Expanded"
                       >
@@ -4733,53 +4910,55 @@ exports[`TestsResults pagination 3 snapshot 1`] = `
                   </span>
                 </td>
                 <td
-                  class="emotion-27"
+                  class="emotion-30"
                   role="cell"
                   style="width: 150px;"
                 >
-                  <div>
+                  <div
+                    class="emotion-35"
+                  >
                     Table
                   </div>
                 </td>
                 <td
-                  class="emotion-27"
+                  class="emotion-30"
                   role="cell"
                   style="width: 150px;"
                 >
                   <div
-                    class="emotion-33"
+                    class="emotion-37"
                   >
                     editing
                   </div>
                 </td>
                 <td
-                  class="emotion-27"
+                  class="emotion-30"
                   role="cell"
                   style="width: 150px;"
                 >
                   <div
-                    class="emotion-35"
+                    class="emotion-39"
                   >
                     33
                   </div>
                 </td>
               </tr>
               <tr
-                class="emotion-23"
+                class="emotion-26"
                 role="row"
               >
                 <td
-                  class="emotion-27"
+                  class="emotion-30"
                   role="cell"
                   style="width: 20px;"
                 />
                 <td
-                  class="emotion-27"
+                  class="emotion-30"
                   role="cell"
                   style="width: 150px;"
                 >
                   <span
-                    class="emotion-60"
+                    class="emotion-66"
                   >
                     <span
                       class="emotion-6"
@@ -4791,53 +4970,55 @@ exports[`TestsResults pagination 3 snapshot 1`] = `
                   </span>
                 </td>
                 <td
-                  class="emotion-27"
+                  class="emotion-30"
                   role="cell"
                   style="width: 150px;"
                 >
-                  <div>
+                  <div
+                    class="emotion-35"
+                  >
                     Table
                   </div>
                 </td>
                 <td
-                  class="emotion-27"
+                  class="emotion-30"
                   role="cell"
                   style="width: 150px;"
                 >
                   <div
-                    class="emotion-33"
+                    class="emotion-37"
                   >
                     disable
                   </div>
                 </td>
                 <td
-                  class="emotion-27"
+                  class="emotion-30"
                   role="cell"
                   style="width: 150px;"
                 >
                   <div
-                    class="emotion-35"
+                    class="emotion-39"
                   >
                     33
                   </div>
                 </td>
               </tr>
               <tr
-                class="emotion-23"
+                class="emotion-26"
                 role="row"
               >
                 <td
-                  class="emotion-27"
+                  class="emotion-30"
                   role="cell"
                   style="width: 20px;"
                 />
                 <td
-                  class="emotion-27"
+                  class="emotion-30"
                   role="cell"
                   style="width: 150px;"
                 >
                   <span
-                    class="emotion-70"
+                    class="emotion-77"
                   >
                     <span
                       class="emotion-6"
@@ -4849,53 +5030,55 @@ exports[`TestsResults pagination 3 snapshot 1`] = `
                   </span>
                 </td>
                 <td
-                  class="emotion-27"
+                  class="emotion-30"
                   role="cell"
                   style="width: 150px;"
                 >
-                  <div>
+                  <div
+                    class="emotion-35"
+                  >
                     Table
                   </div>
                 </td>
                 <td
-                  class="emotion-27"
+                  class="emotion-30"
                   role="cell"
                   style="width: 150px;"
                 >
                   <div
-                    class="emotion-33"
+                    class="emotion-37"
                   >
                     pending
                   </div>
                 </td>
                 <td
-                  class="emotion-27"
+                  class="emotion-30"
                   role="cell"
                   style="width: 150px;"
                 >
                   <div
-                    class="emotion-35"
+                    class="emotion-39"
                   >
                     33
                   </div>
                 </td>
               </tr>
               <tr
-                class="emotion-23"
+                class="emotion-26"
                 role="row"
               >
                 <td
-                  class="emotion-27"
+                  class="emotion-30"
                   role="cell"
                   style="width: 20px;"
                 />
                 <td
-                  class="emotion-27"
+                  class="emotion-30"
                   role="cell"
                   style="width: 150px;"
                 >
                   <span
-                    class="emotion-80"
+                    class="emotion-88"
                   >
                     <span
                       class="emotion-6"
@@ -4907,53 +5090,55 @@ exports[`TestsResults pagination 3 snapshot 1`] = `
                   </span>
                 </td>
                 <td
-                  class="emotion-27"
+                  class="emotion-30"
                   role="cell"
                   style="width: 150px;"
                 >
-                  <div>
+                  <div
+                    class="emotion-35"
+                  >
                     Table
                   </div>
                 </td>
                 <td
-                  class="emotion-27"
+                  class="emotion-30"
                   role="cell"
                   style="width: 150px;"
                 >
                   <div
-                    class="emotion-33"
+                    class="emotion-37"
                   >
                     skipped
                   </div>
                 </td>
                 <td
-                  class="emotion-27"
+                  class="emotion-30"
                   role="cell"
                   style="width: 150px;"
                 >
                   <div
-                    class="emotion-35"
+                    class="emotion-39"
                   >
                     33
                   </div>
                 </td>
               </tr>
               <tr
-                class="emotion-23"
+                class="emotion-26"
                 role="row"
               >
                 <td
-                  class="emotion-27"
+                  class="emotion-30"
                   role="cell"
                   style="width: 20px;"
                 />
                 <td
-                  class="emotion-27"
+                  class="emotion-30"
                   role="cell"
                   style="width: 150px;"
                 >
                   <span
-                    class="emotion-90"
+                    class="emotion-99"
                   >
                     <span
                       class="emotion-6"
@@ -4965,32 +5150,34 @@ exports[`TestsResults pagination 3 snapshot 1`] = `
                   </span>
                 </td>
                 <td
-                  class="emotion-27"
+                  class="emotion-30"
                   role="cell"
                   style="width: 150px;"
                 >
-                  <div>
+                  <div
+                    class="emotion-35"
+                  >
                     Table
                   </div>
                 </td>
                 <td
-                  class="emotion-27"
+                  class="emotion-30"
                   role="cell"
                   style="width: 150px;"
                 >
                   <div
-                    class="emotion-33"
+                    class="emotion-37"
                   >
                     todo
                   </div>
                 </td>
                 <td
-                  class="emotion-27"
+                  class="emotion-30"
                   role="cell"
                   style="width: 150px;"
                 >
                   <div
-                    class="emotion-35"
+                    class="emotion-39"
                   >
                     33
                   </div>
@@ -4999,53 +5186,53 @@ exports[`TestsResults pagination 3 snapshot 1`] = `
             </tbody>
           </table>
           <div
-            class="emotion-97"
+            class="emotion-107"
           >
             <div
-              class="emotion-98"
+              class="emotion-108"
             >
               Total: 12 records
             </div>
             <div
-              class="emotion-99"
+              class="emotion-109"
             >
               <div
-                class="emotion-100"
+                class="emotion-110"
               >
                 <div
-                  class="emotion-101"
+                  class="emotion-111"
                 >
                   <button
-                    class="emotion-102"
+                    class="emotion-112"
                     disabled=""
                   >
                     &lt;&lt;
                   </button>
                 </div>
                 <div
-                  class="emotion-101"
+                  class="emotion-111"
                 >
                   <button
-                    class="emotion-102"
+                    class="emotion-112"
                     disabled=""
                   >
                     &lt;
                   </button>
                 </div>
                 <div
-                  class="emotion-101"
+                  class="emotion-111"
                 >
                   <button
-                    class="emotion-102"
+                    class="emotion-112"
                   >
                     &gt;
                   </button>
                 </div>
                 <div
-                  class="emotion-101"
+                  class="emotion-111"
                 >
                   <button
-                    class="emotion-102"
+                    class="emotion-112"
                   >
                     &gt;&gt;
                   </button>
@@ -5200,26 +5387,33 @@ exports[`TestsResults pagination 4 snapshot 1`] = `
   margin: 0;
   min-width: 0;
   margin-right: 4px;
+  -webkit-flex: 1;
+  -ms-flex: 1;
+  flex: 1;
+}
+
+.emotion-16 {
+  text-align: center;
 }
 
-.emotion-22 {
+.emotion-25 {
   box-sizing: border-box;
   margin: 0;
   min-width: 0;
 }
 
-.emotion-22 tr:last-of-type {
+.emotion-25 tr:last-of-type {
   border-bottom: 0;
 }
 
-.emotion-23 {
+.emotion-26 {
   box-sizing: border-box;
   margin: 0;
   min-width: 0;
   border-bottom: 1px solid rgba(0, 0, 0, 0.1);
 }
 
-.emotion-24 {
+.emotion-27 {
   box-sizing: border-box;
   margin: 0;
   min-width: 0;
@@ -5243,7 +5437,7 @@ exports[`TestsResults pagination 4 snapshot 1`] = `
   display: flex;
 }
 
-.emotion-25 {
+.emotion-28 {
   box-sizing: border-box;
   margin: 0;
   min-width: 0;
@@ -5251,7 +5445,7 @@ exports[`TestsResults pagination 4 snapshot 1`] = `
   margin-right: 8px;
 }
 
-.emotion-27 {
+.emotion-30 {
   box-sizing: border-box;
   margin: 0;
   min-width: 0;
@@ -5262,7 +5456,7 @@ exports[`TestsResults pagination 4 snapshot 1`] = `
   border-bottom: 0;
 }
 
-.emotion-29 {
+.emotion-32 {
   box-sizing: border-box;
   margin: 0;
   min-width: 0;
@@ -5275,15 +5469,21 @@ exports[`TestsResults pagination 4 snapshot 1`] = `
   border: 2px solid #4caf50;
 }
 
-.emotion-33 {
+.emotion-35 {
+  white-space: nowrap;
+  text-overflow: ellipsis;
+  max-width: 400px;
+}
+
+.emotion-37 {
   font-weight: bolder;
 }
 
-.emotion-35 {
+.emotion-39 {
   text-align: end;
 }
 
-.emotion-49 {
+.emotion-54 {
   box-sizing: border-box;
   margin: 0;
   min-width: 0;
@@ -5296,7 +5496,7 @@ exports[`TestsResults pagination 4 snapshot 1`] = `
   border: 2px solid #f44336;
 }
 
-.emotion-51 {
+.emotion-56 {
   display: -webkit-box;
   display: -webkit-flex;
   display: -ms-flexbox;
@@ -5310,7 +5510,7 @@ exports[`TestsResults pagination 4 snapshot 1`] = `
   align-items: center;
 }
 
-.emotion-60 {
+.emotion-66 {
   box-sizing: border-box;
   margin: 0;
   min-width: 0;
@@ -5323,7 +5523,7 @@ exports[`TestsResults pagination 4 snapshot 1`] = `
   border: 2px solid #9ea7ad;
 }
 
-.emotion-67 {
+.emotion-74 {
   box-sizing: border-box;
   margin: 0;
   min-width: 0;
@@ -5346,7 +5546,7 @@ exports[`TestsResults pagination 4 snapshot 1`] = `
   padding-bottom: 8px;
 }
 
-.emotion-68 {
+.emotion-75 {
   box-sizing: border-box;
   margin: 0;
   min-width: 0;
@@ -5365,7 +5565,7 @@ exports[`TestsResults pagination 4 snapshot 1`] = `
   padding-right: 16px;
 }
 
-.emotion-69 {
+.emotion-76 {
   box-sizing: border-box;
   margin: 0;
   min-width: 0;
@@ -5382,7 +5582,7 @@ exports[`TestsResults pagination 4 snapshot 1`] = `
   align-items: center;
 }
 
-.emotion-70 {
+.emotion-77 {
   box-sizing: border-box;
   margin: 0;
   min-width: 0;
@@ -5401,13 +5601,13 @@ exports[`TestsResults pagination 4 snapshot 1`] = `
   padding-right: 8px;
 }
 
-.emotion-70 button {
+.emotion-77 button {
   width: 50px;
   margin-left: 2px;
   margin-right: 2px;
 }
 
-.emotion-71 {
+.emotion-78 {
   box-sizing: border-box;
   margin: 0;
   min-width: 0;
@@ -5416,7 +5616,7 @@ exports[`TestsResults pagination 4 snapshot 1`] = `
   margin-right: 2px;
 }
 
-.emotion-72 {
+.emotion-79 {
   box-sizing: border-box;
   margin: 0;
   min-width: 0;
@@ -5444,11 +5644,11 @@ exports[`TestsResults pagination 4 snapshot 1`] = `
   box-shadow: rgba(0, 0, 0, 0.1) 0px 0px 0px 1px inset;
 }
 
-.emotion-72:disabled {
+.emotion-79:disabled {
   color: #aaa;
 }
 
-.emotion-79 {
+.emotion-86 {
   box-sizing: border-box;
   margin: 0;
   min-width: 0;
@@ -5531,7 +5731,11 @@ exports[`TestsResults pagination 4 snapshot 1`] = `
                     <div
                       class="emotion-9"
                     >
-                      Full name
+                      <div
+                        class="emotion-16"
+                      >
+                        Full name
+                      </div>
                     </div>
                   </div>
                 </th>
@@ -5548,7 +5752,11 @@ exports[`TestsResults pagination 4 snapshot 1`] = `
                     <div
                       class="emotion-9"
                     >
-                      Title
+                      <div
+                        class="emotion-16"
+                      >
+                        Title
+                      </div>
                     </div>
                   </div>
                 </th>
@@ -5565,25 +5773,29 @@ exports[`TestsResults pagination 4 snapshot 1`] = `
                     <div
                       class="emotion-9"
                     >
-                      Time(ms)
+                      <div
+                        class="emotion-16"
+                      >
+                        Time(ms)
+                      </div>
                     </div>
                   </div>
                 </th>
               </tr>
             </thead>
             <tbody
-              class="emotion-22"
+              class="emotion-25"
               role="rowgroup"
             >
               <tr
-                class="emotion-23"
+                class="emotion-26"
                 role="row"
               >
                 <td
                   colspan="5"
                 >
                   <div
-                    class="emotion-24"
+                    class="emotion-27"
                     style="cursor: pointer;"
                     title="Toggle Row Expanded"
                   >
@@ -5604,7 +5816,7 @@ exports[`TestsResults pagination 4 snapshot 1`] = `
                     </svg>
                      
                     <span
-                      class="emotion-25"
+                      class="emotion-28"
                     >
                       Table.test.ts(12 tests)
                     </span>
@@ -5612,21 +5824,21 @@ exports[`TestsResults pagination 4 snapshot 1`] = `
                 </td>
               </tr>
               <tr
-                class="emotion-23"
+                class="emotion-26"
                 role="row"
               >
                 <td
-                  class="emotion-27"
+                  class="emotion-30"
                   role="cell"
                   style="width: 20px;"
                 />
                 <td
-                  class="emotion-27"
+                  class="emotion-30"
                   role="cell"
                   style="width: 150px;"
                 >
                   <span
-                    class="emotion-29"
+                    class="emotion-32"
                   >
                     <span
                       class="emotion-6"
@@ -5638,53 +5850,55 @@ exports[`TestsResults pagination 4 snapshot 1`] = `
                   </span>
                 </td>
                 <td
-                  class="emotion-27"
+                  class="emotion-30"
                   role="cell"
                   style="width: 150px;"
                 >
-                  <div>
+                  <div
+                    class="emotion-35"
+                  >
                     Table
                   </div>
                 </td>
                 <td
-                  class="emotion-27"
+                  class="emotion-30"
                   role="cell"
                   style="width: 150px;"
                 >
                   <div
-                    class="emotion-33"
+                    class="emotion-37"
                   >
                     overview
                   </div>
                 </td>
                 <td
-                  class="emotion-27"
+                  class="emotion-30"
                   role="cell"
                   style="width: 150px;"
                 >
                   <div
-                    class="emotion-35"
+                    class="emotion-39"
                   >
                     196
                   </div>
                 </td>
               </tr>
               <tr
-                class="emotion-23"
+                class="emotion-26"
                 role="row"
               >
                 <td
-                  class="emotion-27"
+                  class="emotion-30"
                   role="cell"
                   style="width: 20px;"
                 />
                 <td
-                  class="emotion-27"
+                  class="emotion-30"
                   role="cell"
                   style="width: 150px;"
                 >
                   <span
-                    class="emotion-29"
+                    class="emotion-32"
                   >
                     <span
                       class="emotion-6"
@@ -5696,59 +5910,61 @@ exports[`TestsResults pagination 4 snapshot 1`] = `
                   </span>
                 </td>
                 <td
-                  class="emotion-27"
+                  class="emotion-30"
                   role="cell"
                   style="width: 150px;"
                 >
-                  <div>
+                  <div
+                    class="emotion-35"
+                  >
                     Table
                   </div>
                 </td>
                 <td
-                  class="emotion-27"
+                  class="emotion-30"
                   role="cell"
                   style="width: 150px;"
                 >
                   <div
-                    class="emotion-33"
+                    class="emotion-37"
                   >
                     noHeader
                   </div>
                 </td>
                 <td
-                  class="emotion-27"
+                  class="emotion-30"
                   role="cell"
                   style="width: 150px;"
                 >
                   <div
-                    class="emotion-35"
+                    class="emotion-39"
                   >
                     91
                   </div>
                 </td>
               </tr>
               <tr
-                class="emotion-23"
+                class="emotion-26"
                 role="row"
               >
                 <td
-                  class="emotion-27"
+                  class="emotion-30"
                   role="cell"
                   style="width: 20px;"
                 />
                 <td
-                  class="emotion-27"
+                  class="emotion-30"
                   role="cell"
                   style="width: 150px;"
                 >
                   <span
-                    class="emotion-49"
+                    class="emotion-54"
                   >
                     <span
                       class="emotion-6"
                     >
                       <div
-                        class="emotion-51"
+                        class="emotion-56"
                         style="cursor: pointer;"
                         title="Toggle Row Expanded"
                       >
@@ -5776,53 +5992,55 @@ exports[`TestsResults pagination 4 snapshot 1`] = `
                   </span>
                 </td>
                 <td
-                  class="emotion-27"
+                  class="emotion-30"
                   role="cell"
                   style="width: 150px;"
                 >
-                  <div>
+                  <div
+                    class="emotion-35"
+                  >
                     Table
                   </div>
                 </td>
                 <td
-                  class="emotion-27"
+                  class="emotion-30"
                   role="cell"
                   style="width: 150px;"
                 >
                   <div
-                    class="emotion-33"
+                    class="emotion-37"
                   >
                     editing
                   </div>
                 </td>
                 <td
-                  class="emotion-27"
+                  class="emotion-30"
                   role="cell"
                   style="width: 150px;"
                 >
                   <div
-                    class="emotion-35"
+                    class="emotion-39"
                   >
                     33
                   </div>
                 </td>
               </tr>
               <tr
-                class="emotion-23"
+                class="emotion-26"
                 role="row"
               >
                 <td
-                  class="emotion-27"
+                  class="emotion-30"
                   role="cell"
                   style="width: 20px;"
                 />
                 <td
-                  class="emotion-27"
+                  class="emotion-30"
                   role="cell"
                   style="width: 150px;"
                 >
                   <span
-                    class="emotion-60"
+                    class="emotion-66"
                   >
                     <span
                       class="emotion-6"
@@ -5834,32 +6052,34 @@ exports[`TestsResults pagination 4 snapshot 1`] = `
                   </span>
                 </td>
                 <td
-                  class="emotion-27"
+                  class="emotion-30"
                   role="cell"
                   style="width: 150px;"
                 >
-                  <div>
+                  <div
+                    class="emotion-35"
+                  >
                     Table
                   </div>
                 </td>
                 <td
-                  class="emotion-27"
+                  class="emotion-30"
                   role="cell"
                   style="width: 150px;"
                 >
                   <div
-                    class="emotion-33"
+                    class="emotion-37"
                   >
                     disable
                   </div>
                 </td>
                 <td
-                  class="emotion-27"
+                  class="emotion-30"
                   role="cell"
                   style="width: 150px;"
                 >
                   <div
-                    class="emotion-35"
+                    class="emotion-39"
                   >
                     33
                   </div>
@@ -5868,60 +6088,60 @@ exports[`TestsResults pagination 4 snapshot 1`] = `
             </tbody>
           </table>
           <div
-            class="emotion-67"
+            class="emotion-74"
           >
             <div
-              class="emotion-68"
+              class="emotion-75"
             >
               Total: 12 records
             </div>
             <div
-              class="emotion-69"
+              class="emotion-76"
             >
               <div
-                class="emotion-70"
+                class="emotion-77"
               >
                 <div
-                  class="emotion-71"
+                  class="emotion-78"
                 >
                   <button
-                    class="emotion-72"
+                    class="emotion-79"
                     disabled=""
                   >
                     &lt;&lt;
                   </button>
                 </div>
                 <div
-                  class="emotion-71"
+                  class="emotion-78"
                 >
                   <button
-                    class="emotion-72"
+                    class="emotion-79"
                     disabled=""
                   >
                     &lt;
                   </button>
                 </div>
                 <div
-                  class="emotion-71"
+                  class="emotion-78"
                 >
                   <button
-                    class="emotion-72"
+                    class="emotion-79"
                   >
                     &gt;
                   </button>
                 </div>
                 <div
-                  class="emotion-71"
+                  class="emotion-78"
                 >
                   <button
-                    class="emotion-72"
+                    class="emotion-79"
                   >
                     &gt;&gt;
                   </button>
                 </div>
               </div>
               <div
-                class="emotion-79"
+                class="emotion-86"
               >
                 Page 1 of 3
               </div>
diff --git a/ui/components/src/Table/Table.tsx b/ui/components/src/Table/Table.tsx
index 5be173b7e..189fe19c1 100644
--- a/ui/components/src/Table/Table.tsx
+++ b/ui/components/src/Table/Table.tsx
@@ -254,7 +254,9 @@ export function Table<D extends { [key: string]: any }>({
                         alignItems: 'center ',
                       }}
                     >
-                      <Box sx={{ mr: 1 }}>{column.render('Header')}</Box>
+                      <Box sx={{ mr: 1, flex: 1 }}>
+                        {column.render('Header')}
+                      </Box>
                       {sorting &&
                         column.isSorted &&
                         (column.isSortedDesc ? (
diff --git a/ui/components/src/Table/__snapshots__/Table.test.ts.snap b/ui/components/src/Table/__snapshots__/Table.test.ts.snap
index 5b91ca8ec..69225fddd 100644
--- a/ui/components/src/Table/__snapshots__/Table.test.ts.snap
+++ b/ui/components/src/Table/__snapshots__/Table.test.ts.snap
@@ -80,6 +80,9 @@ exports[`Table editing snapshot 1`] = `
   margin: 0;
   min-width: 0;
   margin-right: 4px;
+  -webkit-flex: 1;
+  -ms-flex: 1;
+  flex: 1;
 }
 
 .emotion-6 {
@@ -243,6 +246,9 @@ exports[`Table filterable snapshot 1`] = `
   margin: 0;
   min-width: 0;
   margin-right: 4px;
+  -webkit-flex: 1;
+  -ms-flex: 1;
+  flex: 1;
 }
 
 .emotion-22 {
@@ -793,6 +799,9 @@ exports[`Table grouping snapshot 1`] = `
   margin: 0;
   min-width: 0;
   margin-right: 4px;
+  -webkit-flex: 1;
+  -ms-flex: 1;
+  flex: 1;
 }
 
 .emotion-21 {
@@ -1421,6 +1430,9 @@ exports[`Table overview snapshot 1`] = `
   margin: 0;
   min-width: 0;
   margin-right: 4px;
+  -webkit-flex: 1;
+  -ms-flex: 1;
+  flex: 1;
 }
 
 .emotion-18 {
@@ -1833,6 +1845,9 @@ exports[`Table pagination 0 snapshot 1`] = `
   margin: 0;
   min-width: 0;
   margin-right: 4px;
+  -webkit-flex: 1;
+  -ms-flex: 1;
+  flex: 1;
 }
 
 .emotion-21 {
@@ -2521,6 +2536,9 @@ exports[`Table pagination 1 snapshot 1`] = `
   margin: 0;
   min-width: 0;
   margin-right: 4px;
+  -webkit-flex: 1;
+  -ms-flex: 1;
+  flex: 1;
 }
 
 .emotion-21 {
@@ -3358,6 +3376,9 @@ exports[`Table pagination 2 snapshot 1`] = `
   margin: 0;
   min-width: 0;
   margin-right: 4px;
+  -webkit-flex: 1;
+  -ms-flex: 1;
+  flex: 1;
 }
 
 .emotion-21 {
@@ -4205,6 +4226,9 @@ exports[`Table pagination 3 snapshot 1`] = `
   margin: 0;
   min-width: 0;
   margin-right: 4px;
+  -webkit-flex: 1;
+  -ms-flex: 1;
+  flex: 1;
 }
 
 .emotion-21 {
@@ -4940,6 +4964,9 @@ exports[`Table pagination 4 snapshot 1`] = `
   margin: 0;
   min-width: 0;
   margin-right: 4px;
+  -webkit-flex: 1;
+  -ms-flex: 1;
+  flex: 1;
 }
 
 .emotion-21 {
@@ -5975,6 +6002,9 @@ exports[`Table rowSelect snapshot 1`] = `
   margin: 0;
   min-width: 0;
   margin-right: 4px;
+  -webkit-flex: 1;
+  -ms-flex: 1;
+  flex: 1;
 }
 
 .emotion-6 {
@@ -6833,6 +6863,9 @@ exports[`Table sortable snapshot 1`] = `
   margin: 0;
   min-width: 0;
   margin-right: 4px;
+  -webkit-flex: 1;
+  -ms-flex: 1;
+  flex: 1;
 }
 
 .emotion-21 {