From e6ad01d29c7c250bb8bab154f85a2bc48811b776 Mon Sep 17 00:00:00 2001
From: morgmart <98432065+morgmart@users.noreply.github.com>
Date: Fri, 7 Aug 2026 10:11:43 -0700
Subject: [PATCH] fix(desktop): restore expanded thread gutters

Signed-off-by: morgmart <98432065+morgmart@users.noreply.github.com>
---
 .../src/features/channels/lib/threadFocusLayout.ts  |  2 +-
 .../messages/lib/messageThreadPanelLayout.ts        | 10 ++++++----
 .../src/features/messages/ui/MessageThreadPanel.tsx | 12 ++++++++----
 .../messages/ui/MessageThreadPanelSkeleton.tsx      | 13 ++++++-------
 4 files changed, 21 insertions(+), 16 deletions(-)

diff --git a/desktop/src/features/channels/lib/threadFocusLayout.ts b/desktop/src/features/channels/lib/threadFocusLayout.ts
index 55e2c05923..f14f3399bd 100644
--- a/desktop/src/features/channels/lib/threadFocusLayout.ts
+++ b/desktop/src/features/channels/lib/threadFocusLayout.ts
@@ -24,7 +24,7 @@ export const THREAD_FOCUS_SLIVER_WIDTH_PX = 72;
  * with auto horizontal margins so the reading measure stays comfortable no
  * matter how wide the window gets.
  */
-export const THREAD_FOCUS_COLUMN_MAX_WIDTH_PX = 760;
+export const THREAD_FOCUS_COLUMN_MAX_WIDTH_PX = 880;
 
 /**
  * Horizontal distance the focus drawer travels on enter/exit.
diff --git a/desktop/src/features/messages/lib/messageThreadPanelLayout.ts b/desktop/src/features/messages/lib/messageThreadPanelLayout.ts
index b7671e226f..a23510d887 100644
--- a/desktop/src/features/messages/lib/messageThreadPanelLayout.ts
+++ b/desktop/src/features/messages/lib/messageThreadPanelLayout.ts
@@ -6,13 +6,15 @@
 /** Inline gutter around thread message rows. */
 export const THREAD_PANEL_MESSAGE_GUTTER_CLASS = "px-4";
 
+/** Restores the original message gutter inside the expanded focus overlay. */
+export const THREAD_FOCUS_MESSAGE_GUTTER_CLASS = "px-2";
+
 /** Inline gutter around the thread composer and its activity row. */
 export const THREAD_PANEL_COMPOSER_GUTTER_CLASS = "px-5";
 
 /**
  * Centers the reading column when a `columnMaxWidthPx` is supplied (focus-mode
- * drawer). The responsive gutter keeps compact focus drawers usable while
- * preserving generous whitespace at desktop widths. The max-width itself is
- * applied inline since it is a caller-provided value.
+ * drawer). `px-10` is the original inline gutter between the column and drawer
+ * edges; the max-width itself is applied inline since it is caller-provided.
  */
-export const THREAD_PANEL_COLUMN_CLASS = "mx-auto w-full px-6 sm:px-10";
+export const THREAD_PANEL_COLUMN_CLASS = "mx-auto w-full px-10";
diff --git a/desktop/src/features/messages/ui/MessageThreadPanel.tsx b/desktop/src/features/messages/ui/MessageThreadPanel.tsx
index d3eac18dae..63c599c56d 100644
--- a/desktop/src/features/messages/ui/MessageThreadPanel.tsx
+++ b/desktop/src/features/messages/ui/MessageThreadPanel.tsx
@@ -34,6 +34,7 @@ import {
   AuxiliaryPanelTitle,
 } from "@/shared/layout/AuxiliaryPanel";
 import {
+  THREAD_FOCUS_MESSAGE_GUTTER_CLASS,
   THREAD_PANEL_COLUMN_CLASS,
   THREAD_PANEL_COMPOSER_GUTTER_CLASS,
   THREAD_PANEL_MESSAGE_GUTTER_CLASS,
@@ -255,6 +256,9 @@ export function MessageThreadPanel({
     !isHuddleTranscript && (isOverlay || isSinglePanelView || isFocusMode),
   );
   const hasConstrainedColumn = columnMaxWidthPx != null;
+  const messageGutterClass = hasConstrainedColumn
+    ? THREAD_FOCUS_MESSAGE_GUTTER_CLASS
+    : THREAD_PANEL_MESSAGE_GUTTER_CLASS;
   // Whether the composer dock trades its quiet-state spacer for the
   // conditional activity accessory (agent working and/or someone typing).
   const hasComposerBottomActivity =
@@ -569,12 +573,12 @@ export function MessageThreadPanel({
         }
       >
         {isHuddleTranscript ? (
-          <div className={cn(THREAD_PANEL_MESSAGE_GUTTER_CLASS, "pb-2 pt-4")}>
+          <div className={cn(messageGutterClass, "pb-2 pt-4")}>
             <HuddleTranscriptIntro />
           </div>
         ) : (
           <div
-            className={cn(THREAD_PANEL_MESSAGE_GUTTER_CLASS, "pb-2 pt-1")}
+            className={cn(messageGutterClass, "pb-2 pt-1")}
             data-testid="message-thread-head"
           >
             <div className="rounded-2xl">
@@ -631,7 +635,7 @@ export function MessageThreadPanel({
 
         {showThreadHeadDivider ? (
           <div
-            className={cn(THREAD_PANEL_MESSAGE_GUTTER_CLASS, "pb-4 pt-3")}
+            className={cn(messageGutterClass, "pb-4 pt-3")}
             data-testid="message-thread-head-divider"
           >
             <Separator className="bg-border/60" />
@@ -639,7 +643,7 @@ export function MessageThreadPanel({
         ) : null}
 
         <div
-          className={cn(THREAD_PANEL_MESSAGE_GUTTER_CLASS, "pb-4 pt-0")}
+          className={cn(messageGutterClass, "pb-4 pt-0")}
           data-testid="message-thread-replies"
         >
           {threadRepliesPending && !isHuddleTranscript ? (
diff --git a/desktop/src/features/messages/ui/MessageThreadPanelSkeleton.tsx b/desktop/src/features/messages/ui/MessageThreadPanelSkeleton.tsx
index 2d2bb9a841..4db4476cfe 100644
--- a/desktop/src/features/messages/ui/MessageThreadPanelSkeleton.tsx
+++ b/desktop/src/features/messages/ui/MessageThreadPanelSkeleton.tsx
@@ -1,5 +1,6 @@
 import type { ThreadPanelLayoutProps } from "@/features/channels/lib/threadPanelLayout";
 import {
+  THREAD_FOCUS_MESSAGE_GUTTER_CLASS,
   THREAD_PANEL_COLUMN_CLASS,
   THREAD_PANEL_COMPOSER_GUTTER_CLASS,
   THREAD_PANEL_MESSAGE_GUTTER_CLASS,
@@ -106,6 +107,9 @@ export function MessageThreadPanelSkeleton({
 }: MessageThreadPanelSkeletonProps) {
   const isOverlay = useIsThreadPanelOverlay();
   const hasConstrainedColumn = columnMaxWidthPx != null;
+  const messageGutterClass = hasConstrainedColumn
+    ? THREAD_FOCUS_MESSAGE_GUTTER_CLASS
+    : THREAD_PANEL_MESSAGE_GUTTER_CLASS;
   useEscapeKey(onClose, isOverlay || isSinglePanelView || isFocusMode);
 
   const threadHeaderContent = (
@@ -131,17 +135,12 @@ export function MessageThreadPanelSkeleton({
         }
       >
         <div
-          className={cn(THREAD_PANEL_MESSAGE_GUTTER_CLASS, "pb-1 pt-0")}
+          className={cn(messageGutterClass, "pb-1 pt-0")}
           data-testid="message-thread-head-loading"
         >
           <ThreadMessageSkeleton isHead />
         </div>
-        <div
-          className={cn(
-            "space-y-2.5 pb-3 pt-1",
-            THREAD_PANEL_MESSAGE_GUTTER_CLASS,
-          )}
-        >
+        <div className={cn("space-y-2.5 pb-3 pt-1", messageGutterClass)}>
           <ThreadMessageSkeleton />
           <ThreadMessageSkeleton />
           <div className="ml-[58px] flex items-center gap-1.5 pt-0.5">