AG-11450 - More new DOM structure fixes.

[alantreadway]

https://ag-grid.atlassian.net/browse/AG-11450

More refinements of the new DOM:

• Tooltips now respect window bounds correctly, and are no longer clipped due to removal of redundant overflow: hidden in several spots.
• Creating a chart into a DOM with ZERO CSS styles now renders a chart correctly.
• Setting chart width and/or height now correctly auto-centers the chart in the container DIV.
  • Additionally, tooltips, focus box and other overlaid elements now appear in the correct positions relative to the canvas.
• Reduction of number of inline styles in favour of CSS-based styles when feasible.

Example-runner cleanup:

• Stop polluting the container element:
  • Moved data-ag-charts onto .ag-charts-wrapper which we manage.

Use-cases tested - configs:

• Zero CSS / auto-sized chart ✅
• Zero CSS / fixed-sized chart ✅
• Container fixed/% / auto-sized chart ✅
• Container fixed/% / fixed-size chart ✅

Features tested:

• Tooltips ✅
• Keyboard Nav ✅
• Crosshairs ✅
• Context Menu ✅
• Zoom buttons ✅

[jacobp100]

We use this for the dark mode logic (plugins/ag-charts-generate-example-files/src/executors/generate/generator/utils/getDarkModeSnippet.ts)

[alantreadway]

Yes, I've moved this onto the part of the DOM we actually manage and updated the dark-mode logic.

[jacobp100]

What's display: contents meant to be doing here?

[alantreadway]

In one iteration it seemed that the <div> was adding some extra 3px to the canvas size (which caused an infinitely growing canvas feedback loop), this seemed to remove any extra contribution of this element from the impact on the parents size.

[jacobp100]

The infinite feedback loop happens when you miss display: block from the canvas - it defaults to inline-block, which creates extra padding