From 13618d88eea792b84d487e13ae14900a282cb277 Mon Sep 17 00:00:00 2001
From: moijes12 <4566851+moijes12@users.noreply.github.com>
Date: Thu, 10 Sep 2026 06:38:56 +0000
Subject: [PATCH 1/2] Bug 1982588: Align breadcrumbs and replicates button on
 the same line in Subtests View

Fixes https://bugzilla.mozilla.org/show_bug.cgi?id=1982588
---
 .../SubtestsResultsView.test.tsx.snap         | 20 ++++++++---------
 .../SubtestsResults/SubtestsBreadcrumbs.tsx   |  7 +-----
 .../SubtestsResults/SubtestsResultsMain.tsx   | 22 ++++++++++++++-----
 3 files changed, 27 insertions(+), 22 deletions(-)

diff --git a/src/__tests__/CompareResults/__snapshots__/SubtestsResultsView.test.tsx.snap b/src/__tests__/CompareResults/__snapshots__/SubtestsResultsView.test.tsx.snap
index 753907d4a..b8be71dc8 100644
--- a/src/__tests__/CompareResults/__snapshots__/SubtestsResultsView.test.tsx.snap
+++ b/src/__tests__/CompareResults/__snapshots__/SubtestsResultsView.test.tsx.snap
@@ -499,10 +499,10 @@ exports[`SubtestsResultsView Component Tests should render the subtests results
           >
             <header>
               <div
-                class="MuiGrid-root MuiGrid-container MuiGrid-direction-xs-row MuiGrid-spacing-xs-1 css-1ewzjrk-MuiGrid-root"
+                class="MuiGrid-root MuiGrid-container MuiGrid-direction-xs-row css-cv4vpp-MuiGrid-root"
               >
                 <nav
-                  class="MuiTypography-root MuiTypography-body1 MuiBreadcrumbs-root css-12zd3mg-MuiTypography-root-MuiBreadcrumbs-root"
+                  class="MuiTypography-root MuiTypography-body1 MuiBreadcrumbs-root css-233p9k-MuiTypography-root-MuiBreadcrumbs-root"
                 >
                   <ol
                     class="MuiBreadcrumbs-ol css-1uwp4ue-MuiBreadcrumbs-ol"
@@ -2391,10 +2391,10 @@ exports[`SubtestsViewCompareOverTime Component Tests in mann-whitney-u testVersi
           >
             <header>
               <div
-                class="MuiGrid-root MuiGrid-container MuiGrid-direction-xs-row MuiGrid-spacing-xs-1 css-1ewzjrk-MuiGrid-root"
+                class="MuiGrid-root MuiGrid-container MuiGrid-direction-xs-row css-cv4vpp-MuiGrid-root"
               >
                 <nav
-                  class="MuiTypography-root MuiTypography-body1 MuiBreadcrumbs-root css-12zd3mg-MuiTypography-root-MuiBreadcrumbs-root"
+                  class="MuiTypography-root MuiTypography-body1 MuiBreadcrumbs-root css-233p9k-MuiTypography-root-MuiBreadcrumbs-root"
                 >
                   <ol
                     class="MuiBreadcrumbs-ol css-1uwp4ue-MuiBreadcrumbs-ol"
@@ -3932,10 +3932,10 @@ exports[`SubtestsViewCompareOverTime Component Tests in mann-whitney-u testVersi
           >
             <header>
               <div
-                class="MuiGrid-root MuiGrid-container MuiGrid-direction-xs-row MuiGrid-spacing-xs-1 css-1ewzjrk-MuiGrid-root"
+                class="MuiGrid-root MuiGrid-container MuiGrid-direction-xs-row css-cv4vpp-MuiGrid-root"
               >
                 <nav
-                  class="MuiTypography-root MuiTypography-body1 MuiBreadcrumbs-root css-12zd3mg-MuiTypography-root-MuiBreadcrumbs-root"
+                  class="MuiTypography-root MuiTypography-body1 MuiBreadcrumbs-root css-233p9k-MuiTypography-root-MuiBreadcrumbs-root"
                 >
                   <ol
                     class="MuiBreadcrumbs-ol css-1uwp4ue-MuiBreadcrumbs-ol"
@@ -5473,10 +5473,10 @@ exports[`SubtestsViewCompareOverTime Component Tests renders over-time view when
           >
             <header>
               <div
-                class="MuiGrid-root MuiGrid-container MuiGrid-direction-xs-row MuiGrid-spacing-xs-1 css-1ewzjrk-MuiGrid-root"
+                class="MuiGrid-root MuiGrid-container MuiGrid-direction-xs-row css-cv4vpp-MuiGrid-root"
               >
                 <nav
-                  class="MuiTypography-root MuiTypography-body1 MuiBreadcrumbs-root css-12zd3mg-MuiTypography-root-MuiBreadcrumbs-root"
+                  class="MuiTypography-root MuiTypography-body1 MuiBreadcrumbs-root css-233p9k-MuiTypography-root-MuiBreadcrumbs-root"
                 >
                   <ol
                     class="MuiBreadcrumbs-ol css-1uwp4ue-MuiBreadcrumbs-ol"
@@ -7014,10 +7014,10 @@ exports[`SubtestsViewCompareOverTime Component Tests should render the subtests
           >
             <header>
               <div
-                class="MuiGrid-root MuiGrid-container MuiGrid-direction-xs-row MuiGrid-spacing-xs-1 css-1ewzjrk-MuiGrid-root"
+                class="MuiGrid-root MuiGrid-container MuiGrid-direction-xs-row css-cv4vpp-MuiGrid-root"
               >
                 <nav
-                  class="MuiTypography-root MuiTypography-body1 MuiBreadcrumbs-root css-12zd3mg-MuiTypography-root-MuiBreadcrumbs-root"
+                  class="MuiTypography-root MuiTypography-body1 MuiBreadcrumbs-root css-233p9k-MuiTypography-root-MuiBreadcrumbs-root"
                 >
                   <ol
                     class="MuiBreadcrumbs-ol css-1uwp4ue-MuiBreadcrumbs-ol"
diff --git a/src/components/CompareResults/SubtestsResults/SubtestsBreadcrumbs.tsx b/src/components/CompareResults/SubtestsResults/SubtestsBreadcrumbs.tsx
index eec8966e1..1e7325f7d 100644
--- a/src/components/CompareResults/SubtestsResults/SubtestsBreadcrumbs.tsx
+++ b/src/components/CompareResults/SubtestsResults/SubtestsBreadcrumbs.tsx
@@ -53,12 +53,7 @@ function SubtestsBreadcrumbs({ view }: SubtestsBreadcrumbsProps) {
       : getPreviousCompareOverTimeURL();
 
   return (
-    <Breadcrumbs
-      separator={<ChevronLeftIcon fontSize='small' />}
-      sx={{
-        marginBottom: 3,
-      }}
-    >
+    <Breadcrumbs separator={<ChevronLeftIcon fontSize='small' />}>
       <span role='presentation'></span>
       <Link href='/'>Home</Link>
       <Link href={allResultsURL}>All results</Link>
diff --git a/src/components/CompareResults/SubtestsResults/SubtestsResultsMain.tsx b/src/components/CompareResults/SubtestsResults/SubtestsResultsMain.tsx
index 4c5909d7e..af0e4b6dd 100644
--- a/src/components/CompareResults/SubtestsResults/SubtestsResultsMain.tsx
+++ b/src/components/CompareResults/SubtestsResults/SubtestsResultsMain.tsx
@@ -138,6 +138,16 @@ function SubtestsResultsMain({ view }: SubtestsResultsMainProps) {
       marginBottom: Spacing.Medium,
       fontSize: '16px',
     }),
+    replicates: style({
+      marginRight: '10px',
+    }),
+  };
+
+  const titleContainerSx = {
+    alignItems: 'center',
+    gap: '9px',
+    margin: `0 0 ${Spacing.Medium}px 0`,
+    justifyContent: 'space-between',
   };
 
   const onSearchTermChange = (newSearchTerm: string) => {
@@ -158,14 +168,14 @@ function SubtestsResultsMain({ view }: SubtestsResultsMainProps) {
   return (
     <Container className={styles.container} data-testid='subtests-main'>
       <header>
-        <Grid container spacing={1}>
+        <Grid container sx={titleContainerSx}>
           <SubtestsBreadcrumbs view={view} />
+          {testVersion === STUDENT_T && (
+            <Grid component='h2' className={styles.replicates}>
+              <ToggleReplicatesButton />
+            </Grid>
+          )}
         </Grid>
-        {testVersion === STUDENT_T && (
-          <Grid sx={{ marginRight: '10px' }}>
-            <ToggleReplicatesButton />
-          </Grid>
-        )}
         {displayMannWhitneyUWarning && (
           <Alert
             severity='warning'

From c501abe96d1cbd9451398ecfdd8c4393f85fa8ff Mon Sep 17 00:00:00 2001
From: moijes12 <4566851+moijes12@users.noreply.github.com>
Date: Thu, 10 Sep 2026 06:52:28 +0000
Subject: [PATCH 2/2] Bug 1982588: Align breadcrumbs and replicates button on
 the same line in Subtests View

Fixes https://bugzilla.mozilla.org/show_bug.cgi?id=1982588