Add transition animation to Popover and adjust ListBox teleport structure

Author: cstns

frontend/src/ui-components/components/Popover.vue

@@ -16,19 +16,25 @@
             </span>
         </PopoverButton>
         <teleport to="body">
-            <PopoverPanel
-                v-if="open"
-                v-slot="{ close }"
-                ref="menu-items"
-                class="fixed w-full overflow-auto bg-white border border-gray-200 rounded-md shadow-md z-[200]"
-                :style="{
-                    top: position.top + 'px',
-                    left: position.left + 'px',
-                    width: 'fit-content'
-                }"
+            <transition
+                leave-active-class="transition duration-100 ease-in"
+                leave-from-class="opacity-100"
+                leave-to-class="opacity-0"
             >
-                <slot name="panel" :close="close" />
-            </PopoverPanel>
+                <PopoverPanel
+                    v-if="open"
+                    v-slot="{ close }"
+                    ref="menu-items"
+                    class="fixed w-full overflow-auto bg-white border border-gray-200 rounded-md shadow-md z-[200]"
+                    :style="{
+                        top: position.top + 'px',
+                        left: position.left + 'px',
+                        width: 'fit-content'
+                    }"
+                >
+                    <slot name="panel" :close="close" />
+                </PopoverPanel>
+            </transition>
         </teleport>
     </Popover>
 </template>

frontend/src/ui-components/components/form/ListBox.vue

@@ -26,12 +26,12 @@
                 </span>
             </ListboxButton>
 
-            <transition
-                leave-active-class="transition duration-100 ease-in"
-                leave-from-class="opacity-100"
-                leave-to-class="opacity-0"
-            >
-                <teleport to="body">
+            <teleport to="body">
+                <transition
+                    leave-active-class="transition duration-100 ease-in"
+                    leave-from-class="opacity-100"
+                    leave-to-class="opacity-0"
+                >
                     <ListboxOptions
                         v-if="open"
                         ref="menu-items"
@@ -64,8 +64,8 @@
                             </ListboxOption>
                         </slot>
                     </ListboxOptions>
-                </teleport>
-            </transition>
+                </transition>
+            </teleport>
         </div>
     </Listbox>
 </template>