fix: event cards layout bugs

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

@@ -8,7 +8,6 @@ import {
   useDeleteApiEventEventID,
   useGetApiEventEventID,
 } from '@/generated/api/event/event';
-import { useGetApiUserMe } from '@/generated/api/user/user';
 import { RedirectButton } from '@/components/buttons/redirect-button';
 import { useSession } from 'next-auth/react';
 import ParticipantListEntry from '@/components/custom-ui/participant-list-entry';
@@ -35,10 +34,9 @@ export default function ShowEvent() {
 
   // Fetch event data
   const { data: eventData, isLoading, error } = useGetApiEventEventID(eventID);
-  const { data: userData, isLoading: userLoading } = useGetApiUserMe();
   const deleteEvent = useDeleteApiEventEventID();
 
-  if (isLoading || userLoading) {
+  if (isLoading) {
     return (
       <div className='flex justify-center items-center h-full'>Loading...</div>
     );
@@ -143,7 +141,7 @@ export default function ShowEvent() {
                         Organiser:
                       </Label>
                       <Label size='large'>
-                        {userData?.data.user?.name || 'Unknown User'}
+                        {eventData.data.event.organizer.name || 'Unknown User'}
                       </Label>
                     </div>
                   </div>
@@ -160,7 +158,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

@@ -30,6 +30,7 @@ import {
   DialogTitle,
   DialogTrigger,
 } from '../ui/dialog';
+import { useGetApiUserMe } from '@/generated/api/user/user';
 
 type User = zod.output<typeof PublicUserSchema>;
 
@@ -56,13 +57,10 @@ const EventForm: React.FC<EventFormProps> = (props) => {
     isSuccess,
     error,
   } = usePostApiEvent();
-  const {
+  const { data: eventData } = useGetApiEventEventID(props.eventId!, {
-    data: eventData,
-    isLoading,
-    isError,
-  } = useGetApiEventEventID(props.eventId!, {
     query: { enabled: props.type === 'edit' },
   });
+  const { data, isLoading, isError } = useGetApiUserMe();
   const patchEvent = usePatchApiEventEventID();
   const router = useRouter();
 
@@ -299,7 +297,7 @@ const EventForm: React.FC<EventFormProps> = (props) => {
                   <p className='text-[var(--color-neutral-300)]'>
                     {!isClient || isLoading
                       ? 'Loading...'
-                      : eventData?.data.event.organizer.name || 'Unknown User'}
+                      : data?.data.user.name || 'Unknown User'}
                   </p>
                 </div>
               </div>
@@ -336,7 +334,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='grid grid-cols-2 gap-4' {...props}>
-      <div className='flex flex-col gap-3'>
+      <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>