From 6cab3122ed2f82e950749b990fed791d5eff93de Mon Sep 17 00:00:00 2001
From: cpadm <57954026+cpAdm@users.noreply.github.com>
Date: Sat, 11 Oct 2025 11:35:34 +0200
Subject: [PATCH 1/3] feat(trace): Pin copy address button to the right in the
 address bar

---
 packages/trace-viewer/src/ui/browserFrame.css | 16 ++++++----------
 packages/trace-viewer/src/ui/browserFrame.tsx |  2 +-
 tests/library/trace-viewer.spec.ts            | 13 +++++--------
 3 files changed, 12 insertions(+), 19 deletions(-)

diff --git a/packages/trace-viewer/src/ui/browserFrame.css b/packages/trace-viewer/src/ui/browserFrame.css
index f72af1f600c4f..2adb452157cac 100644
--- a/packages/trace-viewer/src/ui/browserFrame.css
+++ b/packages/trace-viewer/src/ui/browserFrame.css
@@ -29,20 +29,16 @@
   font: 400 16px Arial,sans-serif;
   margin: 0 16px 0 8px;
   padding: 5px 15px;
-  overflow: hidden;
-  text-overflow: ellipsis;
-  white-space: nowrap;
   display: flex;
   align-items: center;
   height: 28px;
-}
-
-.browser-frame-address-bar > button {
-  visibility: hidden;
-}
 
-.browser-frame-address-bar:hover > button {
-  visibility: visible;
+  .browser-frame-address {
+    flex: 1;
+    overflow: hidden;
+    text-overflow: ellipsis;
+    white-space: nowrap;
+  }
 }
 
 .browser-frame-menu-bar {
diff --git a/packages/trace-viewer/src/ui/browserFrame.tsx b/packages/trace-viewer/src/ui/browserFrame.tsx
index f689b52cfaafc..4e17abe9aaa11 100644
--- a/packages/trace-viewer/src/ui/browserFrame.tsx
+++ b/packages/trace-viewer/src/ui/browserFrame.tsx
@@ -31,7 +31,7 @@ export const BrowserFrame: React.FunctionComponent<{
       className='browser-frame-address-bar'
       title={url || 'about:blank'}
     >
-      {url || 'about:blank'}
+      <span className='browser-frame-address'>{url || 'about:blank'}</span>
       {url && (
         <CopyToClipboard value={url} />
       )}
diff --git a/tests/library/trace-viewer.spec.ts b/tests/library/trace-viewer.spec.ts
index 2016cc16c80b3..76e557265bf0f 100644
--- a/tests/library/trace-viewer.spec.ts
+++ b/tests/library/trace-viewer.spec.ts
@@ -473,20 +473,17 @@ test('should have network request overrides 2', async ({ page, server, runAndTra
   await expect.soft(traceViewer.networkRequests).toContainText([/script.jsGET200application\/javascript.*continued/]);
 });
 
-test('should show snapshot URL', async ({ page, runAndTrace, server }) => {
+test('should show snapshot URL and copy button', async ({ page, runAndTrace, server }) => {
   const traceViewer = await runAndTrace(async () => {
     await page.goto(server.EMPTY_PAGE);
     await page.evaluate('2+2');
   });
   await traceViewer.snapshotFrame('Evaluate');
-  const browserFrameAddressBarLocator = traceViewer.page.locator('.browser-frame-address-bar');
-  await expect(browserFrameAddressBarLocator).toHaveText(server.EMPTY_PAGE);
-  const copySelectorLocator = browserFrameAddressBarLocator.getByRole('button', { name: 'Copy' });
-  await expect(copySelectorLocator).toBeHidden();
-  await browserFrameAddressBarLocator.hover();
-  await expect(copySelectorLocator).toBeVisible();
+  const addressBar = traceViewer.page.locator('.browser-frame-address-bar');
+  await expect(addressBar).toHaveText(server.EMPTY_PAGE);
+
   await traceViewer.page.context().grantPermissions(['clipboard-read', 'clipboard-write']);
-  await copySelectorLocator.click();
+  await addressBar.getByRole('button', { name: 'Copy' }).click();
   expect(await traceViewer.page.evaluate(() => navigator.clipboard.readText())).toBe(server.EMPTY_PAGE);
 });
 

From fb2763c094798f54a5c7bfc596d57e7ece87b973 Mon Sep 17 00:00:00 2001
From: cpadm <57954026+cpAdm@users.noreply.github.com>
Date: Mon, 13 Oct 2025 22:58:13 +0200
Subject: [PATCH 2/3] fix(trace): Prefer `flex: auto` for address

---
 packages/trace-viewer/src/ui/browserFrame.css | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/packages/trace-viewer/src/ui/browserFrame.css b/packages/trace-viewer/src/ui/browserFrame.css
index 2adb452157cac..0fbbf0b5e9ef4 100644
--- a/packages/trace-viewer/src/ui/browserFrame.css
+++ b/packages/trace-viewer/src/ui/browserFrame.css
@@ -34,7 +34,7 @@
   height: 28px;
 
   .browser-frame-address {
-    flex: 1;
+    flex: auto;
     overflow: hidden;
     text-overflow: ellipsis;
     white-space: nowrap;

From 3c64912804fc957559926512f49e72c906133a9d Mon Sep 17 00:00:00 2001
From: Chris <57954026+cpAdm@users.noreply.github.com>
Date: Sat, 18 Oct 2025 15:18:14 +0200
Subject: [PATCH 3/3] chore(trace): Unnest css selector

---
 packages/trace-viewer/src/ui/browserFrame.css | 12 ++++++------
 1 file changed, 6 insertions(+), 6 deletions(-)

diff --git a/packages/trace-viewer/src/ui/browserFrame.css b/packages/trace-viewer/src/ui/browserFrame.css
index 0fbbf0b5e9ef4..ed157fcb5f837 100644
--- a/packages/trace-viewer/src/ui/browserFrame.css
+++ b/packages/trace-viewer/src/ui/browserFrame.css
@@ -32,13 +32,13 @@
   display: flex;
   align-items: center;
   height: 28px;
+}
 
-  .browser-frame-address {
-    flex: auto;
-    overflow: hidden;
-    text-overflow: ellipsis;
-    white-space: nowrap;
-  }
+.browser-frame-address {
+  flex: auto;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
 }
 
 .browser-frame-menu-bar {