Fix move animation clipping beneath board border by Copilot · Pull Request #191 · ProLoser/PeaceInTheMiddleEast

Copilot · 2026-03-20T01:13:52Z

Move <MoveAnimation> to be last child of #board — paint order fix
Raise dialog { z-index } from 1 → 100
Raise .move-animation-overlay { z-index } from 0 → 10 — above board pieces, below dialog
Expand overlay to board border-box (inset: calc(-1 * var(--board-border)), width: auto, height: auto, overflow: hidden) so animated pieces can paint over the visual border
Revert coordinate origin back to padding-box edge (boardRect + borderWidth) per review feedback
Fix wrong animation size when a piece is on the bar — scope samplePiece query to .point .piece so bar pieces (which are narrower) are not used for size sampling

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.

Co-authored-by: ProLoser <67395+ProLoser@users.noreply.github.com>

github-actions · 2026-03-20T05:28:55Z

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-28 03:29 UTC. Preview will be ready when the GitHub Pages deployment is complete.

ProLoser · 2026-03-21T22:17:23Z

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

ProLoser · 2026-03-21T22:23:55Z

@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

…oard edge Co-authored-by: ProLoser <67395+ProLoser@users.noreply.github.com> Agent-Logs-Url: https://github.com/ProLoser/PeaceInTheMiddleEast/sessions/c49561ee-6e2b-40de-aa09-138d1478b152

Copilot · 2026-03-21T22:52:55Z

@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.

…ise dialog z-index Co-authored-by: ProLoser <67395+ProLoser@users.noreply.github.com> Agent-Logs-Url: https://github.com/ProLoser/PeaceInTheMiddleEast/sessions/8ac6e086-2d7f-4433-8d84-2eb4f6fb9eac

Copilot · 2026-03-21T23:05:20Z

@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:

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.
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.
Dialog z-index — Raised from 1 → 100.

ProLoser · 2026-03-22T02:03:39Z

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

…d pieces, below dialog Co-authored-by: ProLoser <67395+ProLoser@users.noreply.github.com> Agent-Logs-Url: https://github.com/ProLoser/PeaceInTheMiddleEast/sessions/00e647c5-2d2c-455e-b986-2a96d267be2a

Copilot · 2026-03-22T02:05:07Z

@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 · 2026-03-22T02:11:26Z

@copilot animation does not appear above border

… the border Co-authored-by: ProLoser <67395+ProLoser@users.noreply.github.com> Agent-Logs-Url: https://github.com/ProLoser/PeaceInTheMiddleEast/sessions/ec66ed3b-3f8d-4976-a5f2-73d473c0e1e4

Copilot · 2026-03-22T02:15:28Z

@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.

Co-authored-by: Copilot <175728472+Copilot@users.noreply.github.com>

ProLoser · 2026-03-22T19:23:43Z

-        const boardStyle = getComputedStyle(board);
-        const overlayLeft = boardRect.left + parseFloat(boardStyle.borderLeftWidth);
-        const overlayTop = boardRect.top + parseFloat(boardStyle.borderTopWidth);
+        const overlayLeft = boardRect.left;
+        const overlayTop = boardRect.top;


@copilot revert this change

Done in f7bcc02 — reverted to boardRect.left + parseFloat(boardStyle.borderLeftWidth) / boardRect.top + parseFloat(boardStyle.borderTopWidth).

Co-authored-by: ProLoser <67395+ProLoser@users.noreply.github.com> Agent-Logs-Url: https://github.com/ProLoser/PeaceInTheMiddleEast/sessions/37dc4af9-a89e-49f5-9d01-c02df503df13

ProLoser · 2026-03-28T00:37:13Z

@copilot when a piece is on the bar (hit) the animations for the opposite color of the piece on the bar looks the wrong size. if a black piece is on the bar, the white pieces are too big in the animation. same for the opposite scenario

Agent-Logs-Url: https://github.com/ProLoser/PeaceInTheMiddleEast/sessions/dd332c38-f685-42e4-8bd2-58f53adfcd82 Co-authored-by: ProLoser <67395+ProLoser@users.noreply.github.com>

Copilot · 2026-03-28T00:39:23Z

@copilot when a piece is on the bar (hit) the animations for the opposite color of the piece on the bar looks the wrong size. if a black piece is on the bar, the white pieces are too...

Fixed in cc12102. The root cause: bar pieces come before point pieces in the DOM, so when a piece is on the bar, querySelector('.piece:not(.ghost):not(.moved) img') was sampling the bar piece (which is narrower than a point column) and using its smaller width as pieceSize for all animations. Changed the selector to .point .piece:not(.ghost):not(.moved) img to only sample from regular point pieces.

Initial plan

8f33bf3

Copilot AI assigned Copilot and ProLoser Mar 20, 2026

Copilot started work on behalf of ProLoser March 20, 2026 01:23 View session

fix: extend animation overlay over board border, fix z-index layering

34f9f73

Co-authored-by: ProLoser <67395+ProLoser@users.noreply.github.com>

Copilot AI changed the title ~~[WIP] Fix animation position above border and below dialogue~~ Fix move animation clipping beneath board border Mar 20, 2026

Copilot AI requested a review from ProLoser March 20, 2026 01:34

Copilot finished work on behalf of ProLoser March 20, 2026 01:34

ProLoser marked this pull request as ready for review March 21, 2026 20:17

Copilot started work on behalf of ProLoser March 21, 2026 22:17 View session

fix: revert inset/JS, drop overflow:hidden to fix piece clipping at b…

592e9ad

…oard edge Co-authored-by: ProLoser <67395+ProLoser@users.noreply.github.com> Agent-Logs-Url: https://github.com/ProLoser/PeaceInTheMiddleEast/sessions/c49561ee-6e2b-40de-aa09-138d1478b152

Copilot finished work on behalf of ProLoser March 21, 2026 22:53

Copilot started work on behalf of ProLoser March 21, 2026 22:53 View session

fix: move overlay last in DOM for paint order, clip at board edge, ra…

cad0af6

…ise dialog z-index Co-authored-by: ProLoser <67395+ProLoser@users.noreply.github.com> Agent-Logs-Url: https://github.com/ProLoser/PeaceInTheMiddleEast/sessions/8ac6e086-2d7f-4433-8d84-2eb4f6fb9eac

Copilot finished work on behalf of ProLoser March 21, 2026 23:05

Copilot started work on behalf of ProLoser March 22, 2026 02:03 View session

fix: raise overlay z-index to 10 so animated pieces render above boar…

5ff2963

…d pieces, below dialog Co-authored-by: ProLoser <67395+ProLoser@users.noreply.github.com> Agent-Logs-Url: https://github.com/ProLoser/PeaceInTheMiddleEast/sessions/00e647c5-2d2c-455e-b986-2a96d267be2a

Copilot finished work on behalf of ProLoser March 22, 2026 02:05

Copilot started work on behalf of ProLoser March 22, 2026 02:11 View session

fix: expand overlay to board border-box so animated pieces paint over…

26dbae4

… the border Co-authored-by: ProLoser <67395+ProLoser@users.noreply.github.com> Agent-Logs-Url: https://github.com/ProLoser/PeaceInTheMiddleEast/sessions/ec66ed3b-3f8d-4976-a5f2-73d473c0e1e4

Copilot finished work on behalf of ProLoser March 22, 2026 02:16

Merge branch 'main' into copilot/fix-animation-position

0f9093a

ProLoser requested a review from Copilot March 22, 2026 05:42

Copilot started reviewing on behalf of ProLoser March 22, 2026 05:43 View session

Copilot AI reviewed Mar 22, 2026

View reviewed changes

Comment thread src/Board/MoveAnimation.css

Update src/Board/MoveAnimation.css

87a2b4f

Co-authored-by: Copilot <175728472+Copilot@users.noreply.github.com>

ProLoser requested changes Mar 22, 2026

View reviewed changes

Copilot started work on behalf of ProLoser March 22, 2026 19:27 View session

revert: restore borderWidth offset in overlay coordinate origin

f7bcc02

Co-authored-by: ProLoser <67395+ProLoser@users.noreply.github.com> Agent-Logs-Url: https://github.com/ProLoser/PeaceInTheMiddleEast/sessions/37dc4af9-a89e-49f5-9d01-c02df503df13

Copilot AI requested a review from ProLoser March 22, 2026 19:29

Copilot finished work on behalf of ProLoser March 22, 2026 19:29

Copilot started work on behalf of ProLoser March 28, 2026 00:37 View session

fix: sample piece size from .point only, not bar pieces

cc12102

Agent-Logs-Url: https://github.com/ProLoser/PeaceInTheMiddleEast/sessions/dd332c38-f685-42e4-8bd2-58f53adfcd82 Co-authored-by: ProLoser <67395+ProLoser@users.noreply.github.com>

Copilot finished work on behalf of ProLoser March 28, 2026 00:39

Conversation

Copilot AI commented Mar 20, 2026 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Uh oh!

github-actions Bot commented Mar 20, 2026 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Built to branch gh-pages at 2026-03-28 03:29 UTC. Preview will be ready when the GitHub Pages deployment is complete.

Uh oh!

ProLoser commented Mar 21, 2026

Uh oh!

ProLoser commented Mar 21, 2026

Uh oh!

Copilot AI commented Mar 21, 2026

Uh oh!

Copilot AI commented Mar 21, 2026

Uh oh!

ProLoser commented Mar 22, 2026

Uh oh!

Copilot AI commented Mar 22, 2026

Uh oh!

ProLoser commented Mar 22, 2026

Uh oh!

Copilot AI commented Mar 22, 2026

Uh oh!

Copilot AI left a comment

Choose a reason for hiding this comment

Pull request overview

Reviewed changes

Uh oh!

Uh oh!

ProLoser Mar 22, 2026

Choose a reason for hiding this comment

Uh oh!

Copilot AI Mar 22, 2026

Choose a reason for hiding this comment

Uh oh!

ProLoser commented Mar 28, 2026

Uh oh!

Copilot AI commented Mar 28, 2026

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

3 participants

Copilot AI commented Mar 20, 2026 •

edited

Loading

github-actions Bot commented Mar 20, 2026 •

edited

Loading

Built to branch `gh-pages` at 2026-03-28 03:29 UTC.
Preview will be ready when the GitHub Pages deployment is complete.