From 4112722a88e1781b5e57a3b040a3c01cdfaaed12 Mon Sep 17 00:00:00 2001
From: Dhruwang Jariwala <67850763+Dhruwang@users.noreply.github.com>
Date: Thu, 25 Sep 2025 19:12:29 +0530
Subject: [PATCH] fix: replace button with div in IdBadge to prevent hydration
 issues (backport) (#6602)

---
 .../ui/components/id-badge/components/badge-content.tsx     | 6 +++---
 apps/web/modules/ui/components/id-badge/index.test.tsx      | 2 +-
 2 files changed, 4 insertions(+), 4 deletions(-)

diff --git a/apps/web/modules/ui/components/id-badge/components/badge-content.tsx b/apps/web/modules/ui/components/id-badge/components/badge-content.tsx
index dd266da483..51ffcfec18 100644
--- a/apps/web/modules/ui/components/id-badge/components/badge-content.tsx
+++ b/apps/web/modules/ui/components/id-badge/components/badge-content.tsx
@@ -59,8 +59,8 @@ export const BadgeContent: React.FC<BadgeContentProps> = ({
   };
 
   const content = (
-    <button
-      type="button"
+    // eslint-disable-next-line jsx-a11y/no-noninteractive-element-interactions, jsx-a11y/prefer-tag-over-role, jsx-a11y/click-events-have-key-events, jsx-a11y/no-static-element-interactions
+    <div
       role={isCopyEnabled ? "button" : undefined}
       className={getButtonClasses()}
       onClick={handleCopy}
@@ -69,7 +69,7 @@ export const BadgeContent: React.FC<BadgeContentProps> = ({
       onMouseLeave={isCopyEnabled ? () => setIsHovered(false) : undefined}>
       <span>{id}</span>
       {renderIcon()}
-    </button>
+    </div>
   );
 
   const getTooltipContent = () => {
diff --git a/apps/web/modules/ui/components/id-badge/index.test.tsx b/apps/web/modules/ui/components/id-badge/index.test.tsx
index d4013745e7..49d8ce38d2 100644
--- a/apps/web/modules/ui/components/id-badge/index.test.tsx
+++ b/apps/web/modules/ui/components/id-badge/index.test.tsx
@@ -96,7 +96,7 @@ describe("IdBadge", () => {
   test("removes interactive elements when copy is disabled", () => {
     const { container } = render(<IdBadge id="1734" copyDisabled={true} />);
 
-    const badge = container.querySelector("button");
+    const badge = container.querySelector("div");
 
     // Should not have cursor-pointer class
     expect(badge).not.toHaveClass("cursor-pointer");