fix(html): align prev/next with the group title (#33462)

packages/html-reporter/src/common.css

@@ -46,6 +46,10 @@ svg {
   position: relative;
 }
 
+.hidden {
+  visibility: hidden;
+}
+
 .d-flex {
   display: flex !important;
 }

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

@@ -154,7 +154,7 @@ const resultWithAttachment: TestResult = {
 const attachmentLinkRenderingTestCase: TestCase = {
   testId: 'testid',
   title: 'My test',
-  path: [],
+  path: ['group'],
   projectName: 'chromium',
   location: { file: 'test.spec.ts', line: 42, column: 0 },
   tags: [],
@@ -206,6 +206,7 @@ test('should correctly render links in attachment name', async ({ mount }) => {
 test('should correctly render prev and next', async ({ mount }) => {
   const component = await mount(<TestCaseView projectNames={['chromium', 'webkit']} test={attachmentLinkRenderingTestCase} prev={testCaseSummary} next={testCaseSummary} run={0} anchor=''></TestCaseView>);
   await expect(component).toMatchAriaSnapshot(`
+    - text: group
     - link "« previous"
     - link "next »"
     - text: "My test test.spec.ts:42 10ms"

packages/html-reporter/src/testCaseView.tsx

@@ -51,12 +51,13 @@ export const TestCaseView: React.FC<{
   }, [test?.annotations]);
 
   return <div className='test-case-column vbox'>
-    <div className='hbox'>
-      {prev && <Link href={`#?testId=${prev.testId}${filterParam}`}>« previous</Link>}
+    {test && <div className='hbox'>
+      <div className='test-case-path'>{test.path.join(' › ')}</div>
       <div style={{ flex: 'auto' }}></div>
-      {next && <Link href={`#?testId=${next.testId}${filterParam}`}>next »</Link>}
-    </div>
-    {test && <div className='test-case-path'>{test.path.join(' › ')}</div>}
+      <div className={clsx(!prev && 'hidden')}><Link href={`#?testId=${prev?.testId}${filterParam}`}>« previous</Link></div>
+      <div style={{ width: 10 }}></div>
+      <div className={clsx(!next && 'hidden')}><Link href={`#?testId=${next?.testId}${filterParam}`}>next »</Link></div>
+    </div>}
     {test && <div className='test-case-title'>{test?.title}</div>}
     {test && <div className='hbox'>
       <div className='test-case-location'>