Merge pull request #169 from P-Appadoo/main

Fixed overlapped elements by dock

Author: MrSunshyne

packages/frontendmu-nuxt/components/auth/RsvpToMeetup.vue

@@ -106,9 +106,9 @@ const currentEventRsvpDetail = arrayOfEventRsvpDetail && arrayOfEventRsvpDetail[
 </script>
 
 <template>
-  <div v-if="rsvpOpen" class="dock-block sticky top-[90dvh] px-2 md:px-8 z-10 w-full">
-    <div class="contain relative h-16">
-      <div class="absolute left-0 right-0 bottom-0 w-full max-h-[80vh] overflow-y-auto rounded-2xl ">
+  <div v-if="rsvpOpen" class="dock-block sticky px-2 md:px-8 z-10 w-full bottom-6">
+    <div class="contain">
+      <div class="w-full max-h-[80vh] overflow-y-auto rounded-2xl">
         <div
           class="relative flex md:gap-4 gap-2 flex-col shadow-2xl bg-white/90 text-verse-800 shadow-zinc-800 ring-2 ring-zinc-900/5 backdrop-blur-2xl dark:bg-verse-800/40 dark:text-zinc-200  py-2"
         >

packages/frontendmu-nuxt/components/meetup/Single.vue

@@ -72,11 +72,8 @@ const currentAlbum = computed(() => fetchAlbumDetails(props.getCurrentEvent?.alb
             </div>
           </div>
         </div>
-        <ClientOnly>
-          <AuthRsvpToMeetup :meetup-id="routeId" :meetup-details="getCurrentEvent" />
-        </ClientOnly>
         <div class="contain">
-          <div class="mt-10">
+          <div class="mt-10 mb-4">
             <div class="grid grid-cols-1 md:grid-cols-2 gap-x-4 gap-y-4 md:gap-y-8">
               <template v-if="getCurrentEvent.Date">
                 <div class="border-t-2 border-verse-900/20 dark:border-verse-800/50 pt-6">
@@ -137,6 +134,9 @@ const currentAlbum = computed(() => fetchAlbumDetails(props.getCurrentEvent?.alb
           </ClientOnly>
         </div>
         <MeetupAlbum :get-current-event="getCurrentEvent" :current-album="currentAlbum" :source="photoAlbumSource" />
+        <ClientOnly>
+          <AuthRsvpToMeetup :meetup-id="routeId" :meetup-details="getCurrentEvent" />
+        </ClientOnly>
       </ContentBlock>
     </div>
   </div>