Fix move animation clipping beneath board border

[Copilot]

The move animation overlay had several problems: animated pieces were clipped at the content box edge and could not paint over the visual border; the overlay rendered below pieces because it appeared before the <Point> elements in the DOM; and z-index layering was incorrect with the overlay below board pieces and the dialog too low.

Changes

• Board.css — Extracts border width into --board-border: 5vmin CSS variable
• MoveAnimation.css — Uses inset: calc(-1 * var(--board-border, 5vmin)) to expand the overlay to cover the full board border-box so animated pieces can paint over the visual border; overflow: hidden clips at the outer board edge preventing off-screen overflow; z-index: 10 places animated pieces above board pieces (z-index: auto) but below the dialog (z-index: 100)
• MoveAnimation.tsx — Updates the JS coordinate origin from the padding-box edge (boardRect + borderWidth) to the border-box edge (boardRect.left/top) to match the expanded overlay position
• index.tsx — Moves <MoveAnimation> to be the last child of #board (after all 24 <Point> elements) so it paints on top of pieces via document order
• Dialogues.css — Raises dialog { z-index } from 1 → 100 to keep the dialog clearly above the animation overlay

Original prompt

The animation is appearing underneath the border. I want it to be above the border but below the dialogue

---

📱 Kick off Copilot coding agent tasks wherever you are with GitHub Mobile, available on iOS and Android.

[github-actions]

PR Preview Action v1.8.1
🚀 View preview at https://ProLoser.github.io/PeaceInTheMiddleEast/preview/pr-191/
Built to branch gh-pages at 2026-03-22 05:44 UTC. Preview will be ready when the GitHub Pages deployment is complete.

[ProLoser]

@copilot when moving from one side to the other side the piece starting animation position is off the edge of the screen

[ProLoser]

@copilot some of the points are animating off the right edge of the screen now I don't think it was doing that before and now the animation is showing up below the pieces. İncrease the dialogue Z index

[Copilot]

@copilot when moving from one side to the other side the piece starting animation position is off the edge of the screen

The root cause was that inset: calc(-1 * var(--board-border)) on an absolutely-positioned child of a CSS Grid container produces a smaller overlay than the full board (1212×652 vs 1280×720 in testing), so overflow: hidden was clipping pieces near the bottom/right edges more aggressively than before — this is what made pieces appear to start off the edge.

Fixed in 592e9ad by:

• Reverting inset back to 0 and the JS coordinate calculation to the original
• Removing overflow: hidden — pieces now render fully up to the board's content edge and can paint naturally over the border (since #board has overflow: visible)

The z-index fix (10 → 0, keeping animation below the dialog) is preserved.

[Copilot]

@copilot some of the points are animating off the right edge of the screen now I don't think it was doing that before and now the animation is showing up below the pieces. İncrease the dialogue Z ind...

Fixed in cad0af6 with three changes:

1. Off right edge — Added overflow: clip; overflow-clip-margin: var(--board-border, 5vmin) to the overlay. This clips animated pieces at the board's outer edge (border box), preventing them from going off-screen while still allowing them to visually cross the border during animation.

2. Animation below pieces — Moved <MoveAnimation> to be the last child inside #board (after all 24 <Point> elements). Both the overlay (z-index: 0) and .point (position: relative; z-index: auto) share the same CSS stacking step, where document order determines paint order — being last ensures the overlay paints on top.

3. Dialog z-index — Raised from 1 → 100.

[ProLoser]

@copilot animating piece should be higher z index than regular board pieces but lower than dialogue

[Copilot]

@copilot animating piece should be higher z index than regular board pieces but lower than dialogue

Done in 5ff2963 — .move-animation-overlay is now z-index: 10. Board pieces use position: relative; z-index: auto (CSS stacking step 6), so the overlay at step 7 (z-index: 10) paints above them, while the dialog at z-index: 100 remains on top of everything.

[ProLoser]

@copilot animation does not appear above border

[Copilot]

@copilot animation does not appear above border

Fixed in 26dbae4. The overlay was positioned with inset: 0 (inside the border), so overflow: clip was clipping pieces before they could paint in the border zone. Changed to inset: calc(-1 * var(--board-border)) so the overlay expands to cover the full border-box, with overflow: hidden clipping at the outer edge. Updated the JS coordinate origin from the padding-box edge (boardRect + borderWidth) to the border-box edge (boardRect.left/top) to keep piece positions correct.

[Copilot]

Pull request overview

Adjusts the board move animation overlay so animated pieces can render above the board border (without being clipped) while keeping the dialog UI layered above the animation.

Changes:

• Introduces --board-border and uses it for the board border width.
• Expands the move animation overlay to the board border-box area and updates coordinate calculations accordingly.
• Moves <MoveAnimation> to the end of #board children and raises dialog z-index to keep dialogs above the overlay.

Reviewed changes

Copilot reviewed 5 out of 5 changed files in this pull request and generated 1 comment.

Show a summary per file

File	Description
src/index.tsx	Moves <MoveAnimation> to the end of the board DOM for paint order.
src/Dialogues/Dialogues.css	Raises dialog z-index to stay above the overlay.
src/Board/MoveAnimation.tsx	Aligns animation coordinate origin with the overlay’s new placement.
src/Board/MoveAnimation.css	Expands overlay via negative inset and sets overlay z-index/overflow.
src/Board/Board.css	Extracts border width into --board-border and uses it for the board border.

---

💡 Add Copilot custom instructions for smarter, more guided reviews. Learn how to get started.

[Copilot]

inset: calc(-1 * var(--board-border)) may not actually expand the overlay because #board > * sets width: 100%/height: 100% for all direct children (including this absolute overlay). With abs-pos, specifying left/right/top/bottom and width/height is over-constrained, and the browser will ignore one side (typically right/bottom), leaving the overlay shifted but still clipped on the opposite edges. Consider overriding width/height back to auto (or excluding .move-animation-overlay from #board > *) so the inset can take effect on all sides.

Suggested change

	inset: calc(-1 * var(--board-border, 5vmin));
	inset: calc(-1 * var(--board-border, 5vmin));
	width: auto;
	height: auto;