From 796c45b1cb3ca7945f7bf366ddc80c672f1189a0 Mon Sep 17 00:00:00 2001
From: spencrmartin <spencermartin@squareup.com>
Date: Sun, 23 Nov 2025 08:52:45 -0500
Subject: [PATCH] Make comment drawer overlay without affecting message layout

- Drawer now absolutely positioned (doesn't push messages down)
- Positioned top-full right-0 from badge
- Added shadow-xl for better visual separation
- High z-index (z-50) to overlay other content
- No vertical layout shift when expanding/collapsing
- Messages stay in their original positions
---
 ui/desktop/src/components/CommentDrawer.tsx   |  4 +-
 ui/desktop/src/components/MessageComments.tsx | 52 +++++++++----------
 2 files changed, 28 insertions(+), 28 deletions(-)

diff --git a/ui/desktop/src/components/CommentDrawer.tsx b/ui/desktop/src/components/CommentDrawer.tsx
index 38e62feab1..bff92f3a5f 100644
--- a/ui/desktop/src/components/CommentDrawer.tsx
+++ b/ui/desktop/src/components/CommentDrawer.tsx
@@ -59,8 +59,8 @@ export default function CommentDrawer({
     <div
       data-comment-ui
       className={cn(
-        'border border-border-subtle rounded-lg overflow-hidden transition-all duration-200',
-        'bg-background-default',
+        'border border-border-subtle rounded-lg overflow-hidden',
+        'bg-background-default shadow-xl',
         className
       )}
     >
diff --git a/ui/desktop/src/components/MessageComments.tsx b/ui/desktop/src/components/MessageComments.tsx
index 844c4509b0..a1efa63342 100644
--- a/ui/desktop/src/components/MessageComments.tsx
+++ b/ui/desktop/src/components/MessageComments.tsx
@@ -61,37 +61,37 @@ export default function MessageComments({
     return null;
   }
 
-  // Condensed mode: show badge on right, drawer expands below it
+  // Condensed mode: show badge on right, drawer overlays below it
   if (displayMode === 'condensed') {
     return (
-      <div className={cn('mt-3 flex justify-end', className)}>
-        <div className="w-96 max-w-full">
+      <div className={cn('mt-3 flex justify-end relative', className)}>
+        <div className="relative">
           {/* Badge on the right */}
-          <div className="flex justify-end mb-2">
-            <CommentBadge
-              comments={comments}
-              position={badgePosition}
-              onClick={() => setIsDrawerExpanded(!isDrawerExpanded)}
-            />
-          </div>
+          <CommentBadge
+            comments={comments}
+            position={badgePosition}
+            onClick={() => setIsDrawerExpanded(!isDrawerExpanded)}
+          />
           
-          {/* Expandable drawer below badge */}
+          {/* Expandable drawer overlays below badge - doesn't affect layout */}
           {isDrawerExpanded && (
-            <CommentDrawer
-              messageId={messageId}
-              comments={comments}
-              selectedText={activeSelection?.selectedText}
-              isExpanded={isDrawerExpanded}
-              onToggle={() => setIsDrawerExpanded(!isDrawerExpanded)}
-              activeSelection={activeSelection}
-              isCreatingComment={isCreatingComment}
-              onCreateComment={onCreateComment}
-              onUpdateComment={onUpdateComment}
-              onDeleteComment={onDeleteComment}
-              onReplyToComment={onReplyToComment}
-              onResolveComment={onResolveComment}
-              onCancelComment={onCancelComment}
-            />
+            <div className="absolute top-full right-0 mt-2 w-96 max-w-[90vw] z-50">
+              <CommentDrawer
+                messageId={messageId}
+                comments={comments}
+                selectedText={activeSelection?.selectedText}
+                isExpanded={isDrawerExpanded}
+                onToggle={() => setIsDrawerExpanded(!isDrawerExpanded)}
+                activeSelection={activeSelection}
+                isCreatingComment={isCreatingComment}
+                onCreateComment={onCreateComment}
+                onUpdateComment={onUpdateComment}
+                onDeleteComment={onDeleteComment}
+                onReplyToComment={onReplyToComment}
+                onResolveComment={onResolveComment}
+                onCancelComment={onCancelComment}
+              />
+            </div>
           )}
         </div>
       </div>