prevent-link-loss - Mount banner outside the fieldset - #9970

prevent-link-loss was mounting its banner directly inside the closest fieldset or .CommentBox element. That result on github to a markdown editor with height at 0 hiding the comment textarea.

Closes: #9955

Tested on Safari, Chrome and Firefox

Test done to make my fix

The height will be 0 if we put the Banner direclty inside the target.

function attach(field: HTMLTextAreaElement): void {
	const target = closestElement([
		// Almost everywhere
		'fieldset',

		// Editing PR body
		'.CommentBox',
	], field);

	const before = target.getBoundingClientRect().height;
	
	mount(Banner, {
		target,
		props: {field},
	});

	requestAnimationFrame(() => {
		const after = target.getBoundingClientRect().height;
		const textareaRect = field.getBoundingClientRect();

		console.log(
			'target:', target.tagName, target.className,
			'height before:', before,
			'height after:', after,
			'textarea rect after:', textareaRect,
		);
	});
}

Will result to :
target: FIELDSET MarkdownEditor-module__fieldSet__RU0NL height before: 215.38284301757812 height after: 0 textarea rect after: DOMRect

CF : height after: 0

So the easier fix was to mount the banner as a sibling of the target instead of inside it

Test URLs

I will test with this link in my GIF : https://github.com/refined-github/refined-github/pull/6954/commits/32d1c8b2e1b6971709fe273cfdd1f959b51e8d85

• New issue form: https://github.com/refined-github/refined-github/issues/new?assignees=&labels=bug&projects=&template=1_bug_report.yml
• New comment form: Open issue sandbox#3
• New review form: https://github.com/refined-github/sandbox/pull/4/files#review-changes-modal
• New review comment form: https://github.com/refined-github/sandbox/pull/4/files

Screenshot / GIF

Sorry for the screens they are at zoom 100% not 200% to see the entire feature. Hope this is still good

New issue form

New comment form

New review form

New review comment form