From 22bd0734dc07cbd0a0d4e4612cdde0ff3d26f8f2 Mon Sep 17 00:00:00 2001
From: Federico Ruggi <1081051+ruggi@users.noreply.github.com>
Date: Thu, 12 Sep 2024 16:56:53 +0200
Subject: [PATCH] Fix active grid cell border during move (#6356)

**Problem:**

The new active cell indicator style introduce in
https://github.com/concrete-utopia/utopia/pull/6301 doesn't correctly
show the active cell borders.

**Fix:**

Fix that.

| Before | After |
|-------------|-----------|
| ![Kapture 2024-09-12 at 13 38
42](https://github.com/user-attachments/assets/c040c735-85b9-477e-9390-501536ed531d)
| ![Kapture 2024-09-12 at 13 39
10](https://github.com/user-attachments/assets/78820b33-0d11-414c-96a9-3dd8eb2ec3c9)
|
---
 .../components/canvas/controls/grid-controls.tsx    | 13 +++++++++----
 1 file changed, 9 insertions(+), 4 deletions(-)

diff --git a/editor/src/components/canvas/controls/grid-controls.tsx b/editor/src/components/canvas/controls/grid-controls.tsx
index e9732e84bfff..688df97ef115 100644
--- a/editor/src/components/canvas/controls/grid-controls.tsx
+++ b/editor/src/components/canvas/controls/grid-controls.tsx
@@ -815,11 +815,13 @@ export const GridControls = controlForStrategyMemoized<GridControlsProps>(({ tar
                     ? features.Grid.dotgridColor
                     : 'transparent'
 
-                const borderColor =
+                const isActiveCell =
                   countedColumn === currentHoveredCell?.column &&
                   countedRow === currentHoveredCell?.row
-                    ? colorTheme.brandNeonPink.value
-                    : features.Grid.inactiveGridColor
+
+                const borderColor = isActiveCell
+                  ? colorTheme.brandNeonPink.value
+                  : features.Grid.inactiveGridColor
 
                 return (
                   <div
@@ -830,10 +832,13 @@ export const GridControls = controlForStrategyMemoized<GridControlsProps>(({ tar
                       borderTop: gridPlaceholderBorder(borderColor),
                       borderLeft: gridPlaceholderBorder(borderColor),
                       borderBottom:
-                        countedRow >= grid.rows || (grid.rowGap != null && grid.rowGap > 0)
+                        isActiveCell ||
+                        countedRow >= grid.rows ||
+                        (grid.rowGap != null && grid.rowGap > 0)
                           ? gridPlaceholderBorder(borderColor)
                           : undefined,
                       borderRight:
+                        isActiveCell ||
                         countedColumn >= grid.columns ||
                         (grid.columnGap != null && grid.columnGap > 0)
                           ? gridPlaceholderBorder(borderColor)