From ea531777c4a07d283c290e19b19fe2bf0b6ad889 Mon Sep 17 00:00:00 2001
From: Udit Takkar <53316345+Udit-takkar@users.noreply.github.com>
Date: Tue, 13 Jun 2023 16:38:00 +0530
Subject: [PATCH] fix: size of cell (#9486)

Signed-off-by: Udit Takkar <udit.07814802719@cse.mait.ac.in>
Co-authored-by: Peer Richelsen <peeroke@gmail.com>
---
 .../calendars/weeklyview/components/event/Empty.tsx | 13 ++++++-------
 1 file changed, 6 insertions(+), 7 deletions(-)

diff --git a/packages/features/calendars/weeklyview/components/event/Empty.tsx b/packages/features/calendars/weeklyview/components/event/Empty.tsx
index 2cd4cd5edd..460e4e3e5b 100644
--- a/packages/features/calendars/weeklyview/components/event/Empty.tsx
+++ b/packages/features/calendars/weeklyview/components/event/Empty.tsx
@@ -1,6 +1,7 @@
 import { shallow } from "zustand/shallow";
 
 import dayjs from "@calcom/dayjs";
+import { useTimePreferences } from "@calcom/features/bookings/lib";
 import { classNames } from "@calcom/lib";
 
 import { useCalendarStore } from "../../state/store";
@@ -13,6 +14,7 @@ type EmptyCellProps = GridCellToDateProps & {
 };
 
 export function EmptyCell(props: EmptyCellProps) {
+  const timeFormat = useTimePreferences((state) => state.timeFormat);
   const { onEmptyCellClick, hoverEventDuration } = useCalendarStore(
     (state) => ({
       onEmptyCellClick: state.onEmptyCellClick,
@@ -40,7 +42,7 @@ export function EmptyCell(props: EmptyCellProps) {
   return (
     <div
       className={classNames(
-        "group w-full",
+        "group flex w-full items-center justify-center",
         isDisabled && "pointer-events-none",
         !isDisabled && "bg-default dark:bg-muted"
       )}
@@ -54,16 +56,13 @@ export function EmptyCell(props: EmptyCellProps) {
           rounded-[4px]
           border-[1px] border-gray-900 py-1 px-[6px] text-xs font-semibold leading-5 group-hover:block group-hover:cursor-pointer"
           style={{
-            height: `calc(${hoverEventDuration}*var(--one-minute-height))`,
+            height: `calc(${hoverEventDuration}*var(--one-minute-height) - 2px)`,
             zIndex: 49,
             // @TODO: This used to be 90% as per Sean's work. I think this was needed when
             // multiple events are stacked next to each other. We might need to add this back later.
-            width: "100%",
+            width: "calc(100% - 2px)",
           }}>
-          <div className=" overflow-ellipsis leading-4">
-            {cellToDate.format("HH:mm")}
-            <span className="ml-2 inline">Click to select</span>
-          </div>
+          <div className=" overflow-ellipsis leading-4">{cellToDate.format(timeFormat)}</div>
         </div>
       )}
     </div>