fix(app): submit button not working in line-comment

packages/app/src/pages/session/file-tabs.tsx

@@ -217,17 +217,6 @@ export function FileTabContent(props: { tab: string }) {
         onDelete={controls.remove}
       />
     ),
-    onDraftPopoverFocusOut: (e: FocusEvent) => {
-      const current = e.currentTarget as HTMLDivElement
-      const target = e.relatedTarget
-      if (target instanceof Node && current.contains(target)) return
-
-      setTimeout(() => {
-        if (!document.activeElement || !current.contains(document.activeElement)) {
-          setNote("commenting", null)
-        }
-      }, 0)
-    },
   })
 
   createEffect(() => {

packages/ui/src/components/line-comment-annotations.tsx

@@ -61,7 +61,6 @@ type LineCommentControllerProps<T extends LineCommentShape> = {
   onDelete?: (comment: T) => void
   renderCommentActions?: (comment: T, controls: { edit: VoidFunction; remove: VoidFunction }) => JSX.Element
   editSubmitLabel?: string
-  onDraftPopoverFocusOut?: JSX.EventHandlerUnion<HTMLDivElement, FocusEvent>
   getHoverSelectedRange?: Accessor<SelectedLineRange | null>
   cancelDraftOnCommentToggle?: boolean
   clearSelectionOnSelectionEndNull?: boolean
@@ -88,7 +87,6 @@ type DraftProps = {
   onInput: (value: string) => void
   onCancel: VoidFunction
   onSubmit: (value: string) => void
-  onPopoverFocusOut?: JSX.EventHandlerUnion<HTMLDivElement, FocusEvent>
   cancelLabel?: string
   submitLabel?: string
 }
@@ -145,7 +143,6 @@ export function createLineCommentAnnotationRenderer<T>(props: {
               onInput={view().editor!.onInput}
               onCancel={view().editor!.onCancel}
               onSubmit={view().editor!.onSubmit}
-              onPopoverFocusOut={view().editor!.onPopoverFocusOut}
               cancelLabel={view().editor!.cancelLabel}
               submitLabel={view().editor!.submitLabel}
             />
@@ -166,7 +163,6 @@ export function createLineCommentAnnotationRenderer<T>(props: {
           onInput={view().onInput}
           onCancel={view().onCancel}
           onSubmit={view().onSubmit}
-          onPopoverFocusOut={view().onPopoverFocusOut}
         />
       )
     }, host)
@@ -421,7 +417,6 @@ export function createLineCommentController<T extends LineCommentShape>(
         props.onSubmit({ comment, selection: cloneSelectedLineRange(range) })
         note.cancelDraft()
       },
-      onPopoverFocusOut: props.onDraftPopoverFocusOut,
     }),
   })
 

packages/ui/src/components/line-comment-styles.ts

@@ -14,11 +14,16 @@ export const lineCommentStyles = `
   position: relative;
   right: auto;
   display: flex;
-  width: 100%;
+  width: calc(100% - 4rem);
   min-width: 0;
+  max-width: 600px;
   align-items: flex-start;
 }
 
+[data-component="session-review"] [data-component="line-comment"][data-inline] {
+  width: 100%;
+}
+
 [data-component="line-comment"][data-open] {
   z-index: var(--line-comment-open-z, 100);
 }
@@ -182,11 +187,16 @@ export const lineCommentStyles = `
   display: flex;
   align-items: center;
   flex-wrap: wrap;
-  gap: 8px;
+  row-gap: 4px;
   padding-left: 8px;
   min-width: 0;
 }
 
+[data-component="line-comment"] [data-slot="line-comment-action-buttons"] {
+  display: flex;
+  gap: 8px;
+}
+
 [data-component="line-comment"] [data-slot="line-comment-editor-label"] {
   flex: 1 1 220px;
   margin-right: auto;

packages/ui/src/components/line-comment.tsx

@@ -38,7 +38,6 @@ export type LineCommentAnchorProps = {
   buttonLabel?: string
   onClick?: JSX.EventHandlerUnion<HTMLButtonElement, MouseEvent>
   onMouseEnter?: JSX.EventHandlerUnion<HTMLButtonElement, MouseEvent>
-  onPopoverFocusOut?: JSX.EventHandlerUnion<HTMLDivElement, FocusEvent>
   class?: string
   popoverClass?: string
   children?: JSX.Element
@@ -98,7 +97,6 @@ export const LineCommentAnchor = (props: LineCommentAnchorProps) => {
                   [props.popoverClass ?? ""]: !!props.popoverClass,
                 }}
                 on:mousedown={(e) => e.stopPropagation()}
-                on:focusout={props.onPopoverFocusOut as any}
               >
                 {props.children}
               </div>
@@ -115,7 +113,6 @@ export const LineCommentAnchor = (props: LineCommentAnchorProps) => {
           on:mousedown={(e) => e.stopPropagation()}
           on:click={props.onClick as any}
           on:mouseenter={props.onMouseEnter as any}
-          on:focusout={props.onPopoverFocusOut as any}
         >
           {props.children}
         </div>
@@ -233,7 +230,7 @@ export const LineCommentEditor = (props: LineCommentEditorProps) => {
   })
 
   return (
-    <LineCommentAnchor {...rest} open={true} variant="editor" hideButton={props.inline} onClick={() => focus()}>
+    <LineCommentAnchor {...rest} open={true} variant="editor" hideButton={props.inline}>
       <div data-slot="line-comment-editor">
         <textarea
           ref={(el) => {
@@ -273,7 +270,7 @@ export const LineCommentEditor = (props: LineCommentEditorProps) => {
           <Show
             when={!props.inline}
             fallback={
-              <>
+              <div data-slot="line-comment-action-buttons">
                 <button
                   type="button"
                   data-slot="line-comment-action"
@@ -293,15 +290,17 @@ export const LineCommentEditor = (props: LineCommentEditorProps) => {
                 >
                   {split.submitLabel ?? i18n.t("ui.lineComment.submit")}
                 </button>
-              </>
+              </div>
             }
           >
-            <Button size="small" variant="ghost" onClick={split.onCancel}>
-              {split.cancelLabel ?? i18n.t("ui.common.cancel")}
-            </Button>
-            <Button size="small" variant="primary" disabled={text().trim().length === 0} onClick={submit}>
-              {split.submitLabel ?? i18n.t("ui.lineComment.submit")}
-            </Button>
+            <div data-slot="line-comment-action-buttons">
+              <Button size="small" variant="ghost" onClick={split.onCancel}>
+                {split.cancelLabel ?? i18n.t("ui.common.cancel")}
+              </Button>
+              <Button size="small" variant="primary" disabled={text().trim().length === 0} onClick={submit}>
+                {split.submitLabel ?? i18n.t("ui.lineComment.submit")}
+              </Button>
+            </div>
           </Show>
         </div>
       </div>