From 9efc87f6857307cf2c448614d8f7c2c39a0a6739 Mon Sep 17 00:00:00 2001
From: Junhao Liao <junhao@junhao.ca>
Date: Mon, 11 Mar 2024 17:31:58 -0400
Subject: [PATCH] Fix width and height of DateCalendar's Month & Year selectors
 to avoid hidden overflow.

---
 .../modals/CalendarModal/DatetimePicker.jsx        | 14 ++++++++++----
 1 file changed, 10 insertions(+), 4 deletions(-)

diff --git a/src/Viewer/components/modals/CalendarModal/DatetimePicker.jsx b/src/Viewer/components/modals/CalendarModal/DatetimePicker.jsx
index 027883ec..d653bfa4 100644
--- a/src/Viewer/components/modals/CalendarModal/DatetimePicker.jsx
+++ b/src/Viewer/components/modals/CalendarModal/DatetimePicker.jsx
@@ -44,9 +44,15 @@ const DateTimePicker = ({onChange, value}) => {
                 <DateCalendar
                     {...commonProps}
                     sx={{
-                        height: "300px",
-                        minWidth: "260px",
-                        borderRight: "1px solid rgba(0, 0, 0, 0.2)",
+                        ".MuiMonthCalendar-root": {
+                            width: "100%",
+                        },
+                        ".MuiYearCalendar-root": {
+                            width: "100%",
+                        },
+                        "borderRight": "1px solid rgba(0, 0, 0, 0.2)",
+                        "height": "320px",
+                        "minWidth": "260px",
                     }}
                     views={[
                         "year",
@@ -60,7 +66,7 @@ const DateTimePicker = ({onChange, value}) => {
                     timeSteps={{hours: 1, minutes: 1, seconds: 1}}
                     sx={{
                         ".MuiMultiSectionDigitalClockSection-root": {
-                            maxHeight: "300px",
+                            maxHeight: "320px",
                             width: "72px",
                         },
                         "borderBottom": "0",