Refactor Calendar component to adjust default meeting times and improve event item styling

This commit updates the Calendar component by changing the default start time for meetings to 9:00 AM and the end time to 5:01 PM, ensuring better alignment with typical work hours. Additionally, the styling of calendar event items is refined by removing fixed width and height properties, allowing for more flexible rendering. These changes enhance the usability and visual presentation of the calendar feature, contributing to an improved user experience.

WebApp/Components/Features/Calendar/Index.razor

@@ -50,7 +50,7 @@
             </MonthTemplate>
             <WeekTemplate>
                 <MudTooltip Text="@GetEventTooltip(context)">
-                    <div class="calendar-event-item" style="width: 100%; height: 100%;">
+                    <div class="calendar-event-item">
                         @context.Text
                     </div>
                 </MudTooltip>

WebApp/Models/CalendarMeetingItem.cs

@@ -30,9 +30,9 @@ public class CalendarMeetingItem : CalendarItem
         MeetingHistoryData = meetingHistory;
         // Set base class properties that the calendar component uses
         Text = "Team Meeting";
-        // Use meeting date at 3:00 PM as default time
-        Start = meetingHistory.MeetingDate.Date.AddHours(15);
-        // Default to 1 hour duration
-        End = Start.AddHours(1);
+        // Set start to 9:00 AM on the meeting date
+        Start = meetingHistory.MeetingDate.Date.AddHours(9);
+        // Set end to 5:00 PM on the meeting date (5:01 PM to ensure it displays until 5pm if end is exclusive)
+        End = meetingHistory.MeetingDate.Date.AddHours(17).AddMinutes(1);
     }
 }

WebApp/wwwroot/app.css

@@ -280,10 +280,20 @@
     cursor: pointer;
     transition: background-color 0.2s ease, box-shadow 0.2s ease;
     box-shadow: 0 1px 3px rgba(0, 0, 0, 0.12);
-    margin: 2px 0;
-    min-height: 24px;
-    display: flex;
-    align-items: center;
+    width: 100% !important;
+    height: 100% !important;
+    display: block !important;
+    box-sizing: border-box;
+    text-align: center;
+}
+
+/* Ensure tooltip wrapper doesn't constrain width or height and adds spacing */
+.event-calendar .mud-tooltip-root {
+    width: 100%;
+    height: 100%;
+    display: block;
+    padding: 2px;
+    box-sizing: border-box;
 }
 
 .calendar-event-item:hover {