Skip to content

Commit b16ff91

Browse files
authored
chore(html): align trace button so it doesn't resize the test row (microsoft#36815)
1 parent a6c7d94 commit b16ff91

File tree

2 files changed

+23
-6
lines changed

2 files changed

+23
-6
lines changed

packages/html-reporter/src/testFileView.css

Lines changed: 15 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -41,6 +41,21 @@
4141
align-items: center;
4242
}
4343

44+
.test-file-details-row-items {
45+
display: flex;
46+
height: 16px;
47+
}
48+
49+
.test-file-details-row-items > .link-badge {
50+
/* Align badges */
51+
margin-top: -2px;
52+
}
53+
54+
.test-file-details-row-items > .trace-link {
55+
/* Center in row */
56+
margin-top: -4px;
57+
}
58+
4459
.test-file-path {
4560
text-overflow: ellipsis;
4661
overflow: hidden;

packages/html-reporter/src/testFileView.tsx

Lines changed: 8 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -59,12 +59,14 @@ export const TestFileView: React.FC<React.PropsWithChildren<{
5959
<span data-testid='test-duration' style={{ minWidth: '50px', textAlign: 'right' }}>{msToString(test.duration)}</span>
6060
</div>
6161
<div className='test-file-details-row'>
62-
<Link href={testResultHref({ test })} title={[...test.path, test.title].join(' › ')} className='test-file-path-link'>
63-
<span className='test-file-path'>{test.___location.file}:{test.___location.line}</span>
64-
</Link>
65-
{imageDiffBadge(test)}
66-
{videoBadge(test)}
67-
<TraceLink test={test} dim={true} />
62+
<div className='test-file-details-row-items'>
63+
<Link href={testResultHref({ test })} title={[...test.path, test.title].join(' › ')} className='test-file-path-link'>
64+
<span className='test-file-path'>{test.___location.file}:{test.___location.line}</span>
65+
</Link>
66+
{imageDiffBadge(test)}
67+
{videoBadge(test)}
68+
<TraceLink test={test} dim={true} />
69+
</div>
6870
</div>
6971
</div>
7072
)}

0 commit comments

Comments
 (0)