Certain input sources (such as touch) are "captured" when they
press an element. This means the pointer is always considered
"inside" the element by the browser, even when they visually are
not. This caused some issues on mobile browsers where touch and
stylus events could not connect table columns with each other.
Just to be safe, I've added the required `releasePointerCapture`
call everywhere `onPointerEnter` or `onPointerLeave` is used.
This is basically a migration from mouse events to
[pointer events](
https://developer.mozilla.org/en-US/docs/Web/API/Pointer_events
).
The `PointerEvent` interface inherits all of the `MouseEvent`
properties, meaning that existing code can essentially be left
as-is. The only major change is making sure we only respond to the
"primary" pointer.
Known issues include:
* stylus hover is not detected
* touchscreens do not have a concept of hover, making it difficult
to e.g. resize areas
* no touch gesture support, e.g. "pinch-to-zoom"
Some mobile browsers (e.g. chrome) uses collapsing url bars (the
bar collapses when you scroll). In such cases, `100vh` typically
refers to the full height of the viewport when the url bar is
collapsed (see also `svh`, `lvh` and `dvh`, e.g. at
<https://ishadeed.com/article/new-viewport-units/#the-small-large-and-dynamic-viewport-units>
). This meant that on my tablet, the editor would extend below the
visible page until I scrolled it into view.
This commit re-uses a fix from some of my other projects
(specifically
<5c7e788d40/src/styles/globals.css (L14-L28)>
) where the root element is set to fill 100% height. This avoids
dealing with viewport units altogether. On my tablet, this means
that the url bar is visible and that the editor does not extend
below the visible page.
