diff --git a/packages/html-reporter/src/common.css b/packages/html-reporter/src/common.css
index f9cb474524..0f26ffd022 100644
--- a/packages/html-reporter/src/common.css
+++ b/packages/html-reporter/src/common.css
@@ -273,4 +273,9 @@ article, aside, details, figcaption, figure, footer, header, main, menu, nav, se
     padding: 5px 3px;
     border: none;
   }
+
+  .subnav-search-input {
+    border-left: 0;
+    border-right: 0;
+  }
 }
diff --git a/packages/html-reporter/src/icons.tsx b/packages/html-reporter/src/icons.tsx
index 234be15f1a..86376bdab4 100644
--- a/packages/html-reporter/src/icons.tsx
+++ b/packages/html-reporter/src/icons.tsx
@@ -86,20 +86,20 @@ export const commit = () => {
 };
 
 export const image = () => {
-  return <svg className='octicon' style={{ color: 'var(--color-fg-subtle)' }} viewBox='0 0 16 16' version='1.1' width='16' height='16' aria-hidden='true'>
-    <path fillRule='evenodd' d='M1.75 2.5a.25.25 0 00-.25.25v10.5c0 .138.112.25.25.25h.94a.76.76 0 01.03-.03l6.077-6.078a1.75 1.75 0 012.412-.06L14.5 10.31V2.75a.25.25 0 00-.25-.25H1.75zm12.5 11H4.81l5.048-5.047a.25.25 0 01.344-.009l4.298 3.889v.917a.25.25 0 01-.25.25zm1.75-.25V2.75A1.75 1.75 0 0014.25 1H1.75A1.75 1.75 0 000 2.75v10.5C0 14.216.784 15 1.75 15h12.5A1.75 1.75 0 0016 13.25zM5.5 6a.5.5 0 11-1 0 .5.5 0 011 0zM7 6a2 2 0 11-4 0 2 2 0 014 0z'></path>
+  return <svg className='octicon' viewBox='0 0 48 48' version='1.1' width='20' height='20' aria-hidden='true'>
+    <path xmlns="http://www.w3.org/2000/svg" d="M11.85 32H36.2l-7.35-9.95-6.55 8.7-4.6-6.45ZM7 40q-1.2 0-2.1-.9Q4 38.2 4 37V11q0-1.2.9-2.1Q5.8 8 7 8h34q1.2 0 2.1.9.9.9.9 2.1v26q0 1.2-.9 2.1-.9.9-2.1.9Zm0-29v26-26Zm34 26V11H7v26Z"/>
   </svg>;
 };
 
 export const video = () => {
-  return <svg className='octicon' style={{ color: 'var(--color-fg-subtle)' }} viewBox='0 0 16 16' version='1.1' width='16' height='16' aria-hidden='true'>
-    <path fill-rule='evenodd' d='M1.5 8a6.5 6.5 0 1113 0 6.5 6.5 0 01-13 0zM8 0a8 8 0 100 16A8 8 0 008 0zM6.379 5.227A.25.25 0 006 5.442v5.117a.25.25 0 00.379.214l4.264-2.559a.25.25 0 000-.428L6.379 5.227z'></path>
+  return <svg className='octicon' viewBox='0 0 48 48' version='1.1' width='20' height='20' aria-hidden='true'>
+    <path xmlns="http://www.w3.org/2000/svg" d="m19.6 32.35 13-8.45-13-8.45ZM7 40q-1.2 0-2.1-.9Q4 38.2 4 37V11q0-1.2.9-2.1Q5.8 8 7 8h34q1.2 0 2.1.9.9.9.9 2.1v26q0 1.2-.9 2.1-.9.9-2.1.9Zm0-3h34V11H7v26Zm0 0V11v26Z"/>
   </svg>;
 };
 
 export const trace = () => {
-  return <svg className='octicon' style={{ color: 'var(--color-fg-subtle)' }} viewBox='0 0 16 16' version='1.1' width='16' height='16' aria-hidden='true'>
-    <path fill-rule='evenodd' d='M1.679 7.932c.412-.621 1.242-1.75 2.366-2.717C5.175 4.242 6.527 3.5 8 3.5c1.473 0 2.824.742 3.955 1.715 1.124.967 1.954 2.096 2.366 2.717a.119.119 0 010 .136c-.412.621-1.242 1.75-2.366 2.717C10.825 11.758 9.473 12.5 8 12.5c-1.473 0-2.824-.742-3.955-1.715C2.92 9.818 2.09 8.69 1.679 8.068a.119.119 0 010-.136zM8 2c-1.981 0-3.67.992-4.933 2.078C1.797 5.169.88 6.423.43 7.1a1.619 1.619 0 000 1.798c.45.678 1.367 1.932 2.637 3.024C4.329 13.008 6.019 14 8 14c1.981 0 3.67-.992 4.933-2.078 1.27-1.091 2.187-2.345 2.637-3.023a1.619 1.619 0 000-1.798c-.45-.678-1.367-1.932-2.637-3.023C11.671 2.992 9.981 2 8 2zm0 8a2 2 0 100-4 2 2 0 000 4z'></path>
+  return <svg className='octicon' viewBox='0 0 48 48' version='1.1' width='20' height='20' aria-hidden='true'>
+    <path xmlns="http://www.w3.org/2000/svg" d="M7 37h9.35V11H7v26Zm12.35 0h9.3V11h-9.3v26Zm12.3 0H41V11h-9.35v26ZM7 40q-1.2 0-2.1-.9Q4 38.2 4 37V11q0-1.2.9-2.1Q5.8 8 7 8h34q1.2 0 2.1.9.9.9.9 2.1v26q0 1.2-.9 2.1-.9.9-2.1.9Z"/>
   </svg>;
 };
 
diff --git a/packages/html-reporter/src/reportView.css b/packages/html-reporter/src/reportView.css
index 7937d4c8fd..ae5a633c24 100644
--- a/packages/html-reporter/src/reportView.css
+++ b/packages/html-reporter/src/reportView.css
@@ -34,7 +34,7 @@ body {
 }
 
 @media only screen and (max-width: 600px) {
-  .report {
+  .htmlreport {
     padding: 0 !important;
   }
 }
diff --git a/packages/html-reporter/src/testFileView.css b/packages/html-reporter/src/testFileView.css
index bc6b649de0..b97d9c3796 100644
--- a/packages/html-reporter/src/testFileView.css
+++ b/packages/html-reporter/src/testFileView.css
@@ -32,19 +32,34 @@
 }
 
 .test-file-details-row {
-  padding: 0 0 0 8px;
-  margin-left: 15px;
-  margin-top: -11px;
-  font-weight: normal;
+  padding: 0 0 6px 8px;
+  margin: -4px 0 0 15px;
+  line-height: 16px;
+  font-weight: 400;
   color: var(--color-fg-subtle);
+  display: flex;
+  align-items: center;
 }
 
 .test-file-path {
-  margin-right: 7px;
+  text-overflow: ellipsis;
+  overflow: hidden;
+}
+
+.test-file-path-link {
+  margin-right: 10px;
 }
 
 .test-file-badge {
-  margin-left: 7px;
+  flex: none;
+}
+
+.test-file-badge svg {
+  fill: var(--color-fg-subtle);
+}
+
+.test-file-badge:hover svg {
+  fill: var(--color-fg-muted);
 }
 
 .test-file-test-outcome-skipped {
diff --git a/packages/html-reporter/src/testFileView.tsx b/packages/html-reporter/src/testFileView.tsx
index ba368a6f48..6934a2b1bf 100644
--- a/packages/html-reporter/src/testFileView.tsx
+++ b/packages/html-reporter/src/testFileView.tsx
@@ -41,19 +41,23 @@ export const TestFileView: React.FC<React.PropsWithChildren<{
     </span>}>
     {file.tests.filter(t => filter.matches(t)).map(test =>
       <div key={`test-${test.testId}`} className={'test-file-test test-file-test-outcome-' + test.outcome}>
-        <Link href={`#?testId=${test.testId}`} title={[...test.path, test.title].join(' › ')}>
+        <div style={{ textOverflow: 'ellipsis', overflow: 'hidden' }}>
           <span style={{ float: 'right', minWidth: '50px', textAlign: 'right' }}>{msToString(test.duration)}</span>
           {report.projectNames.length > 1 && !!test.projectName &&
               <span style={{ float: 'right' }}><ProjectLink projectNames={report.projectNames} projectName={test.projectName}></ProjectLink></span>}
           {statusIcon(test.outcome)}
-          <span className='test-file-title'>{[...test.path, test.title].join(' › ')}</span>
-          <div className='test-file-details-row'>
+          <Link href={`#?testId=${test.testId}`} title={[...test.path, test.title].join(' › ')}>
+            <span className='test-file-title'>{[...test.path, test.title].join(' › ')}</span>
+          </Link>
+        </div>
+        <div className='test-file-details-row'>
+          <Link href={`#?testId=${test.testId}`} title={[...test.path, test.title].join(' › ')} className='test-file-path-link'>
             <span className='test-file-path'>{test.location.file}:{test.location.line}</span>
-            {imageDiffBadge(test)}
-            {videoBadge(test)}
-            {traceBadge(test)}
-          </div>
-        </Link>
+          </Link>
+          {imageDiffBadge(test)}
+          {videoBadge(test)}
+          {traceBadge(test)}
+        </div>
       </div>
     )}
   </Chip>;