From ee443411bdb26874d3e6eb8a516cc34544154574 Mon Sep 17 00:00:00 2001
From: Tyler Dane <tyler@switchback.tech>
Date: Tue, 4 Feb 2025 10:29:53 -0600
Subject: [PATCH] =?UTF-8?q?=E2=9C=A8=20Feat:=20Add=20zIndex=20prop=20to=20?=
 =?UTF-8?q?StyledEventScaler=20for=20improved=20layering?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../Calendar/components/Event/Grid/GridEvent/GridEvent.tsx      | 2 ++
 packages/web/src/views/Calendar/components/Event/styled.ts      | 2 ++
 2 files changed, 4 insertions(+)

diff --git a/packages/web/src/views/Calendar/components/Event/Grid/GridEvent/GridEvent.tsx b/packages/web/src/views/Calendar/components/Event/Grid/GridEvent/GridEvent.tsx
index 3abb2e45b..c426e5af9 100644
--- a/packages/web/src/views/Calendar/components/Event/Grid/GridEvent/GridEvent.tsx
+++ b/packages/web/src/views/Calendar/components/Event/Grid/GridEvent/GridEvent.tsx
@@ -121,12 +121,14 @@ const _GridEvent = (
                 showResizeCursor={!isPlaceholder && !isResizing && !isDragging}
                 onMouseDown={(e) => onScalerMouseDown(event, e, "startDate")}
                 top="-0.25px"
+                zIndex={ZIndex.LAYER_4}
               />
 
               <StyledEventScaler
                 bottom="-0.25px"
                 showResizeCursor={!isPlaceholder && !isResizing && !isDragging}
                 onMouseDown={(e) => onScalerMouseDown(event, e, "endDate")}
+                zIndex={ZIndex.LAYER_4}
               />
             </>
           </>
diff --git a/packages/web/src/views/Calendar/components/Event/styled.ts b/packages/web/src/views/Calendar/components/Event/styled.ts
index ce70f9d34..8532a0cda 100644
--- a/packages/web/src/views/Calendar/components/Event/styled.ts
+++ b/packages/web/src/views/Calendar/components/Event/styled.ts
@@ -114,6 +114,7 @@ export interface ScalerProps {
   showResizeCursor: boolean;
   bottom?: string;
   top?: string;
+  zIndex?: number;
 }
 
 export const StyledEventScaler = styled.div.attrs<ScalerProps>((props) => {
@@ -130,4 +131,5 @@ export const StyledEventScaler = styled.div.attrs<ScalerProps>((props) => {
   top: ${(props) => props.top};
   bottom: ${(props) => props.bottom};
   ${(props) => props.showResizeCursor && `cursor: row-resize`};
+  ${({ zIndex }) => zIndex && `z-index: ${zIndex}`}
 `;