From 0221f1a4e03dde8964e2266081c8cc6a2767a431 Mon Sep 17 00:00:00 2001
From: Pavel Feldman <pavel.feldman@gmail.com>
Date: Mon, 1 Nov 2021 15:47:07 -0800
Subject: [PATCH] fix(html): fix the mobile layout (#9945)

---
 .../src/web/htmlReport/htmlReport.css               | 13 ++++++++++++-
 .../src/web/htmlReport/htmlReport.tsx               |  8 ++++----
 2 files changed, 16 insertions(+), 5 deletions(-)

diff --git a/packages/playwright-core/src/web/htmlReport/htmlReport.css b/packages/playwright-core/src/web/htmlReport/htmlReport.css
index ba96c5e3d9..b97640d065 100644
--- a/packages/playwright-core/src/web/htmlReport/htmlReport.css
+++ b/packages/playwright-core/src/web/htmlReport/htmlReport.css
@@ -301,7 +301,7 @@ a.no-decorations {
 .chip-header.expanded-false,
 .chip-header.expanded-true {
   cursor: pointer;
-} 
+}
 
 .chip-body {
   border: 1px solid var(--color-border-default);
@@ -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;
+  }
 }
diff --git a/packages/playwright-core/src/web/htmlReport/htmlReport.tsx b/packages/playwright-core/src/web/htmlReport/htmlReport.tsx
index da87a3a201..f522edac5e 100644
--- a/packages/playwright-core/src/web/htmlReport/htmlReport.tsx
+++ b/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