From 3a6ebd0d3161b1552b33e6f6d2aaf78748b3b065 Mon Sep 17 00:00:00 2001
From: Carla Severe <csevere@mozilla.com>
Date: Wed, 6 May 2026 11:46:43 -0700
Subject: [PATCH] reduced the size of perfcompare hero

---
 .../__snapshots__/ResultsTable.test.tsx.snap  | 42 ++++----
 .../SubtestsResultsView.test.tsx.snap         | 95 +++++++------------
 .../CompareWithBase.test.tsx.snap             |  2 +-
 .../SearchResultsList.test.tsx.snap           |  2 +-
 .../__snapshots__/SearchView.test.tsx.snap    |  2 +-
 src/__tests__/__snapshots__/App.test.tsx.snap | 63 +++++-------
 src/components/Shared/PerfCompareHeader.tsx   | 54 ++++++-----
 src/styles/Header.ts                          |  2 +-
 src/styles/SearchContainerStyles.ts           |  2 +-
 9 files changed, 111 insertions(+), 153 deletions(-)

diff --git a/src/__tests__/CompareResults/__snapshots__/ResultsTable.test.tsx.snap b/src/__tests__/CompareResults/__snapshots__/ResultsTable.test.tsx.snap
index 76791d86e..045253c30 100644
--- a/src/__tests__/CompareResults/__snapshots__/ResultsTable.test.tsx.snap
+++ b/src/__tests__/CompareResults/__snapshots__/ResultsTable.test.tsx.snap
@@ -8,7 +8,7 @@ exports[`Results Table Should match snapshot 1`] = `
       data-testid="beta-version-compare-results"
     >
       <div
-        class="MuiGrid-root MuiGrid-direction-xs-row header-container container_fjtw4pp css-k4qgqg-MuiGrid-root"
+        class="MuiGrid-root MuiGrid-direction-xs-row header-container container_f16a4r9k css-k4qgqg-MuiGrid-root"
       >
         <div
           class="MuiBox-root css-1e39pab"
@@ -51,8 +51,13 @@ exports[`Results Table Should match snapshot 1`] = `
               </label>
             </div>
           </div>
+          <h2
+            class="MuiTypography-root MuiTypography-h2 perfcompare-header css-legj6v-MuiTypography-root"
+          >
+            PerfCompare
+          </h2>
           <div
-            class="MuiBox-root css-1cuyom4"
+            class="MuiBox-root css-u7c4o"
           >
             <div
               class="MuiBox-root css-0"
@@ -140,19 +145,9 @@ exports[`Results Table Should match snapshot 1`] = `
             </div>
           </div>
         </div>
-        <div
-          class="header-text MuiBox-root css-0"
-        >
-          <h1
-            class="MuiTypography-root MuiTypography-h1 MuiTypography-alignCenter MuiTypography-gutterBottom perfcompare-header css-19e1hs-MuiTypography-root"
-            style="--Typography-textAlign: center;"
-          >
-            PerfCompare
-          </h1>
-        </div>
       </div>
       <section
-        class="container_f1h7ern2"
+        class="container_f13838vn"
       >
         <div
           class="MuiBox-root css-i3pbo"
@@ -2764,7 +2759,7 @@ exports[`Results Table for MannWhitneyResultsItem for mann-whitney-u testVersion
       data-testid="beta-version-compare-results"
     >
       <div
-        class="MuiGrid-root MuiGrid-direction-xs-row header-container container_fjtw4pp css-k4qgqg-MuiGrid-root"
+        class="MuiGrid-root MuiGrid-direction-xs-row header-container container_f16a4r9k css-k4qgqg-MuiGrid-root"
       >
         <div
           class="MuiBox-root css-1e39pab"
@@ -2807,8 +2802,13 @@ exports[`Results Table for MannWhitneyResultsItem for mann-whitney-u testVersion
               </label>
             </div>
           </div>
+          <h2
+            class="MuiTypography-root MuiTypography-h2 perfcompare-header css-legj6v-MuiTypography-root"
+          >
+            PerfCompare
+          </h2>
           <div
-            class="MuiBox-root css-1cuyom4"
+            class="MuiBox-root css-u7c4o"
           >
             <div
               class="MuiBox-root css-0"
@@ -2896,19 +2896,9 @@ exports[`Results Table for MannWhitneyResultsItem for mann-whitney-u testVersion
             </div>
           </div>
         </div>
-        <div
-          class="header-text MuiBox-root css-0"
-        >
-          <h1
-            class="MuiTypography-root MuiTypography-h1 MuiTypography-alignCenter MuiTypography-gutterBottom perfcompare-header css-19e1hs-MuiTypography-root"
-            style="--Typography-textAlign: center;"
-          >
-            PerfCompare
-          </h1>
-        </div>
       </div>
       <section
-        class="container_f1h7ern2"
+        class="container_f13838vn"
       >
         <div
           class="MuiBox-root css-i3pbo"
diff --git a/src/__tests__/CompareResults/__snapshots__/SubtestsResultsView.test.tsx.snap b/src/__tests__/CompareResults/__snapshots__/SubtestsResultsView.test.tsx.snap
index 828b713fa..29df1c631 100644
--- a/src/__tests__/CompareResults/__snapshots__/SubtestsResultsView.test.tsx.snap
+++ b/src/__tests__/CompareResults/__snapshots__/SubtestsResultsView.test.tsx.snap
@@ -348,7 +348,7 @@ exports[`SubtestsResultsView Component Tests should render the subtests results
       data-testid="beta-version-compare-subtests-results"
     >
       <div
-        class="MuiGrid-root MuiGrid-direction-xs-row header-container container_fjtw4pp css-k4qgqg-MuiGrid-root"
+        class="MuiGrid-root MuiGrid-direction-xs-row header-container container_f16a4r9k css-k4qgqg-MuiGrid-root"
       >
         <div
           class="MuiBox-root css-1e39pab"
@@ -391,8 +391,13 @@ exports[`SubtestsResultsView Component Tests should render the subtests results
               </label>
             </div>
           </div>
+          <h2
+            class="MuiTypography-root MuiTypography-h2 perfcompare-header css-legj6v-MuiTypography-root"
+          >
+            PerfCompare
+          </h2>
           <div
-            class="MuiBox-root css-1cuyom4"
+            class="MuiBox-root css-u7c4o"
           >
             <div
               class="MuiBox-root css-0"
@@ -480,16 +485,6 @@ exports[`SubtestsResultsView Component Tests should render the subtests results
             </div>
           </div>
         </div>
-        <div
-          class="header-text MuiBox-root css-0"
-        >
-          <h1
-            class="MuiTypography-root MuiTypography-h1 MuiTypography-alignCenter MuiTypography-gutterBottom perfcompare-header css-19e1hs-MuiTypography-root"
-            style="--Typography-textAlign: center;"
-          >
-            PerfCompare
-          </h1>
-        </div>
       </div>
       <div
         class="MuiGrid-root MuiGrid-container MuiGrid-direction-xs-row css-vdwn9g-MuiGrid-root"
@@ -2265,7 +2260,7 @@ exports[`SubtestsViewCompareOverTime Component Tests in mann-whitney-u testVersi
       class="fcndgf6"
     >
       <div
-        class="MuiGrid-root MuiGrid-direction-xs-row header-container container_fjtw4pp css-k4qgqg-MuiGrid-root"
+        class="MuiGrid-root MuiGrid-direction-xs-row header-container container_f16a4r9k css-k4qgqg-MuiGrid-root"
       >
         <div
           class="MuiBox-root css-1e39pab"
@@ -2308,8 +2303,13 @@ exports[`SubtestsViewCompareOverTime Component Tests in mann-whitney-u testVersi
               </label>
             </div>
           </div>
+          <h2
+            class="MuiTypography-root MuiTypography-h2 perfcompare-header css-legj6v-MuiTypography-root"
+          >
+            PerfCompare
+          </h2>
           <div
-            class="MuiBox-root css-1cuyom4"
+            class="MuiBox-root css-u7c4o"
           >
             <div
               class="MuiBox-root css-0"
@@ -2397,16 +2397,6 @@ exports[`SubtestsViewCompareOverTime Component Tests in mann-whitney-u testVersi
             </div>
           </div>
         </div>
-        <div
-          class="header-text MuiBox-root css-0"
-        >
-          <h1
-            class="MuiTypography-root MuiTypography-h1 MuiTypography-alignCenter MuiTypography-gutterBottom perfcompare-header css-19e1hs-MuiTypography-root"
-            style="--Typography-textAlign: center;"
-          >
-            PerfCompare
-          </h1>
-        </div>
       </div>
       <div
         class="MuiGrid-root MuiGrid-container MuiGrid-direction-xs-row css-vdwn9g-MuiGrid-root"
@@ -3865,7 +3855,7 @@ exports[`SubtestsViewCompareOverTime Component Tests in mann-whitney-u testVersi
       class="fcndgf6"
     >
       <div
-        class="MuiGrid-root MuiGrid-direction-xs-row header-container container_fjtw4pp css-k4qgqg-MuiGrid-root"
+        class="MuiGrid-root MuiGrid-direction-xs-row header-container container_f16a4r9k css-k4qgqg-MuiGrid-root"
       >
         <div
           class="MuiBox-root css-1e39pab"
@@ -3908,8 +3898,13 @@ exports[`SubtestsViewCompareOverTime Component Tests in mann-whitney-u testVersi
               </label>
             </div>
           </div>
+          <h2
+            class="MuiTypography-root MuiTypography-h2 perfcompare-header css-legj6v-MuiTypography-root"
+          >
+            PerfCompare
+          </h2>
           <div
-            class="MuiBox-root css-1cuyom4"
+            class="MuiBox-root css-u7c4o"
           >
             <div
               class="MuiBox-root css-0"
@@ -3997,16 +3992,6 @@ exports[`SubtestsViewCompareOverTime Component Tests in mann-whitney-u testVersi
             </div>
           </div>
         </div>
-        <div
-          class="header-text MuiBox-root css-0"
-        >
-          <h1
-            class="MuiTypography-root MuiTypography-h1 MuiTypography-alignCenter MuiTypography-gutterBottom perfcompare-header css-19e1hs-MuiTypography-root"
-            style="--Typography-textAlign: center;"
-          >
-            PerfCompare
-          </h1>
-        </div>
       </div>
       <div
         class="MuiGrid-root MuiGrid-container MuiGrid-direction-xs-row css-vdwn9g-MuiGrid-root"
@@ -5465,7 +5450,7 @@ exports[`SubtestsViewCompareOverTime Component Tests renders over-time view when
       class="fcndgf6"
     >
       <div
-        class="MuiGrid-root MuiGrid-direction-xs-row header-container container_fjtw4pp css-k4qgqg-MuiGrid-root"
+        class="MuiGrid-root MuiGrid-direction-xs-row header-container container_f16a4r9k css-k4qgqg-MuiGrid-root"
       >
         <div
           class="MuiBox-root css-1e39pab"
@@ -5508,8 +5493,13 @@ exports[`SubtestsViewCompareOverTime Component Tests renders over-time view when
               </label>
             </div>
           </div>
+          <h2
+            class="MuiTypography-root MuiTypography-h2 perfcompare-header css-legj6v-MuiTypography-root"
+          >
+            PerfCompare
+          </h2>
           <div
-            class="MuiBox-root css-1cuyom4"
+            class="MuiBox-root css-u7c4o"
           >
             <div
               class="MuiBox-root css-0"
@@ -5597,16 +5587,6 @@ exports[`SubtestsViewCompareOverTime Component Tests renders over-time view when
             </div>
           </div>
         </div>
-        <div
-          class="header-text MuiBox-root css-0"
-        >
-          <h1
-            class="MuiTypography-root MuiTypography-h1 MuiTypography-alignCenter MuiTypography-gutterBottom perfcompare-header css-19e1hs-MuiTypography-root"
-            style="--Typography-textAlign: center;"
-          >
-            PerfCompare
-          </h1>
-        </div>
       </div>
       <div
         class="MuiGrid-root MuiGrid-container MuiGrid-direction-xs-row css-vdwn9g-MuiGrid-root"
@@ -7065,7 +7045,7 @@ exports[`SubtestsViewCompareOverTime Component Tests should render the subtests
       class="fcndgf6"
     >
       <div
-        class="MuiGrid-root MuiGrid-direction-xs-row header-container container_fjtw4pp css-k4qgqg-MuiGrid-root"
+        class="MuiGrid-root MuiGrid-direction-xs-row header-container container_f16a4r9k css-k4qgqg-MuiGrid-root"
       >
         <div
           class="MuiBox-root css-1e39pab"
@@ -7108,8 +7088,13 @@ exports[`SubtestsViewCompareOverTime Component Tests should render the subtests
               </label>
             </div>
           </div>
+          <h2
+            class="MuiTypography-root MuiTypography-h2 perfcompare-header css-legj6v-MuiTypography-root"
+          >
+            PerfCompare
+          </h2>
           <div
-            class="MuiBox-root css-1cuyom4"
+            class="MuiBox-root css-u7c4o"
           >
             <div
               class="MuiBox-root css-0"
@@ -7197,16 +7182,6 @@ exports[`SubtestsViewCompareOverTime Component Tests should render the subtests
             </div>
           </div>
         </div>
-        <div
-          class="header-text MuiBox-root css-0"
-        >
-          <h1
-            class="MuiTypography-root MuiTypography-h1 MuiTypography-alignCenter MuiTypography-gutterBottom perfcompare-header css-19e1hs-MuiTypography-root"
-            style="--Typography-textAlign: center;"
-          >
-            PerfCompare
-          </h1>
-        </div>
       </div>
       <div
         class="MuiGrid-root MuiGrid-container MuiGrid-direction-xs-row css-vdwn9g-MuiGrid-root"
diff --git a/src/__tests__/Search/__snapshots__/CompareWithBase.test.tsx.snap b/src/__tests__/Search/__snapshots__/CompareWithBase.test.tsx.snap
index 832aaddab..326c37c50 100644
--- a/src/__tests__/Search/__snapshots__/CompareWithBase.test.tsx.snap
+++ b/src/__tests__/Search/__snapshots__/CompareWithBase.test.tsx.snap
@@ -3806,7 +3806,7 @@ exports[`Compare With Base should remove the checked revision once X button is c
             </div>
           </div>
           <div
-            class="MuiBox-root css-1cuyom4"
+            class="MuiBox-root css-u7c4o"
           >
             <div
               class="MuiBox-root css-0"
diff --git a/src/__tests__/Search/__snapshots__/SearchResultsList.test.tsx.snap b/src/__tests__/Search/__snapshots__/SearchResultsList.test.tsx.snap
index 53965d20d..a35ab9a5e 100644
--- a/src/__tests__/Search/__snapshots__/SearchResultsList.test.tsx.snap
+++ b/src/__tests__/Search/__snapshots__/SearchResultsList.test.tsx.snap
@@ -855,7 +855,7 @@ exports[`SearchResultsList should match snapshot 1`] = `
             </div>
           </div>
           <div
-            class="MuiBox-root css-1cuyom4"
+            class="MuiBox-root css-u7c4o"
           >
             <div
               class="MuiBox-root css-0"
diff --git a/src/__tests__/Search/__snapshots__/SearchView.test.tsx.snap b/src/__tests__/Search/__snapshots__/SearchView.test.tsx.snap
index 5a7e386c5..08202bccc 100644
--- a/src/__tests__/Search/__snapshots__/SearchView.test.tsx.snap
+++ b/src/__tests__/Search/__snapshots__/SearchView.test.tsx.snap
@@ -58,7 +58,7 @@ exports[`Search View renders correctly when there are no results 1`] = `
             </div>
           </div>
           <div
-            class="MuiBox-root css-1cuyom4"
+            class="MuiBox-root css-u7c4o"
           >
             <div
               class="MuiBox-root css-0"
diff --git a/src/__tests__/__snapshots__/App.test.tsx.snap b/src/__tests__/__snapshots__/App.test.tsx.snap
index 3743500be..a7286d7dc 100644
--- a/src/__tests__/__snapshots__/App.test.tsx.snap
+++ b/src/__tests__/__snapshots__/App.test.tsx.snap
@@ -12,7 +12,7 @@ exports[`App CompareResults or CompareOverTime loader Should render an error pag
       class="fcndgf6"
     >
       <div
-        class="MuiGrid-root MuiGrid-direction-xs-row header-container container_fjtw4pp css-k4qgqg-MuiGrid-root"
+        class="MuiGrid-root MuiGrid-direction-xs-row header-container container_f16a4r9k css-k4qgqg-MuiGrid-root"
       >
         <div
           class="MuiBox-root css-1e39pab"
@@ -55,8 +55,13 @@ exports[`App CompareResults or CompareOverTime loader Should render an error pag
               </label>
             </div>
           </div>
+          <h2
+            class="MuiTypography-root MuiTypography-h2 perfcompare-header css-legj6v-MuiTypography-root"
+          >
+            PerfCompare
+          </h2>
           <div
-            class="MuiBox-root css-1cuyom4"
+            class="MuiBox-root css-u7c4o"
           >
             <div
               class="MuiBox-root css-0"
@@ -144,19 +149,9 @@ exports[`App CompareResults or CompareOverTime loader Should render an error pag
             </div>
           </div>
         </div>
-        <div
-          class="header-text MuiBox-root css-0"
-        >
-          <h1
-            class="MuiTypography-root MuiTypography-h1 MuiTypography-alignCenter MuiTypography-gutterBottom perfcompare-header css-19e1hs-MuiTypography-root"
-            style="--Typography-textAlign: center;"
-          >
-            PerfCompare
-          </h1>
-        </div>
       </div>
       <section
-        class="container_f1h7ern2"
+        class="container_f13838vn"
       >
         <div
           class="MuiBox-root css-i3pbo"
@@ -318,7 +313,7 @@ exports[`App CompareResults or CompareOverTime loader Should render an error pag
       class="fcndgf6"
     >
       <div
-        class="MuiGrid-root MuiGrid-direction-xs-row header-container container_fjtw4pp css-k4qgqg-MuiGrid-root"
+        class="MuiGrid-root MuiGrid-direction-xs-row header-container container_f16a4r9k css-k4qgqg-MuiGrid-root"
       >
         <div
           class="MuiBox-root css-1e39pab"
@@ -361,8 +356,13 @@ exports[`App CompareResults or CompareOverTime loader Should render an error pag
               </label>
             </div>
           </div>
+          <h2
+            class="MuiTypography-root MuiTypography-h2 perfcompare-header css-legj6v-MuiTypography-root"
+          >
+            PerfCompare
+          </h2>
           <div
-            class="MuiBox-root css-1cuyom4"
+            class="MuiBox-root css-u7c4o"
           >
             <div
               class="MuiBox-root css-0"
@@ -450,19 +450,9 @@ exports[`App CompareResults or CompareOverTime loader Should render an error pag
             </div>
           </div>
         </div>
-        <div
-          class="header-text MuiBox-root css-0"
-        >
-          <h1
-            class="MuiTypography-root MuiTypography-h1 MuiTypography-alignCenter MuiTypography-gutterBottom perfcompare-header css-19e1hs-MuiTypography-root"
-            style="--Typography-textAlign: center;"
-          >
-            PerfCompare
-          </h1>
-        </div>
       </div>
       <section
-        class="container_f1h7ern2"
+        class="container_f13838vn"
       >
         <div
           class="MuiBox-root css-i3pbo"
@@ -519,7 +509,7 @@ exports[`App CompareResults or CompareOverTime loader Should render an error pag
       class="fcndgf6"
     >
       <div
-        class="MuiGrid-root MuiGrid-direction-xs-row header-container container_fjtw4pp css-k4qgqg-MuiGrid-root"
+        class="MuiGrid-root MuiGrid-direction-xs-row header-container container_f16a4r9k css-k4qgqg-MuiGrid-root"
       >
         <div
           class="MuiBox-root css-1e39pab"
@@ -562,8 +552,13 @@ exports[`App CompareResults or CompareOverTime loader Should render an error pag
               </label>
             </div>
           </div>
+          <h2
+            class="MuiTypography-root MuiTypography-h2 perfcompare-header css-legj6v-MuiTypography-root"
+          >
+            PerfCompare
+          </h2>
           <div
-            class="MuiBox-root css-1cuyom4"
+            class="MuiBox-root css-u7c4o"
           >
             <div
               class="MuiBox-root css-0"
@@ -651,19 +646,9 @@ exports[`App CompareResults or CompareOverTime loader Should render an error pag
             </div>
           </div>
         </div>
-        <div
-          class="header-text MuiBox-root css-0"
-        >
-          <h1
-            class="MuiTypography-root MuiTypography-h1 MuiTypography-alignCenter MuiTypography-gutterBottom perfcompare-header css-19e1hs-MuiTypography-root"
-            style="--Typography-textAlign: center;"
-          >
-            PerfCompare
-          </h1>
-        </div>
       </div>
       <section
-        class="container_f1h7ern2"
+        class="container_f13838vn"
       >
         <div
           class="MuiBox-root css-i3pbo"
diff --git a/src/components/Shared/PerfCompareHeader.tsx b/src/components/Shared/PerfCompareHeader.tsx
index 3c11f8590..e9b0bd0eb 100644
--- a/src/components/Shared/PerfCompareHeader.tsx
+++ b/src/components/Shared/PerfCompareHeader.tsx
@@ -32,8 +32,18 @@ function PerfCompareHeader({ isHome }: PerfCompareHeaderProps) {
         }}
       >
         <ToggleDarkMode />
+        {!isHome && (
+          <Typography
+            variant='h2'
+            className='perfcompare-header'
+            sx={{ marginBottom: '0 !important', fontFamily: 'Zilla Slab' }}
+          >
+            {strings.title}
+          </Typography>
+        )}
         <Box
           sx={{
+            className: 'nav-links',
             display: 'flex',
             gap: 2,
             flexWrap: 'wrap',
@@ -63,29 +73,27 @@ function PerfCompareHeader({ isHome }: PerfCompareHeaderProps) {
           />
         </Box>
       </Box>
-      <Box className='header-text'>
-        <Typography
-          variant='h1'
-          align='center'
-          gutterBottom
-          className='perfcompare-header'
-        >
-          {strings.title}
-        </Typography>
-        {isHome ? (
-          <>
-            <Typography
-              component='div'
-              align='center'
-              gutterBottom
-              className='perfcompare-tagline'
-            >
-              {strings.tagline}
-            </Typography>
-            <Button className='learn-more-btn'>{strings.learnMore}</Button>
-          </>
-        ) : null}
-      </Box>
+      {isHome && (
+        <Box className='header-text'>
+          <Typography
+            variant='h1'
+            align='center'
+            gutterBottom
+            className='perfcompare-header'
+          >
+            {strings.title}
+          </Typography>
+          <Typography
+            component='div'
+            align='center'
+            gutterBottom
+            className='perfcompare-tagline'
+          >
+            {strings.tagline}
+          </Typography>
+          <Button className='learn-more-btn'>{strings.learnMore}</Button>
+        </Box>
+      )}
     </Grid>
   );
 }
diff --git a/src/styles/Header.ts b/src/styles/Header.ts
index 37b58e236..3fbc85645 100644
--- a/src/styles/Header.ts
+++ b/src/styles/Header.ts
@@ -15,7 +15,7 @@ export const HeaderStyles = (mode: string, isHome: boolean) => {
     container: {
       padding: 0,
       width: '100%',
-      minHeight: isHome ? '357px' : '130px',
+      minHeight: isHome ? '357px' : 'auto',
       backgroundColor: isTrueLight ? lightBg : darkBg,
       backgroundImage: `url(${headerImage.toString()})`,
       backgroundPosition: 'center',
diff --git a/src/styles/SearchContainerStyles.ts b/src/styles/SearchContainerStyles.ts
index a7279f9b8..7f911b426 100644
--- a/src/styles/SearchContainerStyles.ts
+++ b/src/styles/SearchContainerStyles.ts
@@ -10,7 +10,7 @@ export const SearchContainerStyles = (isHome: boolean) => {
       maxWidth: '973px',
       marginTop: isHome ? `${Spacing.layoutLarge + 20}px` : '0px',
       margin: '0 auto',
-      marginBottom: isHome ? '0px' : `${Spacing.layoutXLarge + 4}px`,
+      marginBottom: isHome ? '0px' : `${Spacing.xxLarge}px`,
       display: 'flex',
       justifyContent: 'center',
       flexDirection: 'column',