Change:
<!-- Do Not Delete This! bugreporttemplate --<!-- Please read our Rules of Conduct: --<!-- Please search existing issues to avoid creating duplicates. --<!-- Also please test using the latest insiders build to make sure your issue has not already been fixed: --<!-- Use Help Report Issue to prefill these. --- VSCode Version: 1.52 OS Version: MacOS Big Sur Steps to Reproduce: a variable (javascript). that you want to rename it. click on it to rename it. "quickfix" this variable is declared but never read box gets in the way so I can't change the name. <!-- Launch with to check. --Does this issue occur when all extensions are disabled?: Yes
Why can't you rename it? Please share a screenshot (or, even better, a video) of what isn't working
The dialog box appears over the code, so I can't click on any of the code. I have attached a video. This only started occurring with the latest release. Something has changed, such as the algorithm to place the dialog box or the speed at which the dialog box appears.
Here are some screenshots as well. <img width="717" alt="Screen Shot 2020-12-14 at 3 30 29 pm" src="https://user-"<img width="717" alt="Screen Shot 2020-12-14 at 3 30 23 pm" src="https://user-"
Assigning you since this looks like a bug with the positioning of the problems hover widget
I cannot repro it. <img width="746" alt="image" src="https://user-"Are there any specific steps you followed to repro this? May be you have some settings applied where I do not have or vice-versa. Is it possible to reproduce this by disabling all extensions except the extension that provides quick fixes?
Any idea why this can happen?
The only extension I have is debugger for Chrome. The only settings I have are: I would probably suggest making sure the window size is the default size when first installed. Maybe if the window size is larger, the algorithm will come up with a different place to put the box. Also I would suggest diffing between the previous version as it didn't happen then. I am not even sure if there was a quickfix suggestion for unused vars in the previous version.
It kind of looks like the "quickfix" section is not factored into the algorithm that places the box and it is instead aligning with the box excluding that section.
I cloned vscode and built it from the source. The same problem occurred. I started to debug it and confirmed my suspicion that the quick fix bar (the action bar) is not being recognised in the positioning algorithm. I altered the css of monaco to give an explicit height to the action bar and that fixed the problem.
Ok so what is happening is the dialog box and the action bar are being made visible at different times. A race condition determines whether monaco measures the height of the dialog box with the action bar visible or not. This is why the bug will not occur if you step through the code. Setting the height explicitly works because it is measured even if there is no text in the element.
The reason you can't reproduce it is because, as you can see, you have "Peek Problems" in addition to the "Quick Fixes". Looking at the code of renderMarkerStatusbar, the peek problems code is run synchronously, but the quick fix action is based on a promise that allows for the race condition. For people who don't have anything other than "Quick Fixes" in the action bar, it will cause the bug. It looks like the solution is to make the placeholder synchronous, or the entire actions container synchronous.
Same problem here.

Discussion:
} } const updatePlaceholderDisposable = this.recentMarkerCodeActionsInfo && !this.recentMarkerCodeActionsInfo.hasCodeActions ? Disposable.None : disposables.add(disposableTimeout(() => quickfixPlaceholderElement.textContent = nls.localize('checkingForQuickFixes', "Checking for quick fixes..."), 200)); <ins> if (!quickfixPlaceholderElement.textContent) { // Have some content in here to avoid flickering quickfixPlaceholderElement.textContent = String.fromCharCode(0xA0); // &nbsp; } </ins> const codeActionsPromise = this.getCodeActions(markerHover.marker); disposables.add(toDisposable(() => codeActionsPromise.cancel())); codeActionsPromise.then(actions => {

if (!this.recentMarkerCodeActionsInfo.hasCodeActions) { actions.dispose(); quickfixPlaceholderElement.textContent = nls.localize('noQuickFixes', "No quick fixes available"); <del> this._editor.layoutContentWidget(this); </del> return; } quickfixPlaceholderElement.style.display = 'none';

}); } })); <del> this._editor.layoutContentWidget(this); </del> }); }