Bring back the popper & portal in dialog example

src/routes/dialog/index.svelte

@@ -10,6 +10,15 @@
   import Portal from "$lib/components/portal/Portal.svelte";
   import MenuItems from "$lib/components/menu/MenuItems.svelte";
   import MenuItem from "$lib/components/menu/MenuItem.svelte";
+  import { createPopperActions } from "svelte-popperjs";
+
+  const [popperRef, popperContent] = createPopperActions();
+  const popperOptions = {
+    placement: "bottom-end",
+    strategy: "fixed",
+    modifiers: [{ name: "offset", options: { offset: [0, 10] } }],
+  };
+
   function classNames(...classes) {
     return classes.filter(Boolean).join(" ");
   }
@@ -113,6 +122,7 @@
                       <Menu>
                         <span class="rounded-md shadow-sm">
                           <MenuButton
+                            use={[popperRef]}
                             class="inline-flex justify-center w-full px-4 py-2 text-sm font-medium leading-5 text-gray-700 transition duration-150 ease-in-out bg-white border border-gray-300 rounded-md hover:text-gray-500 focus:outline-none focus:border-blue-300 focus:shadow-outline-blue active:bg-gray-50 active:text-gray-800"
                           >
                             <span>Choose a reason</span>
@@ -131,14 +141,16 @@
                         </span>
 
                         <TransitionRoot
-                          enter="transition duration-300 ease-out"
+                          enter="transition duration-1000 ease-out"
                           enterFrom="transform scale-95 opacity-0"
                           enterTo="transform scale-100 opacity-100"
                           leave="transition duration-75 ease-out"
                           leaveFrom="transform scale-100 opacity-100"
                           leaveTo="transform scale-95 opacity-0"
                         >
+                          <Portal>
                             <MenuItems
+                              use={[[popperContent, popperOptions]]}
                               class="z-20 w-56 mt-2 origin-top-right bg-white border border-gray-200 divide-y divide-gray-100 rounded-md shadow-lg outline-none"
                             >
                               <div class="px-4 py-3">
@@ -167,7 +179,7 @@
                                 </MenuItem>
                                 <MenuItem
                                   as="a"
-                                disabled
+                                  disabled={true}
                                   href="#new-feature"
                                   class={resolveClass}
                                 >
@@ -192,6 +204,7 @@
                                 </MenuItem>
                               </div>
                             </MenuItems>
+                          </Portal>
                         </TransitionRoot>
                       </Menu>
                     </div>