From 36010ff2bd9bc90cc5ed25ecdec99fc7d3453549 Mon Sep 17 00:00:00 2001
From: Alexander Moses <moijes12@gmail.com>
Date: Tue, 20 Jan 2026 15:57:24 +0000
Subject: [PATCH] Bug 1919317: Fix the tooltip for Total Runs column

This change wraps the Base runs and New Runs in a single
combined Tooltip mui element. This provides a combined
tooltip rather than having to use the title provided by
the individual span elements. This update has been applied
to the RevisionRow and SubtestsRevisionRow components.
---
 src/components/CompareResults/RevisionRow.tsx | 22 ++++++++++--------
 .../SubtestsResults/SubtestsRevisionRow.tsx   | 23 +++++++++++--------
 2 files changed, 25 insertions(+), 20 deletions(-)

diff --git a/src/components/CompareResults/RevisionRow.tsx b/src/components/CompareResults/RevisionRow.tsx
index 5ea9881b8..36b96ca19 100644
--- a/src/components/CompareResults/RevisionRow.tsx
+++ b/src/components/CompareResults/RevisionRow.tsx
@@ -395,16 +395,18 @@ function RevisionRow(props: RevisionRowProps) {
           )}
         </div>
         {renderDifferingTestVersionColumns(testVersion ?? STUDENT_T, result)}
-        <div className='total-runs cell' role='cell'>
-          <span>
-            <span title='Base runs'>B:</span>
-            <strong>{baseRunsCount}</strong>
-          </span>
-          <span>
-            <span title='New runs'>N:</span>
-            <strong>{newRunsCount}</strong>
-          </span>
-        </div>
+        <Tooltip title={`Base runs: ${baseRunsCount}, New runs: ${newRunsCount}`} placement="bottom">
+          <div className='total-runs cell' role='cell'>
+            <span>
+              <span title='Base runs'>B:</span>
+              <strong>{baseRunsCount}</strong>
+            </span>
+            <span>
+              <span title='New runs'>N:</span>
+              <strong>{newRunsCount}</strong>
+            </span>
+          </div>
+        </Tooltip>
         <div className='row-buttons cell'>
           {result.has_subtests && (
             <div className='subtests' role='cell'>
diff --git a/src/components/CompareResults/SubtestsResults/SubtestsRevisionRow.tsx b/src/components/CompareResults/SubtestsResults/SubtestsRevisionRow.tsx
index 8c7b2f1c6..e90567f00 100644
--- a/src/components/CompareResults/SubtestsResults/SubtestsRevisionRow.tsx
+++ b/src/components/CompareResults/SubtestsResults/SubtestsRevisionRow.tsx
@@ -9,6 +9,7 @@ import ThumbDownIcon from '@mui/icons-material/ThumbDown';
 import ThumbUpIcon from '@mui/icons-material/ThumbUp';
 import TimelineIcon from '@mui/icons-material/Timeline';
 import { IconButton, Box } from '@mui/material';
+import Tooltip from '@mui/material/Tooltip';
 import { style } from 'typestyle';
 
 import RevisionRowExpandable from '.././RevisionRowExpandable';
@@ -318,16 +319,18 @@ function SubtestsRevisionRow(props: RevisionRowProps) {
           result,
           expanded,
         )}
-        <div className='total-runs cell' role='cell'>
-          <span>
-            <span title='Base runs'>B:</span>
-            <strong>{baseRunsCount}</strong>
-          </span>
-          <span>
-            <span title='New runs'>N:</span>
-            <strong>{newRunsCount}</strong>
-          </span>
-        </div>
+        <Tooltip title={`Base runs: ${baseRunsCount}, New runs: ${newRunsCount}`} placement="bottom">
+          <div className='total-runs cell' role='cell'>
+            <span>
+              <span title='Base runs'>B:</span>
+              <strong>{baseRunsCount}</strong>
+            </span>
+            <span>
+              <span title='New runs'>N:</span>
+              <strong>{newRunsCount}</strong>
+            </span>
+          </div>
+        </Tooltip>
         <div className='row-buttons cell'>
           <div className='graph' role='cell'>
             <div className='graph-link-button-container'>