fix: replace button with div in IdBadge to prevent hydration issues (#6601)

apps/web/modules/ui/components/id-badge/components/badge-content.tsx

@@ -1,10 +1,10 @@
 "use client";
 
-import { cn } from "@/lib/cn";
-import { Tooltip, TooltipContent, TooltipProvider, TooltipTrigger } from "@/modules/ui/components/tooltip";
 import { useTranslate } from "@tolgee/react";
 import { Check, Copy } from "lucide-react";
 import React from "react";
+import { cn } from "@/lib/cn";
+import { Tooltip, TooltipContent, TooltipProvider, TooltipTrigger } from "@/modules/ui/components/tooltip";
 
 interface BadgeContentProps {
   id: string | number;
@@ -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 = () => {

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");