feat: add scroll for lower heights

src/components/menu/divider/divider.module.css

@@ -1,5 +1,6 @@
 .divider {
   width: 100%;
   height: 1px;
+  min-height: 1px;
   background-color: var(--color-neutral-200);
 }

src/components/menu/item/item.module.css

@@ -5,6 +5,7 @@
   justify-content: flex-start;
   width: 100%;
   height: 40px;
+  min-height: 40px;
   padding: 0 12px;
   font-size: var(--font-sm);
   line-height: 1;

src/components/menu/menu.module.css

@@ -28,30 +28,11 @@
     flex-direction: column;
     row-gap: 4px;
     width: 240px;
+    height: max-content;
     padding: 4px;
+    overflow: auto;
     background-color: var(--color-neutral-100);
     border: 1px solid var(--color-neutral-300);
     border-radius: 4px;
-
-    & .menuItem {
-      position: flex;
-      align-items: center;
-      width: 100%;
-      padding: 12px 8px;
-      font-size: var(--font-sm);
-      font-weight: 500;
-      color: var(--color-foreground-subtle);
-      cursor: pointer;
-      background-color: transparent;
-      border: 1px solid var(--color-neutral-200);
-      border-radius: 4px;
-      outline: none;
-      transition: 0.2s;
-
-      &:hover {
-        color: var(--color-foreground);
-        background-color: var(--color-neutral-200);
-      }
-    }
   }
 }

src/components/menu/menu.tsx

@@ -1,12 +1,12 @@
 import { useState } from 'react';
 import { IoMenu, IoClose } from 'react-icons/io5/index';
-import { AnimatePresence, motion } from 'framer-motion';
 import {
   useFloating,
   autoUpdate,
   offset,
   flip,
   shift,
+  size,
   useClick,
   useDismiss,
   useRole,
@@ -25,8 +25,6 @@ import { Divider } from './divider';
 import { ShareLinkModal } from '@/components/modals/share-link';
 import { Notepad } from '@/components/toolbox';
 
-import { slideY, fade, mix } from '@/lib/motion';
-
 import styles from './menu.module.css';
 
 export function Menu() {
@@ -35,10 +33,20 @@ export function Menu() {
   const [showShareLink, setShowShareLink] = useState(false);
   const [showNotepad, setShowNotepad] = useState(false);
 
-  const variants = mix(slideY(-20), fade());
-
   const { context, floatingStyles, refs } = useFloating({
-    middleware: [offset(12), flip(), shift()],
+    middleware: [
+      offset(12),
+      flip(),
+      shift(),
+      size({
+        apply({ availableHeight, elements }) {
+          Object.assign(elements.floating.style, {
+            maxHeight: `${availableHeight}px`,
+          });
+        },
+        padding: 10,
+      }),
+    ],
     onOpenChange: setIsOpen,
     open: isOpen,
     placement: 'top-end',
@@ -68,20 +76,13 @@ export function Menu() {
           {isOpen ? <IoClose /> : <IoMenu />}
         </button>
 
-        <AnimatePresence>
         {isOpen && (
           <FloatingFocusManager context={context} modal={false}>
             <div
               ref={refs.setFloating}
               style={floatingStyles}
               {...getFloatingProps()}
-              >
-                <motion.div
-                  animate="show"
               className={styles.menu}
-                  exit="hidden"
-                  initial="hidden"
-                  variants={variants}
             >
               <ShareItem open={() => setShowShareLink(true)} />
               <ShuffleItem />
@@ -90,11 +91,9 @@ export function Menu() {
               <Divider />
               <DonateItem />
               <SourceItem />
-                </motion.div>
             </div>
           </FloatingFocusManager>
         )}
-        </AnimatePresence>
       </div>
 
       <ShareLinkModal