Changes

Co-authored-by: renee-png <262607627+renee-png@users.noreply.github.com>

src/routes/calendar.index.tsx

@@ -698,14 +698,19 @@ function MonthGrid({
   const today = new Date();
   return (
     <div>
-      <div className="grid grid-cols-7 text-xs font-medium text-muted-foreground border-b">
+      <div
+        className="text-xs font-medium text-muted-foreground border-b"
+        style={{ display: "grid", gridTemplateColumns: "repeat(7, minmax(0, 1fr))" }}
+      >
         {dayLabels.map((d) => (
           <div key={d} className="px-2 py-1.5 text-center">
             {d}
           </div>
         ))}
       </div>
-      <div className="grid grid-cols-7 auto-rows-fr">
+      <div
+        style={{ display: "grid", gridTemplateColumns: "repeat(7, minmax(0, 1fr))", gridAutoRows: "1fr" }}
+      >
         {days.map((d) => {
           const key = format(d, "yyyy-MM-dd");
           const dayEvts = eventsByDay.get(key) ?? [];
@@ -717,8 +722,9 @@ function MonthGrid({
               key={key}
               onClick={() => onSelectDay(d)}
               onDoubleClick={() => onCreateOnDay(d)}
+              style={{ minHeight: 100 }}
               className={cn(
-                "min-h-[100px] border-b border-r p-1.5 cursor-pointer transition-colors",
+                "border-b border-r p-1.5 cursor-pointer transition-colors",
                 "hover:bg-accent/40",
                 !inMonth && "bg-muted/30 text-muted-foreground",
                 isSel && "ring-1 ring-primary ring-inset",