diff --git a/packages/html-reporter/src/headerView.css b/packages/html-reporter/src/headerView.css
index b9331ab89f273..f8ef79e44f715 100644
--- a/packages/html-reporter/src/headerView.css
+++ b/packages/html-reporter/src/headerView.css
@@ -24,6 +24,7 @@
 
 .header-view div {
   flex-shrink: 0;
+  flex-wrap: wrap;
 }
 
 .header-superheader {
diff --git a/packages/html-reporter/src/metadataView.css b/packages/html-reporter/src/metadataView.css
index d62635909e778..b91a5e830c7e3 100644
--- a/packages/html-reporter/src/metadataView.css
+++ b/packages/html-reporter/src/metadataView.css
@@ -17,14 +17,18 @@
 .metadata-toggle {
   cursor: pointer;
   user-select: none;
-  margin-left: 8px;
   color: var(--color-fg-default);
 }
 
+.metadata-toggle-second-line {
+  margin-top: 8px;
+  margin-left: 8px;
+}
+
 .metadata-view {
   border: 1px solid var(--color-border-default);
   border-radius: 6px;
-  margin-top: 8px;
+  margin-top: 12px;
 }
 
 .metadata-view .metadata-section {
diff --git a/packages/html-reporter/src/testFileView.css b/packages/html-reporter/src/testFileView.css
index c071781ce17cd..5140214f0a443 100644
--- a/packages/html-reporter/src/testFileView.css
+++ b/packages/html-reporter/src/testFileView.css
@@ -62,6 +62,11 @@
 .test-file-header-info {
   display: flex;
   align-items: center;
-  gap: 8px;
+  gap: 4px 8px;
   color: var(--color-fg-muted);
+}
+
+.test-file-header-br {
+  flex-basis: 100%;
+  height: 0;
 }
\ No newline at end of file
diff --git a/packages/html-reporter/src/testFilesView.tsx b/packages/html-reporter/src/testFilesView.tsx
index 527deadadb965..efffa58a955f1 100644
--- a/packages/html-reporter/src/testFilesView.tsx
+++ b/packages/html-reporter/src/testFilesView.tsx
@@ -24,6 +24,7 @@ import { CodeSnippet } from './testErrorView';
 import * as icons from './icons';
 import { isMetadataEmpty, MetadataView } from './metadataView';
 import { HeaderView } from './headerView';
+import { clsx } from '@web/uiUtils';
 
 export const TestFilesView: React.FC<{
   tests: TestFileSummary[],
@@ -71,9 +72,19 @@ export const TestFilesHeader: React.FC<{
   if (!report)
     return null;
 
+  const showProject = report.projectNames.length === 1 && !!report.projectNames[0];
+  const isMetadataInTopLine = !showProject && !filteredStats;
+
+  const metadataToggleButton = !isMetadataEmpty(report.metadata) && (
+    <div className={clsx('metadata-toggle', !isMetadataInTopLine && 'metadata-toggle-second-line')} role='button' onClick={toggleMetadataVisible} title={metadataVisible ? 'Hide metadata' : 'Show metadata'}>
+      {metadataVisible ? icons.downArrow() : icons.rightArrow()}Metadata
+    </div>
+  );
+
   const leftSuperHeader = <div className='test-file-header-info'>
-    {report.projectNames.length === 1 && !!report.projectNames[0] && <div data-testid='project-name'>Project: {report.projectNames[0]}</div>}
+    {showProject && <div data-testid='project-name'>Project: {report.projectNames[0]}</div>}
     {filteredStats && <div data-testid='filtered-tests-count'>Filtered: {filteredStats.total} {!!filteredStats.total && ('(' + msToString(filteredStats.duration) + ')')}</div>}
+    {isMetadataInTopLine && metadataToggleButton}
   </div>;
 
   const rightSuperHeader = <>
@@ -83,9 +94,7 @@ export const TestFilesHeader: React.FC<{
 
   return <>
     <HeaderView title={report.title} leftSuperHeader={leftSuperHeader} rightSuperHeader={rightSuperHeader} />
-    {!isMetadataEmpty(report.metadata) && <div className='metadata-toggle' role='button' onClick={toggleMetadataVisible} title={metadataVisible ? 'Hide metadata' : 'Show metadata'}>
-      {metadataVisible ? icons.downArrow() : icons.rightArrow()}Metadata
-    </div>}
+    {!isMetadataInTopLine && metadataToggleButton}
     {metadataVisible && <MetadataView metadata={report.metadata}/>}
     {!!report.errors.length && <AutoChip header='Errors' dataTestId='report-errors'>
       {report.errors.map((error, index) => <CodeSnippet key={'test-report-error-message-' + index} code={error}/>)}