From d3784f5aeb07478d5fa18a75a957186b5faecbc1 Mon Sep 17 00:00:00 2001
From: Michael Johnston <lastobelus@mac.com>
Date: Sun, 23 Aug 2026 14:24:44 -0700
Subject: [PATCH] fix(web): keep annotation actions attached to dialog

---
 .../thread-annotation/ThreadAnnotation.tsx    | 38 ++++++++++---------
 1 file changed, 20 insertions(+), 18 deletions(-)

diff --git a/apps/web/src/components/thread-annotation/ThreadAnnotation.tsx b/apps/web/src/components/thread-annotation/ThreadAnnotation.tsx
index 73642d624eab..e9ded512f939 100644
--- a/apps/web/src/components/thread-annotation/ThreadAnnotation.tsx
+++ b/apps/web/src/components/thread-annotation/ThreadAnnotation.tsx
@@ -7,6 +7,7 @@ import { scopedThreadKey } from "@t3tools/client-runtime/environment";
 import {
   useCallback,
   useEffect,
+  useId,
   useRef,
   useState,
   useSyncExternalStore,
@@ -81,6 +82,7 @@ export function ThreadAnnotationEditorDialog(props: {
 }) {
   const [body, setBody] = useState("");
   const [saving, setSaving] = useState(false);
+  const formId = useId();
   const textareaRef = useRef<HTMLTextAreaElement | null>(null);
   const wasOpenRef = useRef(false);
 
@@ -105,14 +107,14 @@ export function ThreadAnnotationEditorDialog(props: {
   return (
     <Dialog open={props.open} onOpenChange={props.onOpenChange}>
       <DialogPopup className="max-w-xl">
-        <form onSubmit={(event) => void submit(event)}>
-          <DialogHeader>
-            <DialogTitle>{props.annotation ? "Edit annotation" : "Annotate thread"}</DialogTitle>
-            <DialogDescription>
-              Markdown supports headings, lists, task lists, links, and tags.
-            </DialogDescription>
-          </DialogHeader>
-          <DialogPanel scrollFade={false}>
+        <DialogHeader>
+          <DialogTitle>{props.annotation ? "Edit annotation" : "Annotate thread"}</DialogTitle>
+          <DialogDescription>
+            Markdown supports headings, lists, task lists, links, and tags.
+          </DialogDescription>
+        </DialogHeader>
+        <DialogPanel scrollFade={false}>
+          <form id={formId} onSubmit={(event) => void submit(event)}>
             <Textarea
               ref={textareaRef}
               aria-label="Thread annotation"
@@ -130,16 +132,16 @@ export function ThreadAnnotationEditorDialog(props: {
                 }
               }}
             />
-          </DialogPanel>
-          <DialogFooter>
-            <Button type="button" variant="ghost" onClick={() => props.onOpenChange(false)}>
-              Cancel
-            </Button>
-            <Button disabled={!body.trim() || saving} type="submit">
-              {saving ? "Saving…" : props.annotation ? "Save" : "Add annotation"}
-            </Button>
-          </DialogFooter>
-        </form>
+          </form>
+        </DialogPanel>
+        <DialogFooter>
+          <Button type="button" variant="ghost" onClick={() => props.onOpenChange(false)}>
+            Cancel
+          </Button>
+          <Button disabled={!body.trim() || saving} form={formId} type="submit">
+            {saving ? "Saving…" : props.annotation ? "Save" : "Add annotation"}
+          </Button>
+        </DialogFooter>
       </DialogPopup>
     </Dialog>
   );