grid rearrange's pink outline no longer partially overlapped (#6530)

**Problem:**

![image](https://github.com/user-attachments/assets/268bb1ae-28f9-4384-a4ea-d1bc93a50c1c)

The active grid cell's pink outline would sometimes appear under the
grey outline drawn for non-hovered cells.

**Fix:**

![image](https://github.com/user-attachments/assets/e51e0198-5bba-447a-9816-40ba30e4202a)

- The cell that has the pink outline is now drawn with a z-index: 1
- The outline no longer uses opacity which causes errors in color when
they overlap
- This means the cell outlines no longer need to predict overlap and
avoid drawing right and bottom borders

Author: balazsbajorics

editor/src/components/canvas/controls/grid-controls.tsx

@@ -821,10 +821,11 @@ const GridControl = React.memo<GridControlProps>(({ grid }) => {
           const isActiveCell =
             countedColumn === currentHoveredCell?.column && countedRow === currentHoveredCell?.row
 
-          const borderColor =
-            isActiveCell && targetsAreCellsWithPositioning
-              ? colorTheme.brandNeonPink.value
-              : colorTheme.blackOpacity35.value
+          const activePositioningTarget = isActiveCell && targetsAreCellsWithPositioning
+
+          const borderColor = activePositioningTarget
+            ? colorTheme.brandNeonPink.value
+            : colorTheme.grey65.value
           return (
             <div
               key={id}
@@ -834,6 +835,7 @@ const GridControl = React.memo<GridControlProps>(({ grid }) => {
               style={{
                 position: 'relative',
                 pointerEvents: 'initial',
+                zIndex: activePositioningTarget ? 1 : undefined,
               }}
               data-grid-row={countedRow}
               data-grid-column={countedColumn}
@@ -851,18 +853,8 @@ const GridControl = React.memo<GridControlProps>(({ grid }) => {
                     height: gridPlaceholderWidthOrHeight(scale),
                     borderTop: gridPlaceholderBorder(borderColor, scale),
                     borderLeft: gridPlaceholderBorder(borderColor, scale),
-                    borderBottom:
-                      isActiveCell ||
-                      countedRow >= grid.rows ||
-                      (grid.rowGap != null && grid.rowGap > 0)
-                        ? gridPlaceholderBorder(borderColor, scale)
-                        : undefined,
-                    borderRight:
-                      isActiveCell ||
-                      countedColumn >= grid.columns ||
-                      (grid.columnGap != null && grid.columnGap > 0)
-                        ? gridPlaceholderBorder(borderColor, scale)
-                        : undefined,
+                    borderBottom: gridPlaceholderBorder(borderColor, scale),
+                    borderRight: gridPlaceholderBorder(borderColor, scale),
                   }}
                 />
               </React.Fragment>

editor/src/uuiui/styles/theme/dark.ts

@@ -134,6 +134,7 @@ const colorsWithOpacity = {
   whiteOpacity20: createUtopiColor('oklch(100% 0 0 /20%)'),
   whiteOpacity30: createUtopiColor('oklch(100% 0 0 /30%)'),
   whiteOpacity35: createUtopiColor('oklch(100% 0 0 /35%)'),
+  grey65: createUtopiColor('oklch(65% 0 0)'),
   blackOpacity35: createUtopiColor('oklch(0% 0 0 / 35%)'),
   canvasControlsSizeBoxShadowColor20: createUtopiColor('rgba(255,255,255,0.20)'),
   canvasControlsSizeBoxShadowColor50: createUtopiColor('rgba(255,255,255,0.5)'),

editor/src/uuiui/styles/theme/light.ts

@@ -136,6 +136,7 @@ const colorsWithOpacity = {
   whiteOpacity30: createUtopiColor('oklch(100% 0 0 /30%)'),
   whiteOpacity35: createUtopiColor('oklch(100% 0 0 /35%)'),
   blackOpacity35: createUtopiColor('oklch(0% 0 0 / 35%)'),
+  grey65: createUtopiColor('oklch(65% 0 0)'),
   canvasControlsSizeBoxShadowColor20: createUtopiColor('rgba(0,0,0,0.20)'),
   canvasControlsSizeBoxShadowColor50: createUtopiColor('rgba(0,0,0,0.5)'),
   neutralInvertedBackground10: createUtopiColor('hsla(0,0%,0%,0.1)'),