Avoid new stack context for task list items

[Gusted]

• Avoid creating a new stack context on a task list item, this PR does that by removing the position: relative which causes a new stack context to be created on that element. And thereby solving that popups weren't able to utilize their z-index and weren't able to show properly.

Before:

After:

[zeripath]

I can't quite understand why they ever had the relative position set

[wxiaoguang]

Oh wait, to be more careful ..... I think this is incorrect. See the screenshot.

[Gusted]

Thanks for testing @wxiaoguang, f15f897 fixes the issue by making the checkbox relative to the parent element.

[wxiaoguang]

Better but there are still other cases. I think there should be more comments about all the cases.

[silverwind]

The root problem is that the popups are part of the regular DOM structure where unintended interactions with stacking context happen with surrounding elements.

The real fix is to "portal" out the popup to be a direct descendant of body, positioned via popper.js or similar. Through that, all problems related to stacking context dissappear. We need to switch to something better than fomantic popups which can't do this.

[silverwind]

Maybe fomantic can actually do popup portalling. Worth a try adding a #popup element to body, and then initialize via options:

$el.popup({
  popup: document.getElementById('popup'),
  movePopup: false,
  preserve: true,
});

[Gusted]

Maybe fomantic can actually do popup portalling. Worth a try adding a #popup element to body, and then initialize via options:

We already use fomantic's popup functionality. However portalling should work by specifying inline: false(default value) as it then should append the popup to the body, however this is currently not the case/not working and just act as inline: true, likely because we're specifying a pre-formatted popup.

[Gusted]

Popper looks interesting, don't have any experience with it. @silverwind would you like to take over this PR(or create a new one) otherwise I can have a look into popper some time soon.

[6543]

are things fixed ?!?

[Gusted]

are things fixed ?!?

Adding status/wip

[wxiaoguang]

My (draft) proposal is : https://github.com/wxiaoguang/gitea/tree/fix-stack-context (35631a7) , remove the position: relative. It hasn't got fine tuned yet, just for demo.

[silverwind]

Popper looks interesting, don't have any experience with it. @silverwind would you like to take over this PR(or create a new one) otherwise I can have a look into popper some time soon.

Rewrite to popper (or maybe even the newer floating-ui, but it's quite complex to implement) will be more involved. It'd be awesome if we get portalling popups to work with Fomantic, otherwise I guess a workaround like done here is borderline acceptable.

[silverwind]

#20393 is a replacement for this PR which uses portalling, so surrounding CSS won't interfere anymore with these popups.

[Gusted]

Closing as #20393 is better solution to this.