diff --git a/packages/app/src/pages/session/file-tabs.tsx b/packages/app/src/pages/session/file-tabs.tsx index a3379905d84..f5ae3f75732 100644 --- a/packages/app/src/pages/session/file-tabs.tsx +++ b/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(() => { diff --git a/packages/ui/src/components/line-comment-annotations.tsx b/packages/ui/src/components/line-comment-annotations.tsx index a4870074d95..4922692826f 100644 --- a/packages/ui/src/components/line-comment-annotations.tsx +++ b/packages/ui/src/components/line-comment-annotations.tsx @@ -61,7 +61,6 @@ type LineCommentControllerProps = { onDelete?: (comment: T) => void renderCommentActions?: (comment: T, controls: { edit: VoidFunction; remove: VoidFunction }) => JSX.Element editSubmitLabel?: string - onDraftPopoverFocusOut?: JSX.EventHandlerUnion getHoverSelectedRange?: Accessor cancelDraftOnCommentToggle?: boolean clearSelectionOnSelectionEndNull?: boolean @@ -88,7 +87,6 @@ type DraftProps = { onInput: (value: string) => void onCancel: VoidFunction onSubmit: (value: string) => void - onPopoverFocusOut?: JSX.EventHandlerUnion cancelLabel?: string submitLabel?: string } @@ -145,7 +143,6 @@ export function createLineCommentAnnotationRenderer(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(props: { onInput={view().onInput} onCancel={view().onCancel} onSubmit={view().onSubmit} - onPopoverFocusOut={view().onPopoverFocusOut} /> ) }, host) @@ -421,7 +417,6 @@ export function createLineCommentController( props.onSubmit({ comment, selection: cloneSelectedLineRange(range) }) note.cancelDraft() }, - onPopoverFocusOut: props.onDraftPopoverFocusOut, }), }) diff --git a/packages/ui/src/components/line-comment-styles.ts b/packages/ui/src/components/line-comment-styles.ts index 8fd02f08813..262610c7479 100644 --- a/packages/ui/src/components/line-comment-styles.ts +++ b/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; diff --git a/packages/ui/src/components/line-comment.tsx b/packages/ui/src/components/line-comment.tsx index bc47ad94055..d0e202aed5f 100644 --- a/packages/ui/src/components/line-comment.tsx +++ b/packages/ui/src/components/line-comment.tsx @@ -38,7 +38,6 @@ export type LineCommentAnchorProps = { buttonLabel?: string onClick?: JSX.EventHandlerUnion onMouseEnter?: JSX.EventHandlerUnion - onPopoverFocusOut?: JSX.EventHandlerUnion 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} @@ -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} @@ -233,7 +230,7 @@ export const LineCommentEditor = (props: LineCommentEditorProps) => { }) return ( - focus()}> +