From f64606568652de3d12051849ca44e2775c987073 Mon Sep 17 00:00:00 2001
From: Adam Gastineau <adam@agg.im>
Date: Tue, 9 Sep 2025 06:37:24 -0700
Subject: [PATCH] fix(trace-viewer): prevent browser address bar bouncing based
 on URL

---
 packages/trace-viewer/src/ui/browserFrame.css | 11 +++++++++--
 packages/trace-viewer/src/ui/browserFrame.tsx |  2 +-
 2 files changed, 10 insertions(+), 3 deletions(-)

diff --git a/packages/trace-viewer/src/ui/browserFrame.css b/packages/trace-viewer/src/ui/browserFrame.css
index e4fbdfdd4c432..c866646d4de3d 100644
--- a/packages/trace-viewer/src/ui/browserFrame.css
+++ b/packages/trace-viewer/src/ui/browserFrame.css
@@ -18,8 +18,6 @@
   border-radius: 50%;
   display: inline-block;
   height: 12px;
-  margin-right: 6px;
-  margin-top: 4px;
   width: 12px;
 }
 
@@ -36,6 +34,7 @@
   white-space: nowrap;
   display: flex;
   align-items: center;
+  height: 28px;
 }
 
 .browser-frame-address-bar > button {
@@ -67,3 +66,11 @@
 body.dark-mode .browser-frame-header {
   background: #444950;
 }
+
+.browser-traffic-lights {
+  display: grid;
+  white-space: nowrap;
+  grid-template-columns: auto auto auto;
+  column-gap: 6px;
+  margin-right: 8px;
+}
diff --git a/packages/trace-viewer/src/ui/browserFrame.tsx b/packages/trace-viewer/src/ui/browserFrame.tsx
index 20dac3e1343f0..f689b52cfaafc 100644
--- a/packages/trace-viewer/src/ui/browserFrame.tsx
+++ b/packages/trace-viewer/src/ui/browserFrame.tsx
@@ -22,7 +22,7 @@ export const BrowserFrame: React.FunctionComponent<{
   url?: string,
 }> = ({ url }): React.ReactElement => {
   return <div className='browser-frame-header'>
-    <div style={{ whiteSpace: 'nowrap' }}>
+    <div className='browser-traffic-lights'>
       <span className='browser-frame-dot' style={{ backgroundColor: 'rgb(242, 95, 88)' }}></span>
       <span className='browser-frame-dot' style={{ backgroundColor: 'rgb(251, 190, 60)' }}></span>
       <span className='browser-frame-dot' style={{ backgroundColor: 'rgb(88, 203, 66)' }}></span>