Skip to content

Fix context menu is obscured when edit message. #7951

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
merged 1 commit into from
Sep 16, 2025
Merged

Fix context menu is obscured when edit message. #7951

Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
12 changes: 6 additions & 6 deletions webview-ui/src/components/chat/ChatTextArea.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -903,12 +903,12 @@ export const ChatTextArea = forwardRef<HTMLTextAreaElement, ChatTextAreaProps>(
return (
<div
className={cn(
"relative flex flex-col gap-1 bg-editor-background outline-none border border-none box-border",
isEditMode ? "p-2 w-full" : "px-1.5 pb-1 w-[calc(100%-16px)] ml-auto mr-auto",
"flex flex-col gap-1 bg-editor-background outline-none border border-none box-border",
isEditMode ? "p-2 w-full" : "relative px-1.5 pb-1 w-[calc(100%-16px)] ml-auto mr-auto",
Copy link
Contributor

@roomote roomote bot Sep 13, 2025

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Is this intentional? Removing relative from the main container and only applying it conditionally to non-edit mode could break the positioning context for child elements in normal mode. This might cause unexpected layout issues.

Could we keep relative on the main container and use a different approach for fixing the edit mode positioning?

)}>
<div className="relative">
<div className={cn(!isEditMode && "relative")}>
<div
className={cn("chat-text-area", "relative", "flex", "flex-col", "outline-none")}
className={cn("chat-text-area", !isEditMode && "relative", "flex", "flex-col", "outline-none")}
onDrop={handleDrop}
onDragOver={(e) => {
// Only allowed to drop images/files on shift key pressed.
Expand Down Expand Up @@ -940,10 +940,10 @@ export const ChatTextArea = forwardRef<HTMLTextAreaElement, ChatTextAreaProps>(
className={cn(
"absolute",
"bottom-full",
"left-0",
isEditMode ? "left-6" : "left-0",
Copy link
Contributor

@roomote roomote bot Sep 13, 2025

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

The hardcoded positioning values (left-6 and -mb-3) might not work well across different screen sizes or container widths. Could we consider a more responsive approach?

Or perhaps calculate the position based on the container's dimensions?

"right-0",
"z-[1000]",
"mb-2",
isEditMode ? "-mb-3" : "mb-2",
Copy link
Contributor

@roomote roomote bot Sep 13, 2025

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

I noticed that PR #7760 attempted to fix this issue using z-index adjustments. Have you tested if combining both approaches (z-index + positioning) would provide a more robust solution? This might handle edge cases better.

"filter",
"drop-shadow-md",
)}>
Expand Down
Loading