diff --git a/apps/web/src/components/thread-annotation/ThreadAnnotation.tsx b/apps/web/src/components/thread-annotation/ThreadAnnotation.tsx
index 10ab22cba32f..4da6a96127bc 100644
--- a/apps/web/src/components/thread-annotation/ThreadAnnotation.tsx
+++ b/apps/web/src/components/thread-annotation/ThreadAnnotation.tsx
@@ -233,25 +233,31 @@ export function ThreadAnnotationPostIt(props: {
 }) {
   const bodyChangePending = useThreadAnnotationBodyPending(props.threadRef);
   return (
-    <div className="mx-auto mb-1.5 w-full max-w-3xl rounded-xl border border-border/80 bg-warning/10 px-3.5 py-2.5 text-warning-foreground shadow-sm">
-      <ThreadAnnotationBody
-        annotation={props.annotation}
-        className="max-h-48 overflow-y-auto"
-        cwd={props.cwd}
-        onBodyChange={props.onBodyChange}
-        threadRef={props.threadRef}
-      />
-      <div className="mt-2 flex items-center justify-between">
-        <ThreadAnnotationActions
+    <div className="dropdown-glass mx-auto mb-1.5 min-w-0 w-full max-w-3xl overflow-hidden rounded-xl text-warning-foreground">
+      <div className="bg-warning/10 px-3.5 py-2.5">
+        <ThreadAnnotationBody
           annotation={props.annotation}
-          onEdit={props.onEdit}
-          onReopen={() => undefined}
-          onResolve={props.onResolve}
-          pending={props.pending || bodyChangePending}
+          className="max-h-48 overflow-y-auto"
+          cwd={props.cwd}
+          onBodyChange={props.onBodyChange}
+          threadRef={props.threadRef}
         />
-        <button className="text-xs text-warning-foreground" type="button" onClick={props.onDismiss}>
-          Dismiss
-        </button>
+        <div className="mt-2 flex flex-wrap items-center justify-between gap-2">
+          <ThreadAnnotationActions
+            annotation={props.annotation}
+            onEdit={props.onEdit}
+            onReopen={() => undefined}
+            onResolve={props.onResolve}
+            pending={props.pending || bodyChangePending}
+          />
+          <button
+            className="shrink-0 text-xs text-warning-foreground"
+            type="button"
+            onClick={props.onDismiss}
+          >
+            Dismiss
+          </button>
+        </div>
       </div>
     </div>
   );
diff --git a/apps/web/src/components/thread-annotation/ThreadAnnotationPostIt.test.tsx b/apps/web/src/components/thread-annotation/ThreadAnnotationPostIt.test.tsx
new file mode 100644
index 000000000000..331c8a0514cf
--- /dev/null
+++ b/apps/web/src/components/thread-annotation/ThreadAnnotationPostIt.test.tsx
@@ -0,0 +1,36 @@
+import { EnvironmentId, MessageId, ThreadId } from "@t3tools/contracts";
+import { renderToStaticMarkup } from "react-dom/server";
+import { describe, expect, it, vi } from "vite-plus/test";
+
+import { ThreadAnnotationPostIt } from "./ThreadAnnotation";
+
+describe("ThreadAnnotationPostIt", () => {
+  it("layers the warning tint over the shared readable overlay surface", () => {
+    const markup = renderToStaticMarkup(
+      <ThreadAnnotationPostIt
+        annotation={{
+          anchorMessageId: MessageId.make("annotation-anchor"),
+          body: "# Follow up\n\nLong annotation text",
+          createdAt: "2026-08-28T00:00:00.000Z",
+          resolvedAt: null,
+          updatedAt: "2026-08-28T00:00:00.000Z",
+        }}
+        onBodyChange={async () => true}
+        onDismiss={vi.fn()}
+        onEdit={vi.fn()}
+        onResolve={vi.fn()}
+        threadRef={{
+          environmentId: EnvironmentId.make("annotation-environment"),
+          threadId: ThreadId.make("annotation-thread"),
+        }}
+      />,
+    );
+
+    const outerClasses = markup.match(/^<div class="([^"]+)"/)?.[1];
+    expect(markup).toContain("dropdown-glass");
+    expect(markup).toContain("overflow-hidden");
+    expect(markup).toContain("bg-warning/10");
+    expect(outerClasses).not.toContain("shadow");
+    expect(markup.indexOf("dropdown-glass")).toBeLessThan(markup.indexOf("bg-warning/10"));
+  });
+});