From 56b0ea91c91d1635c06d91efe9002d383f30217a Mon Sep 17 00:00:00 2001
From: diegosouzapw <diego.souza.pw@gmail.com>
Date: Sat, 16 May 2026 17:46:50 -0300
Subject: [PATCH] fix(endpoint): replace nested <button> with <div role=button>
 in tunnel toggle rows

Tailscale and ngrok expandable rows used <button> as outer container while also
containing inner <button> elements (copy URL, action buttons). Nested buttons are
invalid HTML and caused a React hydration error that prevented the app from
loading in the browser (stuck on Loading... spinner).
---
 .../dashboard/endpoint/EndpointPageClient.tsx | 28 +++++++++++++++----
 1 file changed, 22 insertions(+), 6 deletions(-)

diff --git a/src/app/(dashboard)/dashboard/endpoint/EndpointPageClient.tsx b/src/app/(dashboard)/dashboard/endpoint/EndpointPageClient.tsx
index 2e93ee347a..e82fe9d9e0 100644
--- a/src/app/(dashboard)/dashboard/endpoint/EndpointPageClient.tsx
+++ b/src/app/(dashboard)/dashboard/endpoint/EndpointPageClient.tsx
@@ -1450,9 +1450,17 @@ export default function APIPageClient({ machineId }: Readonly<APIPageClientProps
           {/* Tailscale Funnel */}
           {showTailscaleFunnel && (
             <div className={showCloudflaredTunnel ? "border-t border-border/30" : ""}>
-              <button
-                className="w-full flex items-center gap-3 py-3 hover:bg-surface/40 transition-colors rounded -mx-1 px-1 text-left"
+              <div
+                role="button"
+                tabIndex={0}
+                className="w-full flex items-center gap-3 py-3 hover:bg-surface/40 transition-colors rounded -mx-1 px-1 text-left cursor-pointer"
                 onClick={() => setExpandedTunnel(expandedTunnel === "ts" ? null : "ts")}
+                onKeyDown={(e) => {
+                  if (e.key === "Enter" || e.key === " ") {
+                    e.preventDefault();
+                    setExpandedTunnel(expandedTunnel === "ts" ? null : "ts");
+                  }
+                }}
               >
                 <span className="material-symbols-outlined text-[18px] text-indigo-400 shrink-0">
                   vpn_lock
@@ -1515,7 +1523,7 @@ export default function APIPageClient({ machineId }: Readonly<APIPageClientProps
                 >
                   expand_more
                 </span>
-              </button>
+              </div>
               {expandedTunnel === "ts" && (
                 <div className="pb-3 pl-7 pr-1 flex flex-col gap-2">
                   {tailscaleNotice && (
@@ -1600,9 +1608,17 @@ export default function APIPageClient({ machineId }: Readonly<APIPageClientProps
                 showCloudflaredTunnel || showTailscaleFunnel ? "border-t border-border/30" : ""
               }
             >
-              <button
-                className="w-full flex items-center gap-3 py-3 hover:bg-surface/40 transition-colors rounded -mx-1 px-1 text-left"
+              <div
+                role="button"
+                tabIndex={0}
+                className="w-full flex items-center gap-3 py-3 hover:bg-surface/40 transition-colors rounded -mx-1 px-1 text-left cursor-pointer"
                 onClick={() => setExpandedTunnel(expandedTunnel === "ngrok" ? null : "ngrok")}
+                onKeyDown={(e) => {
+                  if (e.key === "Enter" || e.key === " ") {
+                    e.preventDefault();
+                    setExpandedTunnel(expandedTunnel === "ngrok" ? null : "ngrok");
+                  }
+                }}
               >
                 <span className="material-symbols-outlined text-[18px] text-purple-400 shrink-0">
                   public
@@ -1640,7 +1656,7 @@ export default function APIPageClient({ machineId }: Readonly<APIPageClientProps
                 >
                   expand_more
                 </span>
-              </button>
+              </div>
               {expandedTunnel === "ngrok" && (
                 <div className="pb-3 pl-7 pr-1 flex flex-col gap-2">
                   {ngrokNotice && (