Vue components having block-level elements in `<span>`

[tlylt]

Is your request related to a problem?
Invalid HTML markup may cause Vue hydration issues.

Describe the solution you'd like
Replace the use of span to avoid invalid HTML markup in Vue components. In particular:
Popover.vue
MinimalPanel.vue
NestedPanel.vue

Describe alternatives you've considered
nil
Additional context
Backlog from #1837 (review)

[ang-zeyu]

also relevant for panels:
#1815 (3rd point)
#1534 (comment)

[tlylt]

Testing the preview website for #1889 and I found out that the issue in #1794 has yet to be resolved by the previous PR.

For both the PR preview of the previous fixing PR(#1837) here and the master branch docs here, the weird duplicate scrolling issue in #1794 doesn't show up when I reduce the sizes of the browser on desktop but continues to show up when I actually try browsing the site on a mobile phone.

I don't see any more Vue warnings but there is still some invalid HTML markup due to tooltip/popover etc (search p div or span div). But similarly, in other pages such as getting started, it also contains those invalid markup due to Vue components, and yet those pages work fine without the scrolling issue.

Not too sure what's the exact source of error...(will fixing invalid Vue component markup actually fixes the issue? 🤔)

[jonahtanjz]

For both the PR preview of the previous fixing PR(#1837) here and the master branch docs here, the weird duplicate scrolling issue in #1794 doesn't show up when I reduce the sizes of the browser on desktop but continues to show up when I actually try browsing the site on a mobile phone.

Tested both sites on my phone and didn't really see the "double scroll". On my phone it's more of like getting "stuck" and if I continue to scroll, the top nav bar will retract and the page slightly scrolls with it.

Screen_Recording_20220409-142437_Chrome.mp4

Actually I tried this on the browser and it's the same. It gets "stuck" after a certain point and will result in the same effect if I continue scrolling. I also noticed that the navbar has overflowed on this page due to the youtube and powerpoint embeds. Tested the page without both embeds and the above issue is gone. Maybe related to #1731?

[tlylt]

Tested both sites on my phone and didn't really see the "double scroll". On my phone it's more of like getting "stuck" and if I continue to scroll, the top nav bar will retract and the page slightly scrolls with it.

I see, I guess it's a Safari on iPhone issue. I tried it on Chrome and the problem disappeared. Could possibly be due to some CSS features not being supported in the Safari version that I am using.

[kaixin-hc]

Is this issue still occurring...? Related issue: #2493 suggests this is tolerated

[tlylt]

Is this issue still occurring...? Related issue: #2493 suggests this is tolerated

I can still reproduce this error in #1794 per my previous comment, that somehow on my phone (safari), the navbar behaviour is weird. See reproduction step in that issue.

[kaixin-hc]

@yiwen101 Any thoughts on this? Perhaps we can add this to warn as well