Проблема с отображением модального окна NextUI на мобильных экранах

Question

У меня проблема: я использую NextUI, а именно компонент Modal. Пример компонента покажу ниже. Моя проблема в том, что модальное окно не отображается на экранах с шириной меньше 639px. На официальном сайте такой проблемы нет, может быть, подскажете, в чем дело или где искать проблему? Переписывать на чистый JS и CSS желания нет.

Вот сам компонент:

    "use client";

import {
    Modal,
    ModalContent,
    ModalHeader,
    ModalBody,
    ModalFooter,
    Button,
    useDisclosure,
    Link,
} from "@nextui-org/react";
import { useSession } from "next-auth/react";
import React from "react";

import SearchInput from "@/components/searchInput/SearchInput";
import { PRIVATE_ROUTES, PUBLIC_ROUTES } from "@/const/Routes.const";

const MobileMenuForNavbar = () => {
    const { isOpen, onOpen, onOpenChange } = useDisclosure();
    const session = useSession();

    return (
        <>
            <Button onPress={onOpen} className="shadow-md " color="primary" variant="solid">
                Меню
            </Button>
            <Modal isOpen={isOpen} backdrop="blur" size="sm" onOpenChange={onOpenChange} placement="top">
                <ModalContent>
                    {(onClose) => (
                        <>
                            <ModalHeader className="flex flex-col gap-1">Меню</ModalHeader>
                            <ModalBody>
                                <ul className="flex flex-col space-y-2">
                                    {session.status === "authenticated"
                                        ? PRIVATE_ROUTES.map((link, index) => (
                                              <li key={index}>
                                                  <Link
                                                      href={link.path}
                                                      className="block p-2 hover:text-blue-600 hover:bg-gray-200 transition-colors duration-300 rounded"
                                                      onClick={onClose}
                                                  >
                                                      {link.name}
                                                  </Link>
                                              </li>
                                          ))
                                        : PUBLIC_ROUTES.map((link, index) => (
                                              <li key={index}>
                                                  <Link
                                                      href={link.path}
                                                      className="block p-2 hover:text-blue-600 hover:bg-gray-200 transition-colors duration-300 rounded"
                                                      onClick={onClose}
                                                  >
                                                      {link.name}
                                                  </Link>
                                              </li>
                                          ))}
                                    <li>
                                        <SearchInput />
                                    </li>
                                </ul>
                            </ModalBody>
                            <ModalFooter>
                                <Button color="danger" variant="light" onPress={onClose}>
                                    Закрыть
                                </Button>
                            </ModalFooter>
                        </>
                    )}
                </ModalContent>
            </Modal>
        </>
    );
};

export default MobileMenuForNavbar;

RootLayout:

export default function RootLayout({ children }: PropsWithChildren) {
return (
    <html lang="ru">
        <body className={inter.className}>
            <ProviderNextUI>
                <ProvidersSession>
                   <MobileMenuForNavbar/>
                    {children}
                    <Footer />
                </ProvidersSession>
            </ProviderNextUI>
        </body>
    </html>
);

}

БЛОГ НА HUSL

Проблема с отображением модального окна NextUI на мобильных экранах

Ответы (0 шт):