✨ Feat: Add zIndex prop to StyledEventScaler for improved layering

Author: tyler-dane

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}
               />
             </>
           </>

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}`}
 `;