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

[alikia2x]

Issue for this PR

• Fixes Desktop - Can't add comments on "all files" view #11947
• May resolve Web UI: What is the purpose of “Add comment” when clicking inside a file? #11502

Type of change

• Bug fix
• New feature
• Refactor / code improvement
• Documentation

What does this PR do?

• Remove the onDraftPopoverFocusOut callback chain in packages/app/src/pages/session/file-tabs.tsx and related components (line-comment.tsx and line-comment-annotations.tsx in packages/ui/src/components).
• Modify the CSS of the comment editor component so that its width within the file tab won't get to large, which results in UI overflow.

To be short, this PR mainly addresses the unfinished work in PR #17948, which only resolved the issue in Review tab, but the problem still exists in the file tab.

Problem

When viewing a file in the file tab (the file viewer, not the dedicated Review tab), clicking the "Comment" (submit) button inside the inline comment editor popover does nothing. The only way to submit a comment is by pressing Enter.

Root Cause & Explanations (click for more details)

The onDraftPopoverFocusOut callback (file-tabs.tsx:220) was designed to close the draft when focus leaves the popover div.

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

Lines 220 to 230 in 2c056c9

	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)
	},

However, how the focus moves when user clicks differs across browsers and platforms. macOS's GUI habitually does not give the focus to the button when it's clicked. This means that in WebKit (which is also the WebView being used in OpenCode Desktop on macOS), clicking the comments button does not transfer focus to it. Instead, the entire popup loses focus. This causes current.contains(document.activeElement) to be false, triggering setNote("commenting", null), leading to a bug.

On Chromium, while focus does transfer to the button when clicked, a recent PR (#17948) added a preventDefault event to the button's mousedown event. This means that even in Chromium-based browsers, clicking this button no longer transfers focus to it.

Therefore, in the current situation, the onDraftPopoverFocusOut function is purely a bug, hindering normal functionality without contributing anything positive.

How did you verify your code works?

I built and ran the modified application and ensured that all functions worked correctly.

Screen recording below can be compared with recording within #18377 to demonstrate the proposed fix.

Explanation to potential concerns:
Even if onDraftPopoverFocusOut is removed, users can still close the window by clicking on other lines, pressing Escape, or clicking the Cancel button.
This change does not result in significant UI/UX changes or functional breakdown; on the contrary, it improves the UI/UX of the feature.

Screenshots / recordings

Recording: the submit button now works well

18377-fix-1.mp4

Screenshot: before this PR, the editor was too wide, making itself overflows.

Screenshot: if this PR gets merged, the comments editor will display normally both in review tab and file tab

Checklist

• I have tested my changes locally
• I have not included unrelated changes in this PR

[github-actions]

The following comment was made by an LLM, it may be inaccurate:

Based on my search, I found one potentially related PR:

Related PR:

• PR fix(app): desktop app & Safari comments via button click #17520: "fix(app): desktop app & Safari comments via button click"
  • fix(app): desktop app & Safari comments via button click #17520
  • This PR addresses a similar issue with comment button clicks not working properly, specifically mentioning desktop app and Safari. Since the current PR discusses focus behavior differences in WebKit (used in OpenCode Desktop on macOS) and the button click issue, this could be related to the same root problem or a previous attempt to solve a similar issue.

No other duplicate PRs were found specifically addressing the submit button issue in line-comment or the onDraftPopoverFocusOut callback removal.

[github-actions]

Thanks for updating your PR! It now meets our contributing guidelines. 👍

[alikia2x]

This PR is indeed similar to #17520, but I think it provides a more thorough solution.

The following comment was made by an LLM, it may be inaccurate:

Based on my search, I found one potentially related PR:

Related PR:

• PR fix(app): desktop app & Safari comments via button click #17520: "fix(app): desktop app & Safari comments via button click"

  • fix(app): desktop app & Safari comments via button click #17520
  • This PR addresses a similar issue with comment button clicks not working properly, specifically mentioning desktop app and Safari. Since the current PR discusses focus behavior differences in WebKit (used in OpenCode Desktop on macOS) and the button click issue, this could be related to the same root problem or a previous attempt to solve a similar issue.

No other duplicate PRs were found specifically addressing the submit button issue in line-comment or the onDraftPopoverFocusOut callback removal.