Bug: 'Complete Merge' button is getting overshadowed by conflict actions bar

kevalmiistry commented 1 year ago

Type: Bug

It's a UI fault in the merge editor.
I have written the steps to reproduce it and also attached a screen recording for better understanding.

Note: What I mean by 'Complete Merge' button, conflicted code block's widget and conflict actions bar in this issue 👇

Steps:

First things first
i) Need a code base which have conflicts

You can clone this repository 👉 complete-merge-issue with both main & branch-w-conflict branches and merge branch branch-w-conflict into main to produce merge conflict.
ii) Open the conflicted file in the Merge Editor

And then: (Please watch the video for better understanding)

First in the Result tab, place the conflicted code block's widget aligned with 'Complete Merge' button in bottom-right corner in a way that the conflict actions bar is intersecting with the button (as shown in the video below).
Accept code from any stream, incoming or current doesn't matter.
Now try to hover over same straight horizontal line as conflict actions bar towards the 'Complete Merge' button, You will notice that the cursor does not become a pointer, and you cannot even click the button.

Now, If you reload the window, the issue will be fixed. However, as soon as you select any action from the actions bar, such as 'remove incoming/current', the issue will occur again.

Complete Merge Issue Screen Recordnig.webm

From my understanding, what is happening here is that after we select any action from the actions bar, the actions bar is overlapping the 'Complete Merge' button in the z-index's stacking context.

I have tried to fix this on my local setup, and I believe I have solved the issue.

If the maintainers want, I can raise a PR! ✨

VS Code version: Code 1.78.2 (b3e4e68a0bc097f0ae7907b217c1119af9e03435, 2023-05-10T14:39:26.248Z) OS version: Windows_NT x64 10.0.19045 Modes: Sandboxed: Yes

System Info

|Item|Value| |---|---| |CPUs|Intel(R) Core(TM) i5-8265U CPU @ 1.60GHz (8 x 1800)| |GPU Status|2d_canvas: enabled
canvas_oop_rasterization: disabled_off
direct_rendering_display_compositor: disabled_off_ok
gpu_compositing: enabled
multiple_raster_threads: enabled_on
opengl: enabled_on
rasterization: enabled
raw_draw: disabled_off_ok
video_decode: enabled
video_encode: enabled
vulkan: disabled_off
webgl: enabled
webgl2: enabled
webgpu: enabled| |Load (avg)|undefined| |Memory (System)|7.88GB (2.01GB free)| |Process Argv|C:\\Users\\Keval Mistry\\Desktop\\complete-merge-issue --crash-reporter-id f8aebeb4-13d0-4f91-94f7-6fbc8033ad10| |Screen Reader|no| |VM|0%|

Extensions (26)

Extension|Author (truncated)|Version ---|---|--- vscode-tailwindcss|bra|0.9.11 vscode-eslint|dba|2.4.0 docs-markdown|doc|1.0.1 docs-preview|doc|1.0.1 es7-react-js-snippets|dsz|4.4.3 auto-rename-tag|for|0.1.10 live-sass|gle|6.0.5 githd|hui|2.3.3 vscode-text-pastry|jkj|1.3.1 vscode-peacock|joh|4.2.2 vscode-selfhost-test-provider|ms-|0.3.15 material-icon-theme|PKi|4.28.0 vscode-react-refactor|pla|1.1.3 prisma|Pri|4.15.0 vscode-thunder-client|ran|2.7.5 reactree|Rea|1.0.8 LiveServer|rit|5.7.9 mongo-snippets-for-node-js|roe|1.3.12 svg-preview|Sim|2.8.3 vscode-fileutils|sle|3.10.1 vscode-wakatime|Wak|24.0.11 console-ninja|Wal|0.0.141 vscode-import-cost|wix|3.3.0 JavaScriptSnippets|xab|1.8.0 pretty-ts-errors|yoa|0.4.1 html-css-class-completion|Zig|1.20.0

A/B Experiments

``` vsliv368cf:30146710 vsreu685:30147344 python383cf:30185419 vspor879:30202332 vspor708:30202333 vspor363:30204092 vslsvsres303:30308271 vserr242:30382549 pythontb:30283811 vsjup518:30340749 pythonptprofiler:30281270 vshan820:30294714 vstes263:30335439 vscoreces:30445986 vscod805:30301674 binariesv615:30325510 bridge0708:30335490 bridge0723:30353136 cmake_vspar411:30581797 vsaa593:30376534 pythonvs932:30410667 cppdebug:30492333 vsclangdf:30486550 c4g48928:30535728 dsvsc012cf:30540253 pynewext54:30695312 azure-dev_surveyone:30548225 vsccc:30610678 2e4cg342:30602488 pyind779:30671433 89544117:30613380 pythonsymbol12:30671437 showlangstatbar:30737416 vsctsb:30748421 pythonms35:30701012 03d35959:30757346 pythonfmttext:30731395 pythoncmvfstrcf:30756944 fixshowwlkth:30730052 showsbindicator:30760979 pythongtdpath:30739704 pythonnosmt12:30757131 ```

hediet commented 1 year ago

Thanks for this detailed bug report!

If the maintainers want, I can raise a PR! ✨

That would be awesome!

kevalmiistry commented 1 year ago

Hey @hediet, I have raised the PR 👉 #184603

microsoft / vscode

Bug: 'Complete Merge' button is getting overshadowed by conflict actions bar #184567

Steps: