fix dropdown

velocitylabs-org · Aug 15, 2024 · b9fe3a5 · b9fe3a5
1 parent 8263875
commit b9fe3a5
Show file tree

Hide file tree

Showing 6 changed files with 5 additions and 27 deletions.
diff --git a/app/package.json b/app/package.json
@@ -53,7 +53,6 @@
     "react-hook-form": "7.51.4",
     "sharp": "^0.33.3",
     "tailwind-merge": "^2.3.0",
-    "tailwind-scrollbar": "^3.1.0",
     "tailwindcss-animate": "^1.0.7",
     "viem": "^2.10.8",
     "wagmi": "^2.8.8",

diff --git a/app/pnpm-lock.yaml b/app/pnpm-lock.yaml
diff --git a/app/src/components/ChainSelect.tsx b/app/src/components/ChainSelect.tsx
@@ -130,7 +130,7 @@ const ChainSelect = forwardRef<HTMLDivElement, ChainSelectProps>(
           </div>
         </Tooltip>
 
-        <Dropdown isOpen={isOpen} dropdownRef={dropdownRef} disableScroll={options.length < 7}>
+        <Dropdown isOpen={isOpen} dropdownRef={dropdownRef}>
           {options.map(option => (
             <li
               key={option.uid}

diff --git a/app/src/components/Dropdown.tsx b/app/src/components/Dropdown.tsx
@@ -5,11 +5,9 @@ interface DropdownProps {
   isOpen: boolean
   dropdownRef: RefObject<HTMLDivElement>
   children: ReactNode
-  /** Disables scroll on dropdown. Used to disable scroll on dropdowns with few items to prevent animation flickering. */
-  disableScroll?: boolean
 }
 
-const Dropdown: FC<DropdownProps> = ({ isOpen, dropdownRef, children, disableScroll }) => {
+const Dropdown: FC<DropdownProps> = ({ isOpen, dropdownRef, children }) => {
   return (
     <AnimatePresence>
       {isOpen && (
@@ -18,7 +16,6 @@ const Dropdown: FC<DropdownProps> = ({ isOpen, dropdownRef, children, disableScr
           initial={{ height: '3.6rem' }}
           animate={{
             height: 'auto',
-            overflowY: disableScroll ? 'hidden' : 'auto',
             transition: {
               type: 'spring',
               bounce: 0.4,
@@ -29,7 +26,7 @@ const Dropdown: FC<DropdownProps> = ({ isOpen, dropdownRef, children, disableScr
             height: '3.6rem',
             transition: { duration: 0.06 },
           }}
-          className="absolute left-0 right-0 top-0 z-20 max-h-[18rem] scroll-m-1 rounded-md border-1 border-turtle-level3 bg-white scrollbar-thin scrollbar-track-white scrollbar-thumb-turtle-level2"
+          className="absolute left-0 right-0 top-0 z-20 max-h-[16.5rem] overflow-y-auto rounded-md border-1 border-turtle-level3 bg-white"
         >
           <ul className="flex flex-col gap-2 px-1 py-2">{children}</ul>
         </motion.div>

diff --git a/app/src/components/TokenAmountSelect.tsx b/app/src/components/TokenAmountSelect.tsx
@@ -114,7 +114,7 @@ const TokenAmountSelect = forwardRef<HTMLDivElement, TokenAmountSelectProps>(
         </Tooltip>
 
         {/* Dropdown */}
-        <Dropdown isOpen={isOpen} dropdownRef={dropdownRef} disableScroll={options.length < 7}>
+        <Dropdown isOpen={isOpen} dropdownRef={dropdownRef}>
           {options.map(option => {
             if (option.token === null) return null
             return (

diff --git a/app/tailwind.config.ts b/app/tailwind.config.ts
@@ -88,12 +88,7 @@ const config: Config = {
     },
   },
   darkMode: 'class',
-  plugins: [
-    addVariablesForColors,
-    nextui(),
-    require('tailwindcss-animate'),
-    require('tailwind-scrollbar')({ preferredStrategy: 'pseudoelements' }),
-  ],
+  plugins: [addVariablesForColors, nextui(), require('tailwindcss-animate')],
 }
 export default config