From e4d3722992a5ba4bdd4ce2160ba6dd43f941f490 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?L=C3=AA=20Nh=C3=A2n=20Ph=E1=BB=A5ng?=
 <lenhanphung@Phung-Mac-M4.local>
Date: Fri, 5 Dec 2025 14:58:19 +0700
Subject: [PATCH] feat: update TimePicker to single column with 30-minute steps

---
 src/components/Event/components/DateTimeFields.tsx | 8 ++++++++
 1 file changed, 8 insertions(+)

diff --git a/src/components/Event/components/DateTimeFields.tsx b/src/components/Event/components/DateTimeFields.tsx
index c19daa5..86fccfe 100644
--- a/src/components/Event/components/DateTimeFields.tsx
+++ b/src/components/Event/components/DateTimeFields.tsx
@@ -321,6 +321,8 @@ export const DateTimeFields: React.FC<DateTimeFieldsProps> = ({
                     onChange={handleStartTimeChange}
                     open={isStartTimeOpen}
                     onClose={() => setIsStartTimeOpen(false)}
+                    thresholdToRenderTimeInASingleColumn={48}
+                    timeSteps={{ minutes: 30 }}
                     slotProps={{
                       ...getSlotProps("start-time-input"),
                       openPickerButton: { sx: { display: "none" } },
@@ -368,6 +370,8 @@ export const DateTimeFields: React.FC<DateTimeFieldsProps> = ({
                     onChange={handleEndTimeChange}
                     open={isEndTimeOpen}
                     onClose={() => setIsEndTimeOpen(false)}
+                    thresholdToRenderTimeInASingleColumn={48}
+                    timeSteps={{ minutes: 30 }}
                     slotProps={{
                       ...getSlotProps(
                         "end-time-input",
@@ -452,6 +456,8 @@ export const DateTimeFields: React.FC<DateTimeFieldsProps> = ({
                 disabled={allday}
                 open={isStartTimeOpen}
                 onClose={() => setIsStartTimeOpen(false)}
+                thresholdToRenderTimeInASingleColumn={48}
+                timeSteps={{ minutes: 30 }}
                 slotProps={{
                   ...getSlotProps("start-time-input"),
                   openPickerButton: { sx: { display: "none" } },
@@ -476,6 +482,8 @@ export const DateTimeFields: React.FC<DateTimeFieldsProps> = ({
                 disabled={allday}
                 open={isEndTimeOpen}
                 onClose={() => setIsEndTimeOpen(false)}
+                thresholdToRenderTimeInASingleColumn={48}
+                timeSteps={{ minutes: 30 }}
                 slotProps={{
                   textField: {
                     size: "small",