fix: table header centered labels

ccontrols · May 9, 2021 · 7e32468 · 7e32468
1 parent 44047f7
commit 7e32468
Show file tree

Hide file tree

Showing 16 changed files with 958 additions and 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
@@ -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/...don-stats/src/ui/AttributesUsageDetails/__snapshots__/AttributesUsageDetails.test.ts.snap b/...don-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/...ins/addon-stats/src/ui/AttributesUsageList/__snapshots__/AttributesUsageList.test.ts.snap b/...ins/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
@@ -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/...addon-stats/src/ui/ComponentUsageDetails/__snapshots__/ComponentUsageDetails.test.ts.snap b/...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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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: {