Event dropdown (#1089)

* fixed create event dropdown and make time buttons smaller

* fixed create event dropdown and reduced size of time buttons

* Update client/src/components/controls/CustomEvent.tsx

Co-authored-by: Mark Tran <29350857+mark-trann@users.noreply.github.com>

* hardcoded timePickerWidth

* removed redundant code

* removed timepickerwidth

---------

Co-authored-by: Yumna Zaheed <z5550542@student.unsw.edu.au>
Co-authored-by: Mark Tran <29350857+mark-trann@users.noreply.github.com>

Author: 3 people

client/src/components/controls/CustomEvent.tsx

@@ -240,9 +240,16 @@ const CustomEvent: React.FC = () => {
           horizontal: 'right',
         }}
         transformOrigin={{
-          vertical: 'bottom',
+          vertical: 'top',
           horizontal: 'right',
         }}
+        slotProps={{
+          paper: {
+            style: {
+              minWidth: createEventAnchorEl?.clientWidth,
+            },
+          },
+        }}
       >
         <StyledList>
           <TabContext value={eventType}>

client/src/components/controls/CustomEventGeneral.tsx

@@ -89,21 +89,31 @@ const CustomEventGeneral: React.FC<CustomEventGeneralProps> = ({
       <StyledListItem>
         <StyledListItemText primary="Start time" />
         <TimePicker
-          // Displays time as the time of the grid the user pressed
-          // when popover has just been opened
           value={isInitialStartTime ? initialStartTime : startTime}
           onChange={(e) => {
             if (e) setStartTime(e);
             setIsInitialStartTime(false);
           }}
+          slotProps={{
+            textField: {
+              size: 'small',
+              sx: { width: 180 }
+            }
+          }}
         />
       </StyledListItem>
       <StyledListItem>
         <StyledListItemText primary="End time" />
         <TimePicker
           value={isInitialEndTime ? initialEndTime : endTime}
           label={!areValidEventTimes(startTime, endTime) ? 'End time must be after start' : ''}
-          slotProps={{ textField: { color: areValidEventTimes(startTime, endTime) ? 'primary' : 'error' } }}
+          slotProps={{
+            textField: {
+              size: 'small',
+              color: areValidEventTimes(startTime, endTime) ? 'primary' : 'error',
+              sx: { width: 180 }
+            }
+          }}
           onChange={(e) => {
             if (e) setEndTime(e);
             setIsInitialEndTime(false);