diff --git a/components/Modals/CreateCalendarEvent.tsx b/components/Modals/CreateCalendarEvent.tsx
index 0b23143..1847417 100644
--- a/components/Modals/CreateCalendarEvent.tsx
+++ b/components/Modals/CreateCalendarEvent.tsx
@@ -168,8 +168,8 @@ export default function CreateCalendarEventModal() {
             <div className="flex-1 divide-y overflow-hidden rounded-md bg-muted sm:max-w-[300px]">
               <div className="flex justify-between p-0.5 px-2 pl-3">
                 <div className="flex w-[50px] items-center">Start</div>
-                <div className="flex-1 shrink-0 bg-red-300">
-                  <div className="flex max-w-full bg-green-500">
+                <div className="flex-1 shrink-0">
+                  <div className="flex max-w-full break-keep bg-green-500">
                     <DatePicker
                       displayFormat="ddd, MMM D"
                       date={startDate}
@@ -187,8 +187,8 @@ export default function CreateCalendarEventModal() {
                       hideIcon={true}
                     />
                     <TimePicker
-                      className="shrink-0"
-                      inputClassName="max-w-fit pl-0 pr-1"
+                      className="shrink-0 break-keep"
+                      inputClassName="pl-0 pr-1"
                       value={startTime}
                       onChange={(newTime) =>
                         setStartDate(