From 5d91c1bb2975ffa81feb8e180554095098a4f1e3 Mon Sep 17 00:00:00 2001
From: Dotta <bippadotta@protonmail.com>
Date: Wed, 3 Jun 2026 17:03:28 +0000
Subject: [PATCH] Fix document comment panel layering

---
 ui/src/components/DocumentAnnotationPanel.tsx | 24 +++++++++----------
 .../IssueDocumentAnnotations.test.tsx         |  3 +++
 .../components/IssueDocumentAnnotations.tsx   |  2 +-
 3 files changed, 16 insertions(+), 13 deletions(-)

diff --git a/ui/src/components/DocumentAnnotationPanel.tsx b/ui/src/components/DocumentAnnotationPanel.tsx
index c5fbc216..2edad684 100644
--- a/ui/src/components/DocumentAnnotationPanel.tsx
+++ b/ui/src/components/DocumentAnnotationPanel.tsx
@@ -75,7 +75,7 @@ export function DocumentAnnotationPanel(props: AnnotationPanelProps) {
         <SheetContent
           side="bottom"
           showCloseButton={false}
-          className="paperclip-doc-annotation-sheet flex max-h-[88vh] flex-col rounded-none border-t border-border bg-background p-0"
+          className="paperclip-doc-annotation-sheet z-[60] flex max-h-[88vh] flex-col rounded-none border-t border-border bg-popover p-0 text-popover-foreground shadow-2xl"
         >
           <SheetTitle className="sr-only">
             Comments on {props.documentKey} revision {props.documentRevisionNumber}
@@ -95,7 +95,7 @@ export function DocumentAnnotationPanel(props: AnnotationPanelProps) {
       aria-label={`Annotations for ${props.documentKey.toUpperCase()}, revision ${props.documentRevisionNumber}`}
       data-testid="document-annotation-panel"
       className={cn(
-        "flex h-full max-h-[80vh] w-[360px] shrink-0 flex-col overflow-hidden rounded-none border border-border bg-card shadow-md",
+        "isolate flex h-full max-h-[80vh] w-[360px] shrink-0 flex-col overflow-hidden rounded-none border border-border bg-popover text-popover-foreground shadow-xl",
         props.className,
       )}
       style={props.desktopWidth ? { width: props.desktopWidth, maxWidth: props.desktopWidth } : undefined}
@@ -205,7 +205,7 @@ function AnnotationPanelBody(props: AnnotationPanelProps) {
     <>
       <header
         data-testid={bodyTestId}
-        className="flex items-start justify-between gap-2 border-b border-border px-3 py-2.5"
+        className="flex items-start justify-between gap-2 border-b border-border bg-popover px-3 py-2.5"
       >
         <div className="min-w-0 leading-tight">
           <p className="text-sm font-medium">Comments</p>
@@ -227,7 +227,7 @@ function AnnotationPanelBody(props: AnnotationPanelProps) {
           <X className="h-4 w-4" />
         </Button>
       </header>
-      <div className="flex flex-wrap gap-1 border-b border-border px-3 py-2">
+      <div className="flex flex-wrap gap-1 border-b border-border bg-popover px-3 py-2">
         {FILTERS.map((entry) => {
           const count = counts[entry.id];
           const isActive = filter === entry.id;
@@ -255,12 +255,12 @@ function AnnotationPanelBody(props: AnnotationPanelProps) {
       {props.newCommentDisabled && props.newCommentDisabledReason ? (
         <p
           data-testid="document-annotation-disabled-reason"
-          className="border-b border-border bg-muted/40 px-3 py-1.5 text-[11px] text-muted-foreground"
+          className="border-b border-border bg-muted px-3 py-1.5 text-[11px] text-muted-foreground"
         >
           {props.newCommentDisabledReason}
         </p>
       ) : null}
-      <div className="flex-1 min-h-0 overflow-y-auto px-3 py-2">
+      <div className="min-h-0 flex-1 overflow-y-auto bg-popover px-3 py-2">
         {filteredThreads.length === 0 ? (
           <p className="py-8 text-center text-xs text-muted-foreground">
             {filter === "open" ? "No open comments yet. Select text to add one." : `No ${filter} comments.`}
@@ -302,8 +302,8 @@ function AnnotationPanelBody(props: AnnotationPanelProps) {
         )}
       </div>
       {props.pendingAnchor ? (
-        <div className="border-t border-border bg-muted/20 px-3 py-2">
-          <blockquote className="mb-2 line-clamp-3 overflow-hidden rounded-none bg-background px-2 py-1 text-xs italic text-muted-foreground">
+        <div className="border-t border-border bg-popover px-3 py-2">
+          <blockquote className="mb-2 line-clamp-3 overflow-hidden rounded-none bg-muted px-2 py-1 text-xs italic text-muted-foreground">
             {truncate(props.pendingAnchor.selectedText, 160)}
           </blockquote>
           <Textarea
@@ -389,9 +389,9 @@ function ThreadCard(props: {
         data-focused={props.expanded || undefined}
         aria-labelledby={`thread-quote-${thread.id}`}
         className={cn(
-          "rounded-none border border-border bg-card transition-colors",
+          "rounded-none border border-border bg-background transition-colors",
           props.expanded && "ring-1 ring-ring/70",
-          thread.status === "resolved" && "bg-muted/30",
+          thread.status === "resolved" && "bg-muted",
         )}
         tabIndex={0}
         onClick={props.onFocus}
@@ -405,8 +405,8 @@ function ThreadCard(props: {
         <blockquote
           id={`thread-quote-${thread.id}`}
           className={cn(
-            "mx-3 mt-1 line-clamp-2 overflow-hidden rounded-none bg-muted/40 px-2 py-1 text-xs italic text-muted-foreground",
-            (thread.anchorState === "stale" || thread.status === "resolved") && "bg-muted/30",
+            "mx-3 mt-1 line-clamp-2 overflow-hidden rounded-none bg-muted px-2 py-1 text-xs italic text-muted-foreground",
+            (thread.anchorState === "stale" || thread.status === "resolved") && "bg-muted",
           )}
         >
           {truncate(thread.selectedText, 120)}
diff --git a/ui/src/components/IssueDocumentAnnotations.test.tsx b/ui/src/components/IssueDocumentAnnotations.test.tsx
index 140913b1..d747e5c6 100644
--- a/ui/src/components/IssueDocumentAnnotations.test.tsx
+++ b/ui/src/components/IssueDocumentAnnotations.test.tsx
@@ -282,6 +282,7 @@ describe("IssueDocumentAnnotations", () => {
     const anchor = container.querySelector('[data-testid="document-annotation-panel-anchor"]');
     expect(anchor).not.toBeNull();
     expect(anchor?.className).toContain("fixed");
+    expect(anchor?.className).toContain("z-[60]");
   });
 
   it("keeps the desktop annotation panel inside the issue content area when properties are visible", async () => {
@@ -712,6 +713,8 @@ describe("IssueDocumentAnnotations", () => {
       expect(sheet).not.toBeNull();
       expect(sheet?.getAttribute("data-side")).toBe("bottom");
       expect(sheet?.className).toContain("paperclip-doc-annotation-sheet");
+      expect(sheet?.className).toContain("z-[60]");
+      expect(sheet?.className).toContain("bg-popover");
     } finally {
       Object.defineProperty(window, "matchMedia", {
         configurable: true,
diff --git a/ui/src/components/IssueDocumentAnnotations.tsx b/ui/src/components/IssueDocumentAnnotations.tsx
index 57ab9f13..8dfc41b4 100644
--- a/ui/src/components/IssueDocumentAnnotations.tsx
+++ b/ui/src/components/IssueDocumentAnnotations.tsx
@@ -310,7 +310,7 @@ export function IssueDocumentAnnotations({
       {panelOpen && !isMobile && desktopPanelFrame ? (
         <div
           data-testid="document-annotation-panel-anchor"
-          className="pointer-events-auto fixed hidden lg:block"
+          className="pointer-events-auto fixed z-[60] hidden lg:block"
           style={{
             left: desktopPanelFrame.left,
             maxHeight: desktopPanelFrame.maxHeight,