From 009f9994df34e7683bda603060ac41c01bc8bed7 Mon Sep 17 00:00:00 2001
From: Pavel Feldman <pavel.feldman@gmail.com>
Date: Mon, 31 Jul 2023 16:54:07 -0700
Subject: [PATCH] fix(html): mobile layout for filters (#24506)

---
 packages/html-reporter/src/headerView.tsx    | 2 +-
 packages/html-reporter/src/testFilesView.tsx | 2 +-
 2 files changed, 2 insertions(+), 2 deletions(-)

diff --git a/packages/html-reporter/src/headerView.tsx b/packages/html-reporter/src/headerView.tsx
index 3c24ace4c0..04513eb7dc 100644
--- a/packages/html-reporter/src/headerView.tsx
+++ b/packages/html-reporter/src/headerView.tsx
@@ -64,7 +64,7 @@ export const HeaderView: React.FC<React.PropsWithChildren<{
 const StatsNavView: React.FC<{
   stats: Stats
 }> = ({ stats }) => {
-  return <nav className='d-flex no-wrap'>
+  return <nav>
     <Link className='subnav-item' href='#?'>
       All <span className='d-inline counter'>{stats.total}</span>
     </Link>
diff --git a/packages/html-reporter/src/testFilesView.tsx b/packages/html-reporter/src/testFilesView.tsx
index f00d0e6ba0..b6a57fdd5e 100644
--- a/packages/html-reporter/src/testFilesView.tsx
+++ b/packages/html-reporter/src/testFilesView.tsx
@@ -43,7 +43,7 @@ export const TestFilesView: React.FC<{
   return <>
     <div className='p-2' style={{ display: 'flex' }}>
       {projectNames.length === 1 && !!projectNames[0] && <div data-testid="project-name" style={{ color: 'var(--color-fg-subtle)' }}>Project: {projectNames[0]}</div>}
-      {!filter.empty() && <div data-testid="filtered-tests-count" style={{ color: 'var(--color-fg-subtle)' }}>Filtered: {filteredStats.total}</div>}
+      {!filter.empty() && <div data-testid="filtered-tests-count" style={{ color: 'var(--color-fg-subtle)', padding: '0 10px' }}>Filtered: {filteredStats.total}</div>}
       <div style={{ flex: 'auto' }}></div>
       <div data-testid="overall-duration" style={{ color: 'var(--color-fg-subtle)' }}>Total time: {msToString(filteredStats.duration)}</div>
     </div>