Fix misalignment of arrows when coords are outside

The issue was caused by the SVG layer fitting to the dimensions of the
outer wrapper, not the board. When `coords` is set to `outside`, the
board is smaller than the outer wrapper.

Fixes this by adding an inner "board wrapper" that contains the board
and arrows.

CHANGELOG.md

@@ -7,6 +7,8 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0
 
 ## [Unreleased]
 
+- Fix misalignment of arrows with board when `coords` is set to `outside`.
+
 ## [1.1.2] - 2023-11-07
 
 - Small style fixes

src/GChessBoardElement.ts

@@ -153,6 +153,7 @@ export class GChessBoardElement extends HTMLElement {
   private _shadow: ShadowRoot;
   private _style: HTMLStyleElement;
   private _wrapper: HTMLDivElement;
+  private _boardArrowsWrapper: HTMLDivElement;
   private _board: Board;
   private _fileCoords: Coordinates;
   private _rankCoords: Coordinates;
@@ -175,6 +176,11 @@ export class GChessBoardElement extends HTMLElement {
     });
     this._shadow.appendChild(this._wrapper);
 
+    this._boardArrowsWrapper = makeHTMLElement("div", {
+      classes: ["board-arrows-wrapper"],
+    });
+    this._wrapper.appendChild(this._boardArrowsWrapper);
+
     this._board = new Board(
       {
         orientation: GChessBoardElement._DEFAULT_SIDE,
@@ -183,7 +189,7 @@ export class GChessBoardElement extends HTMLElement {
       (e) => this.dispatchEvent(e),
       this._shadow
     );
-    this._wrapper.appendChild(this._board.element);
+    this._boardArrowsWrapper.appendChild(this._board.element);
 
     this._fileCoords = new Coordinates({
       direction: "file",
@@ -199,7 +205,7 @@ export class GChessBoardElement extends HTMLElement {
     this._wrapper.appendChild(this._rankCoords.element);
 
     this._arrows = new Arrows(GChessBoardElement._DEFAULT_SIDE);
-    this._wrapper.appendChild(this._arrows.element);
+    this._boardArrowsWrapper.appendChild(this._arrows.element);
   }
 
   connectedCallback() {

src/style.css

@@ -157,14 +157,19 @@ table.dragging {
   cursor: grab;
 }
 
-/***************
- * Coordinates *
- ***************/
+/***********
+ * Wrappes *
+ ***********/
 
-.wrapper {
+.wrapper,
+.board-arrows-wrapper {
   position: relative;
 }
 
+/***************
+ * Coordinates *
+ ***************/
+
 .coords {
   display: none;
   position: absolute;