diff --git a/packages/html-reporter/src/testCaseView.css b/packages/html-reporter/src/testCaseView.css
index d87cf3aacb..90e2f4057b 100644
--- a/packages/html-reporter/src/testCaseView.css
+++ b/packages/html-reporter/src/testCaseView.css
@@ -47,6 +47,7 @@
   flex: none;
   align-items: center;
   padding: 0 8px 8px;
+  line-height: 24px;
 }
 
 .test-case-path {
diff --git a/packages/html-reporter/src/testCaseView.spec.tsx b/packages/html-reporter/src/testCaseView.spec.tsx
index 72552f5184..7c9c99eeb3 100644
--- a/packages/html-reporter/src/testCaseView.spec.tsx
+++ b/packages/html-reporter/src/testCaseView.spec.tsx
@@ -81,9 +81,9 @@ test('should render copy buttons for annotations', async ({ mount, page, context
 
   const component = await mount(<TestCaseView projectNames={['chromium', 'webkit']} test={testCase} run={0} anchor=''></TestCaseView>);
   await expect(component.getByText('Annotation text', { exact: false }).first()).toBeVisible();
-  component.getByText('Annotation text', { exact: false }).first().hover();
-  await expect(component.getByLabel('Copy to clipboard').first()).toBeVisible();
-  await component.getByLabel('Copy to clipboard').first().click();
+  await component.getByText('Annotation text', { exact: false }).first().hover();
+  await expect(component.locator('.test-case-annotation').getByLabel('Copy to clipboard').first()).toBeVisible();
+  await component.locator('.test-case-annotation').getByLabel('Copy to clipboard').first().click();
   const handle = await page.evaluateHandle(() => navigator.clipboard.readText());
   const clipboardContent = await handle.jsonValue();
   expect(clipboardContent).toBe('Annotation text');
diff --git a/packages/html-reporter/src/testCaseView.tsx b/packages/html-reporter/src/testCaseView.tsx
index 1fe4f42ed3..e3656bf414 100644
--- a/packages/html-reporter/src/testCaseView.tsx
+++ b/packages/html-reporter/src/testCaseView.tsx
@@ -50,7 +50,11 @@ export const TestCaseView: React.FC<{
     {test && <div className='test-case-path'>{test.path.join(' › ')}</div>}
     {test && <div className='test-case-title'>{test?.title}</div>}
     {test && <div className='hbox'>
-      <div className='test-case-location'>{test.location.file}:{test.location.line}</div>
+      <div className='test-case-location'>
+        <CopyToClipboardContainer value={`${test?.location.file}:${test?.location.line}`}>
+          {test.location.file}:{test.location.line}
+        </CopyToClipboardContainer>
+      </div>
       <div style={{ flex: 'auto' }}></div>
       <div className='test-case-duration'>{msToString(test.duration)}</div>
     </div>}