fix(html): fix the mobile layout (#9945)

packages/playwright-core/src/web/htmlReport/htmlReport.css

@@ -342,6 +342,11 @@ a.no-decorations {
   color: var(--color-fg-muted);
 }
 
+
+.status-container {
+  float: right;
+}
+
 .octicon {
   display: inline-block;
   overflow: visible !important;
@@ -598,4 +603,10 @@ article, aside, details, figcaption, figure, footer, header, main, menu, nav, se
     padding: 5px 3px;
     border: none;
   }
+
+  .status-container {
+    float: none;
+    margin: 0 !important;
+    overflow: hidden;
+  }
 }

packages/playwright-core/src/web/htmlReport/htmlReport.tsx

@@ -94,7 +94,10 @@ const AllTestFilesSummaryView: React.FC<{
     return result;
   }, [report, filter]);
   return <div className='file-summary-list'>
-    {report && <div className='d-flex'>
+    {report && <div>
+      <div className='status-container ml-2 pl-2 d-flex'>
+        <StatsNavView stats={report.stats}></StatsNavView>
+      </div>
       <form className='subnav-search' onSubmit={
         event => {
           event.preventDefault();
@@ -109,9 +112,6 @@ const AllTestFilesSummaryView: React.FC<{
           setFilterText(e.target.value);
         }}></input>
       </form>
-      <div className='ml-2 pl-2 d-flex'>
-        <StatsNavView stats={report.stats}></StatsNavView>
-      </div>
     </div>}
     {report && filteredFiles.map(({ file, defaultExpanded }) => {
       return <TestFileSummaryView