fix: event cards layout bugs

src/app/(main)/events/[eventID]/page.tsx

@@ -160,7 +160,7 @@ export default function ShowEvent() {
                   <Label className='text-[var(--color-neutral-300)] mb-2'>
                     Participants
                   </Label>{' '}
-                  <div className='grid grid-cols-1 mt-3 sm:max-h-60 sm:grid-cols-2  sm:overflow-y-auto sm:mb-0'>
+                  <div className='grid grid-cols-1 mt-3'>
                     {eventData.data.event.participants?.map((user) => (
                       <ParticipantListEntry
                         key={user.user.id}

src/components/forms/event-form.tsx

@@ -336,7 +336,7 @@ const EventForm: React.FC<EventFormProps> = (props) => {
               <DialogTrigger asChild>
                 <Button variant='primary'>Calendar</Button>
               </DialogTrigger>
-              <div className='grid grid-cols-1 mt-3 sm:max-h-60 sm:grid-cols-2  sm:overflow-y-auto sm:mb-0'>
+              <div className='grid grid-cols-1 mt-3'>
                 {selectedParticipants.map((user) => (
                   <ParticipantListEntry
                     key={user.id}

src/components/time-picker.tsx

@@ -32,8 +32,8 @@ export default function TimePicker({
   const [open, setOpen] = React.useState(false);
 
   return (
-    <div className='flex gap-4' {...props}>
-      <div className='flex flex-col gap-3'>
+    <div className='grid grid-cols-2 gap-4' {...props}>
+      <div className='grid grid-rows-2 gap-2'>
         <Label htmlFor='date' className='px-1'>
           {dateLabel}
         </Label>
@@ -69,7 +69,7 @@ export default function TimePicker({
           </PopoverContent>
         </Popover>
       </div>
-      <div className='flex flex-col gap-3'>
+      <div className='grid grid-rows-2 gap-2'>
         <Label htmlFor='time' className='px-1'>
           {timeLabel}
         </Label>