fix overflow

Azuro-protocol · Jan 30, 2025 · 7551606 · 7551606
1 parent 0003c6b
commit 7551606
Show file tree

Hide file tree

Showing 2 changed files with 10 additions and 10 deletions.
diff --git a/src/components/inputs/Dropdown/views/Desktop/Dekstop.tsx b/src/components/inputs/Dropdown/views/Desktop/Dekstop.tsx
@@ -1,6 +1,6 @@
 import React, { forwardRef } from 'react'
 import cx from 'classnames'
-import { Menu } from '@headlessui/react'
+import { Menu, MenuButton, MenuItems } from '@headlessui/react'
 
 import type { DropdownProps } from '../../Dropdown'
 
@@ -27,7 +27,7 @@ const Desktop = forwardRef<HTMLDivElement, DropdownProps>((props, ref) => {
       as="div"
       className={rootClassName}
     >
-      <Menu.Button
+      <MenuButton
         aria-label="Menu"
         className={btnClassName}
       >
@@ -46,12 +46,12 @@ const Desktop = forwardRef<HTMLDivElement, DropdownProps>((props, ref) => {
             )
           }
         }
-      </Menu.Button>
-      <Menu.Items className={menuClassName}>
+      </MenuButton>
+      <MenuItems className={menuClassName} modal={false}>
         <div className={contentClassName}>
           {content}
         </div>
-      </Menu.Items>
+      </MenuItems>
     </Menu>
   )
 })

diff --git a/...ositions/PageLayout/components/Content/components/Controls/components/Balance/Balance.tsx b/...ositions/PageLayout/components/Content/components/Controls/components/Balance/Balance.tsx
@@ -3,7 +3,7 @@
 import React from 'react'
 import { useBetTokenBalance, useBetsSummary, useChain, useNativeBalance } from '@azuro-org/sdk'
 import { type ChainId } from '@azuro-org/toolkit'
-import { Listbox } from '@headlessui/react'
+import { Listbox, ListboxButton, ListboxOptions } from '@headlessui/react'
 import { Message } from '@locmod/intl'
 import cx from 'classnames'
 import { openModal } from '@locmod/modal'
@@ -50,7 +50,7 @@ const ChainSelect: React.FC = () => {
   return (
     <div className="border border-grey-20 p-1 rounded-md">
       <Listbox value={appChain.id} onChange={setAppChainId}>
-        <Listbox.Button
+        <ListboxButton
           className="p-2 flex items-center justify-between w-full group/select"
         >
           <div className="flex items-center">
@@ -63,8 +63,8 @@ const ChainSelect: React.FC = () => {
             <div className="text-caption-13">{appChain.name}</div>
           </div>
           <Icon className="size-4 text-grey-60 group-hover/select:text-grey-90 transition-colors group-aria-[controls]/select:rotate-180" name="interface/chevron_down" />
-        </Listbox.Button>
-        <Listbox.Options className="w-full space-y-[2px]">
+        </ListboxButton>
+        <ListboxOptions className="w-full space-y-[2px]" modal={false}>
           {
             config.chains.map((chain) => {
               const isActive = appChain.id === chain.id
@@ -102,7 +102,7 @@ const ChainSelect: React.FC = () => {
               )
             })
           }
-        </Listbox.Options>
+        </ListboxOptions>
       </Listbox>
     </div>
   )