From ddd55e0a0c869c61892c5ec22d3b2d65ced72a07 Mon Sep 17 00:00:00 2001
From: Balazs Bajorics <2226774+balazsbajorics@users.noreply.github.com>
Date: Mon, 14 Oct 2024 11:53:57 +0200
Subject: [PATCH] Thinner grid cell borders (#6525)

**Details:**
- Removing the "insertion dots"
- Aligning the outer edge of the grid cells with the selection outline
- Making the grid cell borders thinner

**Before**
<img width="697" alt="image"
src="https://github.com/user-attachments/assets/f1f85fa5-ab84-4c71-84d8-3a5fa0c183dd">

**Now**
<img width="675" alt="image"
src="https://github.com/user-attachments/assets/5aa74828-8336-4c48-8ab0-bdf79139e92b">
---
 .../canvas/controls/grid-controls.tsx         | 66 ++-----------------
 1 file changed, 5 insertions(+), 61 deletions(-)

diff --git a/editor/src/components/canvas/controls/grid-controls.tsx b/editor/src/components/canvas/controls/grid-controls.tsx
index 4b90488f41e4..1fee7f42f12e 100644
--- a/editor/src/components/canvas/controls/grid-controls.tsx
+++ b/editor/src/components/canvas/controls/grid-controls.tsx
@@ -870,62 +870,6 @@ const GridControl = React.memo<GridControlProps>(({ grid }) => {
                         : undefined,
                   }}
                 />
-                <React.Fragment>
-                  <div
-                    style={{
-                      position: 'absolute',
-                      top: -1,
-                      bottom: -1,
-                      left: -1,
-                      right: -1,
-                      display: 'flex',
-                      alignItems: 'center',
-                      justifyContent: 'center',
-                    }}
-                  >
-                    <div style={{ width: 2, height: 2, backgroundColor: dotgridColor }} />
-                  </div>
-                  <div
-                    style={{
-                      width: 2,
-                      height: 2,
-                      backgroundColor: dotgridColor,
-                      position: 'absolute',
-                      top: -1,
-                      left: -1,
-                    }}
-                  />
-                  <div
-                    style={{
-                      width: 2,
-                      height: 2,
-                      backgroundColor: dotgridColor,
-                      position: 'absolute',
-                      bottom: -1,
-                      left: -1,
-                    }}
-                  />
-                  <div
-                    style={{
-                      width: 2,
-                      height: 2,
-                      backgroundColor: dotgridColor,
-                      position: 'absolute',
-                      top: -1,
-                      right: -1,
-                    }}
-                  />
-                  <div
-                    style={{
-                      width: 2,
-                      height: 2,
-                      backgroundColor: dotgridColor,
-                      position: 'absolute',
-                      bottom: -1,
-                      right: -1,
-                    }}
-                  />
-                </React.Fragment>
               </React.Fragment>
             </div>
           )
@@ -1676,16 +1620,16 @@ function gridKeyFromPath(path: ElementPath): string {
   return `grid-${EP.toString(path)}`
 }
 
-const placeholderBorderBaseWidth = 2
-
+const borderWidth = 1
 function gridPlaceholderBorder(color: string, scale: number): string {
-  return `${placeholderBorderBaseWidth / scale}px solid ${color}`
+  return `${borderWidth / scale}px solid ${color}`
 }
 
+const borderExtension = 0.5
 function gridPlaceholderTopOrLeftPosition(scale: number): string {
-  return `${-placeholderBorderBaseWidth / scale}px`
+  return `${-borderExtension / scale}px`
 }
 
 function gridPlaceholderWidthOrHeight(scale: number): string {
-  return `calc(100% + ${(placeholderBorderBaseWidth * 2) / scale}px)`
+  return `calc(100% + ${(borderExtension * 2) / scale}px)`
 }