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>.
This commit is contained in:
2026-07-02 08:52:26 -04:00
parent 74a1db8392
commit c0686d4ca3
+7 -5
View File
@@ -288,19 +288,21 @@ export function ChannelList() {
<span className="text-gb-orange text-xs font-bold" title="Unread messages"></span> <span className="text-gb-orange text-xs font-bold" title="Unread messages"></span>
)} )}
<span className="flex items-center gap-1 text-xs"> <span className="flex items-center gap-1 text-xs">
<button <span
onClick={(e) => handleNotifClick(e, channel.id)} 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)]}`} title={`Notifications: ${NOTIF_LABELS[getLevel(channel.id)]}`}
role="button"
tabIndex={-1}
> >
{notifIcon(channel.id)} {notifIcon(channel.id)}
</button> </span>
<span <span
onClick={(e) => { e.stopPropagation(); setSettingsChannel({ id: channel.id, name: channel.name }); }} 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" title="Channel settings"
role="button" role="button"
tabIndex={0} tabIndex={-1}
> >
[] []
</span> </span>