From 33cd062f0b5baa0da300e66b4dd7d8e3aa32a2b3 Mon Sep 17 00:00:00 2001 From: Tom Longhurst <30480171+thomhurst@users.noreply.github.com> Date: Sun, 9 Aug 2026 14:47:29 +0100 Subject: [PATCH 1/2] fix(reporting): contain outcome timeline --- .../Reporters/Html/TestReport.template.html | 4 ++-- tests/TUnit.Engine.Tests/HtmlReporterTests.cs | 20 +++++++++++++++++++ 2 files changed, 22 insertions(+), 2 deletions(-) diff --git a/src/TUnit.Engine/Reporters/Html/TestReport.template.html b/src/TUnit.Engine/Reporters/Html/TestReport.template.html index 471b23de107..79e1beee1cb 100644 --- a/src/TUnit.Engine/Reporters/Html/TestReport.template.html +++ b/src/TUnit.Engine/Reporters/Html/TestReport.template.html @@ -615,7 +615,7 @@ /* ============================== run view ============================== */ .run-wrap { max-width: 1280px; margin: 0 auto; padding: 28px 28px 80px; } - .run-grid-1 { display: grid; grid-template-columns: 320px 1fr 1fr; gap: 16px; margin-bottom: 16px; } + .run-grid-1 { display: grid; grid-template-columns: 320px minmax(0, 1fr) minmax(0, 1fr); gap: 16px; margin-bottom: 16px; } @media (max-width: 1100px) { .run-grid-1 { grid-template-columns: 1fr; } } .run-grid-2 { display: grid; grid-template-columns: 1.3fr 1fr; gap: 16px; margin-bottom: 16px; } @media (max-width: 1100px) { .run-grid-2 { grid-template-columns: 1fr; } } @@ -656,7 +656,7 @@ /* strip card */ .strip-card { padding: 20px; } .strip-card .card-title { margin-bottom: 14px; } - .outcome-strip { display: flex; gap: 1px; height: 60px; align-items: stretch; } + .outcome-strip { display: flex; gap: 1px; height: 60px; align-items: stretch; overflow-x: auto; overflow-y: hidden; } .outcome-strip .tick { flex: 1; min-width: 2px; border-radius: 2px; opacity: 0.85; transition: opacity 100ms, transform 100ms; cursor: pointer; } .outcome-strip .tick:hover { opacity: 1; transform: scaleY(1.06); } .outcome-strip .tick.pass { background: var(--pass); } diff --git a/tests/TUnit.Engine.Tests/HtmlReporterTests.cs b/tests/TUnit.Engine.Tests/HtmlReporterTests.cs index 1f03524ade9..327951fb39e 100644 --- a/tests/TUnit.Engine.Tests/HtmlReporterTests.cs +++ b/tests/TUnit.Engine.Tests/HtmlReporterTests.cs @@ -375,6 +375,26 @@ public void GenerateHtml_SubstitutesTitleAndProjectPlaceholders() html.ShouldContain("id=\"projectName\">MyProject.Tests<"); } + [Test] + public void GenerateHtml_Constrains_Outcome_Timeline_To_Its_Grid_Column() + { + var html = HtmlReportGenerator.GenerateHtml(new ReportData + { + AssemblyName = "Tests", + MachineName = "machine", + Timestamp = "2026-08-09T00:00:00.0000000Z", + TUnitVersion = "1.0.0", + OperatingSystem = "Windows", + RuntimeVersion = ".NET 10.0", + TotalDurationMs = 0, + Summary = new ReportSummary(), + Groups = [], + }); + + html.ShouldContain("grid-template-columns: 320px minmax(0, 1fr) minmax(0, 1fr)"); + html.ShouldContain(".outcome-strip { display: flex; gap: 1px; height: 60px; align-items: stretch; overflow-x: auto; overflow-y: hidden; }"); + } + [Test] public void GenerateHtml_EmitsAttemptsArray_WhenTestWasRetried() { From 2c4269018fd48e7a2e657f7905e508a1a1445c58 Mon Sep 17 00:00:00 2001 From: Tom Longhurst <30480171+thomhurst@users.noreply.github.com> Date: Sun, 9 Aug 2026 15:31:07 +0100 Subject: [PATCH 2/2] fix(reporting): handle responsive overflow --- .../Reporters/Html/TestReport.template.html | 22 ++++++++++++------- tests/TUnit.Engine.Tests/HtmlReporterTests.cs | 8 +++++-- 2 files changed, 20 insertions(+), 10 deletions(-) diff --git a/src/TUnit.Engine/Reporters/Html/TestReport.template.html b/src/TUnit.Engine/Reporters/Html/TestReport.template.html index 79e1beee1cb..4814fe09d9d 100644 --- a/src/TUnit.Engine/Reporters/Html/TestReport.template.html +++ b/src/TUnit.Engine/Reporters/Html/TestReport.template.html @@ -616,7 +616,7 @@ /* ============================== run view ============================== */ .run-wrap { max-width: 1280px; margin: 0 auto; padding: 28px 28px 80px; } .run-grid-1 { display: grid; grid-template-columns: 320px minmax(0, 1fr) minmax(0, 1fr); gap: 16px; margin-bottom: 16px; } - @media (max-width: 1100px) { .run-grid-1 { grid-template-columns: 1fr; } } + @media (max-width: 1100px) { .run-grid-1 { grid-template-columns: minmax(0, 1fr); } } .run-grid-2 { display: grid; grid-template-columns: 1.3fr 1fr; gap: 16px; margin-bottom: 16px; } @media (max-width: 1100px) { .run-grid-2 { grid-template-columns: 1fr; } } @@ -656,7 +656,9 @@ /* strip card */ .strip-card { padding: 20px; } .strip-card .card-title { margin-bottom: 14px; } - .outcome-strip { display: flex; gap: 1px; height: 60px; align-items: stretch; overflow-x: auto; overflow-y: hidden; } + .outcome-strip-scroll { overflow-x: auto; overflow-y: hidden; padding: 2px 0; } + .outcome-strip-content { width: max-content; min-width: 100%; } + .outcome-strip { display: flex; gap: 1px; height: 60px; align-items: stretch; } .outcome-strip .tick { flex: 1; min-width: 2px; border-radius: 2px; opacity: 0.85; transition: opacity 100ms, transform 100ms; cursor: pointer; } .outcome-strip .tick:hover { opacity: 1; transform: scaleY(1.06); } .outcome-strip .tick.pass { background: var(--pass); } @@ -994,7 +996,7 @@ /* run view: stacked, tighter */ .run-wrap { padding: 20px 18px 80px; } - .run-grid-1, .run-grid-2 { grid-template-columns: 1fr; gap: 12px; } + .run-grid-1, .run-grid-2 { grid-template-columns: minmax(0, 1fr); gap: 12px; } .donut-card { padding: 18px; } .panel-head { padding: 12px 16px; } } @@ -1236,11 +1238,15 @@

Select a test

Outcome timeline
-
-
- start - - end +
+
+
+
+ start + + end +
+
diff --git a/tests/TUnit.Engine.Tests/HtmlReporterTests.cs b/tests/TUnit.Engine.Tests/HtmlReporterTests.cs index 327951fb39e..5d7d646d22e 100644 --- a/tests/TUnit.Engine.Tests/HtmlReporterTests.cs +++ b/tests/TUnit.Engine.Tests/HtmlReporterTests.cs @@ -376,7 +376,7 @@ public void GenerateHtml_SubstitutesTitleAndProjectPlaceholders() } [Test] - public void GenerateHtml_Constrains_Outcome_Timeline_To_Its_Grid_Column() + public void GenerateHtml_EmitsOutcomeTimelineOverflowCss() { var html = HtmlReportGenerator.GenerateHtml(new ReportData { @@ -392,7 +392,11 @@ public void GenerateHtml_Constrains_Outcome_Timeline_To_Its_Grid_Column() }); html.ShouldContain("grid-template-columns: 320px minmax(0, 1fr) minmax(0, 1fr)"); - html.ShouldContain(".outcome-strip { display: flex; gap: 1px; height: 60px; align-items: stretch; overflow-x: auto; overflow-y: hidden; }"); + html.ShouldContain("@media (max-width: 1100px) { .run-grid-1 { grid-template-columns: minmax(0, 1fr); } }"); + html.ShouldContain(".run-grid-1, .run-grid-2 { grid-template-columns: minmax(0, 1fr); gap: 12px; }"); + html.ShouldContain(".outcome-strip-scroll { overflow-x: auto; overflow-y: hidden; padding: 2px 0; }"); + html.ShouldContain(".outcome-strip-content { width: max-content; min-width: 100%; }"); + html.ShouldContain("
"); } [Test]