fix: research popup in mobile

components/research/popup.vue

@@ -8,11 +8,17 @@ const model = defineModel<{
     abstract: string;
     links: Link[];
 }>()
+
+defineEmits(['close']);
 </script>
 
 <template>
     <div
-        class="m-2 p-8 lg:p-14 bg-zinc-50 rounded-xl shadow-md hover:shadow-xl transition-shadow duration-300 ease-in-out">
+        class="relative p-8 lg:p-14 bg-zinc-50 lg:rounded-xl shadow-md hover:shadow-xl transition-shadow duration-300 ease-in-out overflow-y-auto">
+        <button @click="$emit('close')"
+            class="absolute top-6 right-7 lg:top-8 lg:right-8 text-zinc-600 hover:text-zinc-300">
+            <icon name="heroicons-solid:x" class="h-6 w-6 lg:h-7 lg:w-7" />
+        </button>
         <div class="flex flex-col divide-y-2">
             <div class="flex flex-col gap-2 pb-3">
                 <h2 class="text-xl font-bold tracking-tight sm:text-2xl sm:leading-tight">{{ model?.title }}</h2>

pages/research.vue

@@ -56,9 +56,9 @@ function togglePopup(publication: any) {
         <!-- Popup -->
         <VueFinalModal v-model="showPopup" display-directive="if" :hide-overlay="false" overlay-transition="vfm-fade"
             content-transition="vfm-fade" :click-to-close="true" :esc-to-close="true" background="non-interactive"
-            :lock-scroll="true" :reserve-scroll-bar-gap="true" swipe-to-close="up"
-            class="flex justify-center items-center" content-class="max-w-2xl mx-4 space-y-2">
-            <research-popup v-model="selected" />
+            :lock-scroll="true" :reserve-scroll-bar-gap="true" class="flex justify-center items-center"
+            content-class="flex w-full h-full lg:h-fit lg:max-h-screen lg:max-w-2xl lg:mx-4 lg:space-y-2">
+            <research-popup v-model="selected" @close="showPopup = false" />
         </VueFinalModal>
     </main>
 </template>