Fix position of overflowing annotations by refactoring VisCanvas

[axelboc]

As mentioned in #1466, annotations with overflowCanvas do not work as expected: they are positioned in relation to canvasWrapper, the root element rendered by VisCanvas, which defines padding for the axes.

In this PR, I remedy this problem by refactoring VisCanvas once again in order to have a canvasWrapper element with the same size as the canvas that, unlike r3fRoot, does not hide overflow.

The root element rendered by VisCanvas is now called visCanvas (this may change in later refactors) and no longer has any padding. Instead, it takes on the role of axisSystem by setting up the CSS grid that lays everything out:

• canvasWrapper is now a child of visCanvas and positioned with grid-area.
• The axes and the grids are rendered as direct children of visCanvas and also positioned with grid-area.

So instead of:

.canvasWrapper (padding)
  .r3fRoot (hidden overflow)
    canvas
    .svgOverlay
    .floatingToolbar
  .axisSystem
    .axis
    .grid
    .axis
    .grid

... we now have:

.visCanvas (no padding)
  .canvasWrapper (visible overflow)
    .r3fRoot (hidden overflow)
      canvas
      .svgOverlay
      .floatingToolbar
  .axis
  .grid
  .axis
  .grid

I had tried similar refactors before but always ran into overflow issues. The key that unlocked it this time is the use of minmax(0, 1fr) instead of 1fr for sizing the grid area reserved for the canvas. This has a similar effect to min-width: 0 and min-height: 0 when using Flexbox. See https://css-tricks.com/preventing-a-grid-blowout/

Another important reason this layout works is because CSS Grid allows positioning multiple grid items into the same grid area. The items then behave as if they were positioned absolutely on top of one another. In our case, the axis grids are positioned in the same CSS Grid area as canvasWrapper. I feel like this will enable further refactors.

[axelboc]

/approve

[loichuder]

👍