fix: Skeleton for small screens on single event page

hackerspace-ntnu · Nov 21, 2024 · 0a46cc2 · 0a46cc2
1 parent dda95b6
commit 0a46cc2
Show file tree

Hide file tree

Showing 2 changed files with 3 additions and 3 deletions.
diff --git a/src/app/[locale]/(default)/events/[id]/loading.tsx b/src/app/[locale]/(default)/events/[id]/loading.tsx
@@ -17,8 +17,8 @@ export default function EventDetailsLoading() {
           <Skeleton className='h-6 w-32 rounded-lg' />
         </div>
         <Separator />
-        <div className='flex justify-between'>
-          <Skeleton className='h-36 w-3/5 rounded-lg' />
+        <div className='flex flex-col-reverse items-center gap-6 md:flex-row md:justify-between'>
+          <Skeleton className='h-36 w-full max-w-prose rounded-lg md:flex-1' />
           <Skeleton className='h-48 w-48 rounded-full' />
         </div>
       </div>

diff --git a/src/app/[locale]/(default)/events/[id]/page.tsx b/src/app/[locale]/(default)/events/[id]/page.tsx
@@ -59,7 +59,7 @@ export default async function EventDetailsPage({
           {event.location}
         </div>
         <Separator />
-        <div className='flex justify-between'>
+        <div className='flex flex-col-reverse items-center gap-6 md:flex-row md:justify-between'>
           <div className='max-w-prose'>
             <p>{event.description}</p>
           </div>