From 92d03f4de3746970ab80e74644af389bedf2227e Mon Sep 17 00:00:00 2001
From: jerryzhou196 <jerry.zhou@sentry.io>
Date: Tue, 18 Nov 2025 10:56:56 -0500
Subject: [PATCH] fix(replay): move hover to be over buttons

---
 .../header/replayDetailsPageBreadcrumbs.tsx   | 47 ++++++++++---------
 1 file changed, 24 insertions(+), 23 deletions(-)

diff --git a/static/app/views/replays/detail/header/replayDetailsPageBreadcrumbs.tsx b/static/app/views/replays/detail/header/replayDetailsPageBreadcrumbs.tsx
index eeba4a73fe4987..9900f0c96108cc 100644
--- a/static/app/views/replays/detail/header/replayDetailsPageBreadcrumbs.tsx
+++ b/static/app/views/replays/detail/header/replayDetailsPageBreadcrumbs.tsx
@@ -100,12 +100,7 @@ export default function ReplayDetailsPageBreadcrumbs({readerResult}: Props) {
   const replayCrumb = {
     label: replayRecord ? (
       <Flex>
-        <Flex
-          align="center"
-          gap="xs"
-          onMouseEnter={() => setIsHovered(true)}
-          onMouseLeave={() => setIsHovered(false)}
-        >
+        <Flex align="center" gap="xs">
           {organization.features.includes('replay-playlist-view') && (
             <Flex>
               <ButtonBar merged gap="0">
@@ -149,29 +144,35 @@ export default function ReplayDetailsPageBreadcrumbs({readerResult}: Props) {
               </ButtonBar>
             </Flex>
           )}
-          <ShortId
-            onClick={() =>
-              copy(replayUrlWithTimestamp, {
-                successMessage: t('Copied replay link to clipboard'),
-              })
-            }
+          <Flex
+            align="center"
+            onMouseEnter={() => setIsHovered(true)}
+            onMouseLeave={() => setIsHovered(false)}
           >
-            {getShortEventId(replayRecord?.id)}
-          </ShortId>
-          <Tooltip title={t('Copy link to replay at current timestamp')}>
-            <Button
-              aria-label={t('Copy link to replay at current timestamp')}
+            <ShortId
               onClick={() =>
                 copy(replayUrlWithTimestamp, {
                   successMessage: t('Copied replay link to clipboard'),
                 })
               }
-              size="zero"
-              borderless
-              style={isHovered ? {} : {visibility: 'hidden'}}
-              icon={<IconCopy size="xs" color="subText" />}
-            />
-          </Tooltip>
+            >
+              {getShortEventId(replayRecord?.id)}
+            </ShortId>
+            <Tooltip title={t('Copy link to replay at current timestamp')}>
+              <Button
+                aria-label={t('Copy link to replay at current timestamp')}
+                onClick={() =>
+                  copy(replayUrlWithTimestamp, {
+                    successMessage: t('Copied replay link to clipboard'),
+                  })
+                }
+                size="zero"
+                borderless
+                style={isHovered ? {} : {visibility: 'hidden'}}
+                icon={<IconCopy size="xs" color="subText" />}
+              />
+            </Tooltip>
+          </Flex>
         </Flex>
       </Flex>
     ) : (