From c0686d4ca33a326a0a9e3136b87e4ec8e4264f28 Mon Sep 17 00:00:00 2001
From: hobokenchicken <dustin@dustin.coffee>
Date: Thu, 2 Jul 2026 08:52:26 -0400
Subject: [PATCH] fix: nested button inside button broke channel clicks

Invalid HTML: <button> inside <button> causes the browser to close
the outer button prematurely, so clicking the channel name never
fires setActiveChannel. Changed inner elements to <span role=button>.
---
 web/src/components/ChannelList.tsx | 12 +++++++-----
 1 file changed, 7 insertions(+), 5 deletions(-)

diff --git a/web/src/components/ChannelList.tsx b/web/src/components/ChannelList.tsx
index fe07e0e..fceb29a 100644
--- a/web/src/components/ChannelList.tsx
+++ b/web/src/components/ChannelList.tsx
@@ -288,19 +288,21 @@ export function ChannelList() {
               <span className="text-gb-orange text-xs font-bold" title="Unread messages">●</span>
             )}
             <span className="flex items-center gap-1 text-xs">
-              <button
+              <span
                 onClick={(e) => handleNotifClick(e, channel.id)}
-                className="text-gb-fg-f hover:text-gb-orange opacity-0 group-hover:opacity-100 transition-opacity"
+                className="text-gb-fg-f hover:text-gb-orange opacity-0 group-hover:opacity-100 transition-opacity cursor-pointer"
                 title={`Notifications: ${NOTIF_LABELS[getLevel(channel.id)]}`}
+                role="button"
+                tabIndex={-1}
               >
                 {notifIcon(channel.id)}
-              </button>
+              </span>
               <span
                 onClick={(e) => { e.stopPropagation(); setSettingsChannel({ id: channel.id, name: channel.name }); }}
-                className="text-gb-fg-f hover:text-gb-orange opacity-0 group-hover:opacity-100"
+                className="text-gb-fg-f hover:text-gb-orange opacity-0 group-hover:opacity-100 cursor-pointer"
                 title="Channel settings"
                 role="button"
-                tabIndex={0}
+                tabIndex={-1}
               >
                 [⚙]
               </span>