Styling tweaks

core/ui/TestCases/DefaultTemplate.tid

@@ -23,10 +23,12 @@ title: $:/core/ui/testcases/DefaultTemplate
 		</div>
 		<%if [<testResult>match[fail]] %>
 			<div class="tc-testcase-result-fail">
-				<div>
-				TEST FAILED
+				<div class="tc-testcase-result-fail-header">
+					TEST FAILED
+				</div>
+				<div class="tc-testcase-result-fail-body">
+					<$diff-text source=<<expectedHTML>> dest=<<outputHTML>>/>
 				</div>
-				<$diff-text source=<<expectedHTML>> dest=<<outputHTML>>/>
 			</div>
 		<%endif%>
 		<div class="tc-testcase-panes">

editions/tw5.com/tiddlers/testcases/TestCaseWidget/FailingTest.tid

@@ -8,4 +8,4 @@ title: Output
 The sum is <$text text={{{ [[2]add[2]] }}}/>.
 +
 title: ExpectedResult
-text: The sum is not 8.
+text: <p>The sum is not 8.</p>

themes/tiddlywiki/vanilla/base.tid

@@ -3277,13 +3277,6 @@ span.tc-translink > a:first-child {
 	height: 0.5em;
 }
 
-.tc-testcase-result-fail {
-	border: 1px solid <<colour foreground>>;
-	background-color: <<colour background>>;
-	margin: 1em;
-	padding: 1em;
-}
-
 .tc-testcase-header > h2,
 .tc-testcase-source > pre {
 	margin: 0;
@@ -3293,6 +3286,24 @@ span.tc-translink > a:first-child {
 	font-style: normal;
 }
 
+.tc-testcase-result-fail {
+	border: 1px solid <<colour foreground>>;
+	background-color: <<colour background>>;
+	border-radius: 4px;
+	margin: 0 0.5em;
+	padding: 0;
+}
+
+.tc-testcase-result-fail-header {
+	background: <<colour foreground>>;
+	color: <<colour background>>;
+	padding: 4px;
+}
+
+.tc-testcase-result-fail-body {
+	padding: 4px;
+}
+
 .tc-testcase-source > pre {
 	height: 100%;
 }