From 781d1acf8a412df882fbd49ae1dd2f31a1a3096f Mon Sep 17 00:00:00 2001
From: Wes <wesbillman@users.noreply.github.com>
Date: Mon, 22 Jun 2026 14:15:10 -0700
Subject: [PATCH] fix(desktop): keep thread guides behind the reply composer
 (#1179)

Signed-off-by: Wes <wesbillman@users.noreply.github.com>
Co-authored-by: Pinky <44b8e82baa6e0e254e0208d68f335c283c94e7b78dd1fa10d5a49d3f13dd0435@sprout-oss.stage.blox.sqprod.co>
---
 .../src/features/messages/ui/MessageRow.tsx   | 90 +++++++++---------
 .../messages/ui/MessageThreadSummaryRow.tsx   | 94 ++++++++++---------
 2 files changed, 92 insertions(+), 92 deletions(-)

diff --git a/desktop/src/features/messages/ui/MessageRow.tsx b/desktop/src/features/messages/ui/MessageRow.tsx
index 63a67a2b1..efbacc681 100644
--- a/desktop/src/features/messages/ui/MessageRow.tsx
+++ b/desktop/src/features/messages/ui/MessageRow.tsx
@@ -459,58 +459,56 @@ export const MessageRow = React.memo(
               const isHighlighted =
                 Boolean(collapseAction?.active) ||
                 Boolean(highlightThreadLineDepths?.includes(depth));
-              const lineClassName = cn(
-                "absolute bottom-0 left-1/2 top-0 border-l transition-[border-color]",
-                isHighlighted
-                  ? "border-primary"
-                  : "border-border group-hover/thread-guide:border-primary group-focus-visible/thread-guide:border-primary",
-              );
-
               if (collapseAction) {
                 return (
-                  <button
-                    aria-label={collapseAction.label}
-                    className="group/thread-guide absolute bottom-0 top-0 z-20 w-5 -translate-x-1/2 cursor-pointer rounded-full focus-visible:outline-hidden"
-                    data-thread-head-id={collapseAction.message.id}
-                    data-testid="thread-collapse-guide"
-                    key={`${message.id}-depth-guide-${offset}`}
-                    onBlur={() =>
-                      handleCollapseDepthGuideHoverChange(
-                        collapseAction.message,
-                        false,
-                      )
-                    }
-                    onClick={(event) =>
-                      handleCollapseDepthGuide(event, collapseAction.message)
-                    }
-                    onFocus={() =>
-                      handleCollapseDepthGuideHoverChange(
-                        collapseAction.message,
-                        true,
-                      )
-                    }
-                    onMouseEnter={() =>
-                      handleCollapseDepthGuideHoverChange(
-                        collapseAction.message,
-                        true,
-                      )
-                    }
-                    onMouseLeave={() =>
-                      handleCollapseDepthGuideHoverChange(
-                        collapseAction.message,
-                        false,
-                      )
-                    }
-                    style={{ left: `${offset}px` }}
-                    type="button"
-                  >
-                    <span
-                      className={lineClassName}
+                  <React.Fragment key={`${message.id}-depth-guide-${offset}`}>
+                    <div
+                      aria-hidden
+                      className={cn(
+                        "pointer-events-none absolute bottom-0 top-0 border-l transition-[border-color]",
+                        isHighlighted ? "border-primary" : "border-border",
+                      )}
                       style={{
                         borderLeftWidth: `${THREAD_REPLY_LINE_WIDTH_PX}px`,
+                        left: `${offset}px`,
                       }}
                     />
-                  </button>
+                    <button
+                      aria-label={collapseAction.label}
+                      className="absolute bottom-0 top-0 z-20 w-5 -translate-x-1/2 cursor-pointer rounded-full focus-visible:outline-hidden"
+                      data-thread-head-id={collapseAction.message.id}
+                      data-testid="thread-collapse-guide"
+                      onBlur={() =>
+                        handleCollapseDepthGuideHoverChange(
+                          collapseAction.message,
+                          false,
+                        )
+                      }
+                      onClick={(event) =>
+                        handleCollapseDepthGuide(event, collapseAction.message)
+                      }
+                      onFocus={() =>
+                        handleCollapseDepthGuideHoverChange(
+                          collapseAction.message,
+                          true,
+                        )
+                      }
+                      onMouseEnter={() =>
+                        handleCollapseDepthGuideHoverChange(
+                          collapseAction.message,
+                          true,
+                        )
+                      }
+                      onMouseLeave={() =>
+                        handleCollapseDepthGuideHoverChange(
+                          collapseAction.message,
+                          false,
+                        )
+                      }
+                      style={{ left: `${offset}px` }}
+                      type="button"
+                    />
+                  </React.Fragment>
                 );
               }
 
diff --git a/desktop/src/features/messages/ui/MessageThreadSummaryRow.tsx b/desktop/src/features/messages/ui/MessageThreadSummaryRow.tsx
index ea29b8749..51adeb82d 100644
--- a/desktop/src/features/messages/ui/MessageThreadSummaryRow.tsx
+++ b/desktop/src/features/messages/ui/MessageThreadSummaryRow.tsx
@@ -1,3 +1,5 @@
+import * as React from "react";
+
 import type {
   TimelineThreadSummary,
   TimelineThreadSummaryParticipant,
@@ -114,60 +116,60 @@ export function MessageThreadSummaryRow({
             const isHighlighted =
               Boolean(collapseAction?.active) ||
               Boolean(highlightThreadLineDepths?.includes(guideDepth));
-            const lineClassName = cn(
-              "absolute bottom-0 left-1/2 top-0 border-l transition-[border-color]",
-              isHighlighted
-                ? "border-primary"
-                : "border-border group-hover/thread-guide:border-primary group-focus-visible/thread-guide:border-primary",
-            );
-
             if (collapseAction) {
               return (
-                <button
-                  aria-label={collapseAction.label}
-                  className="group/thread-guide absolute bottom-0 top-0 z-20 w-5 -translate-x-1/2 cursor-pointer rounded-full focus-visible:outline-hidden"
-                  data-thread-head-id={collapseAction.message.id}
-                  data-testid="thread-collapse-guide"
+                <React.Fragment
                   key={`${message.id}-summary-depth-guide-${offset}`}
-                  onBlur={() =>
-                    onCollapseDepthGuideHoverChange?.(
-                      collapseAction.message,
-                      false,
-                    )
-                  }
-                  onClick={(event) => {
-                    event.preventDefault();
-                    event.stopPropagation();
-                    onCollapseDepthGuide?.(collapseAction.message);
-                  }}
-                  onFocus={() =>
-                    onCollapseDepthGuideHoverChange?.(
-                      collapseAction.message,
-                      true,
-                    )
-                  }
-                  onMouseEnter={() =>
-                    onCollapseDepthGuideHoverChange?.(
-                      collapseAction.message,
-                      true,
-                    )
-                  }
-                  onMouseLeave={() =>
-                    onCollapseDepthGuideHoverChange?.(
-                      collapseAction.message,
-                      false,
-                    )
-                  }
-                  style={{ left: `${offset}px` }}
-                  type="button"
                 >
-                  <span
-                    className={lineClassName}
+                  <div
+                    aria-hidden
+                    className={cn(
+                      "pointer-events-none absolute bottom-0 top-0 border-l transition-[border-color]",
+                      isHighlighted ? "border-primary" : "border-border",
+                    )}
                     style={{
                       borderLeftWidth: `${THREAD_REPLY_LINE_WIDTH_PX}px`,
+                      left: `${offset}px`,
                     }}
                   />
-                </button>
+                  <button
+                    aria-label={collapseAction.label}
+                    className="absolute bottom-0 top-0 z-20 w-5 -translate-x-1/2 cursor-pointer rounded-full focus-visible:outline-hidden"
+                    data-thread-head-id={collapseAction.message.id}
+                    data-testid="thread-collapse-guide"
+                    onBlur={() =>
+                      onCollapseDepthGuideHoverChange?.(
+                        collapseAction.message,
+                        false,
+                      )
+                    }
+                    onClick={(event) => {
+                      event.preventDefault();
+                      event.stopPropagation();
+                      onCollapseDepthGuide?.(collapseAction.message);
+                    }}
+                    onFocus={() =>
+                      onCollapseDepthGuideHoverChange?.(
+                        collapseAction.message,
+                        true,
+                      )
+                    }
+                    onMouseEnter={() =>
+                      onCollapseDepthGuideHoverChange?.(
+                        collapseAction.message,
+                        true,
+                      )
+                    }
+                    onMouseLeave={() =>
+                      onCollapseDepthGuideHoverChange?.(
+                        collapseAction.message,
+                        false,
+                      )
+                    }
+                    style={{ left: `${offset}px` }}
+                    type="button"
+                  />
+                </React.Fragment>
               );
             }