chore(html): consistent padding between nav link content (microsoft#36816)

Author: agg23

packages/html-reporter/src/common.css

@@ -203,7 +203,7 @@ article, aside, details, figcaption, figure, footer, header, main, menu, nav, se
   flex: none;
   position: relative;
   float: left;
-  padding: 5px 10px;
+  padding: 5px 8px;
   font-weight: 500;
   line-height: 20px;
   color: var(--color-fg-default);
@@ -228,6 +228,14 @@ article, aside, details, figcaption, figure, footer, header, main, menu, nav, se
   margin-left: -1px;
 }
 
+.subnav-item .octicon {
+  margin-right: 8px;
+}
+
+.subnav-item-label {
+  margin-right: 8px;
+}
+
 .counter {
   display: inline-block;
   min-width: 20px;
@@ -293,7 +301,6 @@ article, aside, details, figcaption, figure, footer, header, main, menu, nav, se
   }
 
   .subnav-item {
-    padding: 5px 3px;
     border: none;
   }
 

packages/html-reporter/src/headerView.spec.tsx

@@ -38,8 +38,8 @@ test('should render counters', async ({ mount }) => {
   await expect(component.locator('a', { hasText: 'Skipped' }).locator('.counter')).toHaveText('10');
   await expect(component).toMatchAriaSnapshot(`
     - navigation:
-      - link "All 90"
-      - text: Passed 42 Failed 31 Flaky 17 Skipped 10
+      - link "All90"
+      - text: Passed42 Failed31 Flaky17 Skipped10
   `);
 });
 

packages/html-reporter/src/headerView.tsx

@@ -85,19 +85,27 @@ const StatsNavView: React.FC<{
   const q = searchParams.get('q')?.toString() || '';
   return <nav>
     <Link className='subnav-item' href='#?'>
-      All <span className='d-inline counter'>{stats.total - stats.skipped}</span>
+      <span className='subnav-item-label'>All</span>
+      <span className='d-inline counter'>{stats.total - stats.skipped}</span>
     </Link>
     <Link className='subnav-item' click={filterWithQuery(q, 's:passed', false)} ctrlClick={filterWithQuery(q, 's:passed', true)}>
-      Passed <span className='d-inline counter'>{stats.expected}</span>
+      <span className='subnav-item-label'>Passed</span>
+      <span className='d-inline counter'>{stats.expected}</span>
     </Link>
     <Link className='subnav-item' click={filterWithQuery(q, 's:failed', false)} ctrlClick={filterWithQuery(q, 's:failed', true)}>
-      {!!stats.unexpected && statusIcon('unexpected')} Failed <span className='d-inline counter'>{stats.unexpected}</span>
+      {!!stats.unexpected && statusIcon('unexpected')}
+      <span className='subnav-item-label'>Failed</span>
+      <span className='d-inline counter'>{stats.unexpected}</span>
     </Link>
     <Link className='subnav-item' click={filterWithQuery(q, 's:flaky', false)} ctrlClick={filterWithQuery(q, 's:flaky', true)}>
-      {!!stats.flaky && statusIcon('flaky')} Flaky <span className='d-inline counter'>{stats.flaky}</span>
+      {!!stats.flaky && statusIcon('flaky')}
+      <span className='subnav-item-label'>Flaky</span>
+      <span className='d-inline counter'>{stats.flaky}</span>
     </Link>
     <Link className='subnav-item' click={filterWithQuery(q, 's:skipped', false)} ctrlClick={filterWithQuery(q, 's:skipped', true)}>
-      {!!stats.skipped && statusIcon('skipped')} Skipped <span className='d-inline counter'>{stats.skipped}</span>
+      {!!stats.skipped && statusIcon('skipped')}
+      <span className='subnav-item-label'>Skipped</span>
+      <span className='d-inline counter'>{stats.skipped}</span>
     </Link>
   </nav>;
 };