From a5476c3ba57cfb1ca5392e6b29a6b7bf19c40a38 Mon Sep 17 00:00:00 2001
From: Thomas Petersen <thomasp@squareup.com>
Date: Thu, 4 Jun 2026 07:06:12 -0400
Subject: [PATCH] fix(desktop): keep channel actions with conversation

Co-authored-by: Cursor <cursoragent@cursor.com>
---
 .../src/features/channels/ui/ChannelMembersBar.tsx   | 12 ++++++------
 desktop/src/features/channels/ui/ChannelScreen.tsx   |  3 +++
 .../src/features/channels/ui/ChannelScreenHeader.tsx |  3 +++
 desktop/src/features/chat/ui/ChatHeader.tsx          | 11 ++++++++++-
 4 files changed, 22 insertions(+), 7 deletions(-)

diff --git a/desktop/src/features/channels/ui/ChannelMembersBar.tsx b/desktop/src/features/channels/ui/ChannelMembersBar.tsx
index 54e6ce0a2..83b9f80d4 100644
--- a/desktop/src/features/channels/ui/ChannelMembersBar.tsx
+++ b/desktop/src/features/channels/ui/ChannelMembersBar.tsx
@@ -87,7 +87,7 @@ export function ChannelMembersBar({
       <div className="flex items-center gap-1">
         <Button
           aria-label="Add agent"
-          className="h-6 w-6 rounded-full"
+          className="h-6 w-6 rounded-full [&_svg]:!size-[14px]"
           data-testid="channel-add-bot-trigger"
           disabled={!canAddAgents}
           onClick={() => {
@@ -102,20 +102,20 @@ export function ChannelMembersBar({
 
         <Button
           aria-label={`View channel members (${memberCount})`}
-          className="h-6 gap-1 rounded-full px-1.5"
+          className="h-6 gap-1 rounded-full px-1.5 [&_svg]:!size-3"
           data-testid="channel-members-trigger"
           onClick={onToggleMembers}
           type="button"
           variant="outline"
         >
-          <Users className="h-2 w-2" />
+          <Users className="h-2.5 w-2.5" />
           <span className="min-w-[1ch] text-[10px] font-medium tabular-nums">
             {memberCount}
           </span>
         </Button>
 
         <HuddleIndicator
-          className="h-6 w-6 [&_svg]:h-3 [&_svg]:w-3"
+          className="h-6 w-6 [&_svg]:!size-[13px]"
           channelId={channel.id}
           onStart={async () => {
             try {
@@ -132,14 +132,14 @@ export function ChannelMembersBar({
 
         <Button
           aria-label="Manage channel"
-          className="h-6 w-6 rounded-full"
+          className="h-6 w-6 rounded-full [&_svg]:!size-3"
           data-testid="channel-management-trigger"
           onClick={onManageChannel}
           size="icon"
           type="button"
           variant="outline"
         >
-          <Settings2 className="h-2 w-2" />
+          <Settings2 className="h-2.5 w-2.5" />
         </Button>
       </div>
 
diff --git a/desktop/src/features/channels/ui/ChannelScreen.tsx b/desktop/src/features/channels/ui/ChannelScreen.tsx
index 074d1ebc9..c11d5099d 100644
--- a/desktop/src/features/channels/ui/ChannelScreen.tsx
+++ b/desktop/src/features/channels/ui/ChannelScreen.tsx
@@ -440,6 +440,8 @@ export function ChannelScreen({
     Boolean(
       openThreadHeadMessage || openAgentSessionPubkey || profilePanelPubkey,
     );
+  const headerActionsInsetRightPx =
+    !isSinglePanelView && openThreadHeadMessage ? threadPanelWidthPx : 0;
 
   return (
     <AgentSessionProvider onOpenAgentSession={handleOpenAgentSession}>
@@ -449,6 +451,7 @@ export function ChannelScreen({
           activeChannelEphemeralDisplay={activeChannelEphemeralDisplay}
           activeChannelTitle={activeChannelTitle}
           activeDmPresenceStatus={activeDmPresenceStatus}
+          actionsInsetRightPx={headerActionsInsetRightPx}
           currentPubkey={currentPubkey}
           isJoining={joinChannelMutation.isPending}
           onJoinChannel={joinChannelMutation.mutateAsync}
diff --git a/desktop/src/features/channels/ui/ChannelScreenHeader.tsx b/desktop/src/features/channels/ui/ChannelScreenHeader.tsx
index 1421f1366..90e9b3618 100644
--- a/desktop/src/features/channels/ui/ChannelScreenHeader.tsx
+++ b/desktop/src/features/channels/ui/ChannelScreenHeader.tsx
@@ -15,6 +15,7 @@ type ChannelScreenHeaderProps = {
   activeChannelEphemeralDisplay: EphemeralChannelDisplay | null;
   activeChannelTitle: string;
   activeDmPresenceStatus: PresenceStatus | null;
+  actionsInsetRightPx?: number;
   currentPubkey?: string;
   isJoining?: boolean;
   showHeaderContent?: boolean;
@@ -28,6 +29,7 @@ export function ChannelScreenHeader({
   activeChannelEphemeralDisplay,
   activeChannelTitle,
   activeDmPresenceStatus,
+  actionsInsetRightPx = 0,
   currentPubkey,
   isJoining = false,
   showHeaderContent = true,
@@ -79,6 +81,7 @@ export function ChannelScreenHeader({
 
   return (
     <ChatHeader
+      actionsInsetRightPx={actionsInsetRightPx}
       belowSystemChrome
       density="compact"
       actions={actions}
diff --git a/desktop/src/features/chat/ui/ChatHeader.tsx b/desktop/src/features/chat/ui/ChatHeader.tsx
index 597bc4929..96a9a8333 100644
--- a/desktop/src/features/chat/ui/ChatHeader.tsx
+++ b/desktop/src/features/chat/ui/ChatHeader.tsx
@@ -18,6 +18,7 @@ import { cn } from "@/shared/lib/cn";
 
 type ChatHeaderProps = {
   actions?: React.ReactNode;
+  actionsInsetRightPx?: number;
   actionsPlacement?: "inline" | "top-right";
   belowSystemChrome?: boolean;
   density?: "default" | "compact";
@@ -79,6 +80,7 @@ function ChannelIcon({
 
 export function ChatHeader({
   actions,
+  actionsInsetRightPx = 0,
   actionsPlacement = "inline",
   belowSystemChrome = false,
   density = "default",
@@ -98,6 +100,10 @@ export function ChatHeader({
           iconClassName: "h-3 w-3",
         }
       : {};
+  const inlineActionsStyle: React.CSSProperties | undefined =
+    actionsInsetRightPx > 0
+      ? { marginRight: `${actionsInsetRightPx}px` }
+      : undefined;
   const topRightActions = (
     <div className="fixed right-3 top-[9px] z-[45] flex shrink-0 items-center gap-1">
       <UpdateIndicator />
@@ -144,7 +150,10 @@ export function ChatHeader({
           createPortal(topRightActions, document.body)
         )
       ) : (
-        <div className="flex shrink-0 items-center gap-1">
+        <div
+          className="flex shrink-0 items-center gap-1"
+          style={inlineActionsStyle}
+        >
           <UpdateIndicator {...compactUpdateIndicatorProps} />
           {actions ? <div className="shrink-0">{actions}</div> : null}
         </div>