fix: event cards layout bugs

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

@@ -8,6 +8,7 @@ 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';
@@ -34,9 +35,10 @@ 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) {
+  if (isLoading || userLoading) {
     return (
       <div className='flex justify-center items-center h-full'>Loading...</div>
     );
@@ -141,7 +143,7 @@ export default function ShowEvent() {
                         Organiser:
                       </Label>
                       <Label size='large'>
-                        {eventData.data.event.organizer.name || 'Unknown User'}
+                        {userData?.data.user?.name || 'Unknown User'}
                       </Label>
                     </div>
                   </div>

src/components/forms/event-form.tsx

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