diff --git a/components/calendar/calendar-day-view.tsx b/components/calendar/calendar-day-view.tsx
index 9a9662c9f..beb5321a0 100644
--- a/components/calendar/calendar-day-view.tsx
+++ b/components/calendar/calendar-day-view.tsx
@@ -532,25 +532,25 @@ export function CalendarDayView({
                           {!clip.clippedStart && (
                           <div
                             data-resize-handle
-                            className="absolute top-0 left-1 right-1 h-3 cursor-n-resize z-20 flex items-start justify-center opacity-0 group-hover/event:opacity-100 transition-opacity"
+                            className="absolute top-0 inset-x-1 h-1 cursor-n-resize z-20 flex items-start justify-center opacity-0 group-hover/event:opacity-100 transition-opacity"
                             aria-label={t("events.resize")}
                             onPointerDown={(e) => handleResizePointerDown(ev.id, "top", startMinutes, durMin, e)}
                             onPointerMove={handleResizePointerMove}
                             onPointerUp={handleResizePointerUp}
                           >
-                            <div className="w-8 h-1 rounded-full bg-foreground/30 mt-0.5" />
+                            <div className="w-8 h-0.5 rounded-full bg-foreground/30" />
                           </div>
                           )}
                           {!clip.clippedEnd && (
                           <div
                             data-resize-handle
-                            className="absolute bottom-0 left-1 right-1 h-3 cursor-s-resize z-20 flex items-end justify-center opacity-0 group-hover/event:opacity-100 transition-opacity"
+                            className="absolute bottom-0 inset-x-1 h-1 cursor-s-resize z-20 flex items-end justify-center opacity-0 group-hover/event:opacity-100 transition-opacity"
                             aria-label={t("events.resize")}
                             onPointerDown={(e) => handleResizePointerDown(ev.id, "bottom", startMinutes, durMin, e)}
                             onPointerMove={handleResizePointerMove}
                             onPointerUp={handleResizePointerUp}
                           >
-                            <div className="w-8 h-1 rounded-full bg-foreground/30 mb-0.5" />
+                            <div className="w-8 h-0.5 rounded-full bg-foreground/30" />
                           </div>
                           )}
                         </div>
diff --git a/components/calendar/calendar-week-view.tsx b/components/calendar/calendar-week-view.tsx
index 050c48f09..fe89d83af 100644
--- a/components/calendar/calendar-week-view.tsx
+++ b/components/calendar/calendar-week-view.tsx
@@ -665,25 +665,25 @@ export function CalendarWeekView({
                         {!clip.clippedStart && (
                         <div
                           data-resize-handle
-                          className="absolute top-0 left-1 right-1 h-3 cursor-n-resize z-20 flex items-start justify-center opacity-0 group-hover/event:opacity-100 transition-opacity"
+                          className="absolute top-0 inset-x-1 h-1 cursor-n-resize z-20 flex items-start justify-center opacity-0 group-hover/event:opacity-100 transition-opacity"
                           aria-label={t("events.resize")}
                           onPointerDown={(e) => handleResizePointerDown(ev.id, "top", startMinutes, durMin, e)}
                           onPointerMove={handleResizePointerMove}
                           onPointerUp={handleResizePointerUp}
                         >
-                          <div className="w-8 h-1 rounded-full bg-foreground/30 mt-0.5" />
+                          <div className="w-8 h-0.5 rounded-full bg-foreground/30" />
                         </div>
                         )}
                         {!clip.clippedEnd && (
                         <div
                           data-resize-handle
-                          className="absolute bottom-0 left-1 right-1 h-3 cursor-s-resize z-20 flex items-end justify-center opacity-0 group-hover/event:opacity-100 transition-opacity"
+                          className="absolute bottom-0 inset-x-1 h-1 cursor-s-resize z-20 flex items-end justify-center opacity-0 group-hover/event:opacity-100 transition-opacity"
                           aria-label={t("events.resize")}
                           onPointerDown={(e) => handleResizePointerDown(ev.id, "bottom", startMinutes, durMin, e)}
                           onPointerMove={handleResizePointerMove}
                           onPointerUp={handleResizePointerUp}
                         >
-                          <div className="w-8 h-1 rounded-full bg-foreground/30 mb-0.5" />
+                          <div className="w-8 h-0.5 rounded-full bg-foreground/30" />
                         </div>
                         )}
                       </div>