diff --git a/src/components/modals/Modal/Modal.module.css b/src/components/modals/Modal/Modal.module.css index ebd24a8..a9b4a54 100644 --- a/src/components/modals/Modal/Modal.module.css +++ b/src/components/modals/Modal/Modal.module.css @@ -22,6 +22,9 @@ align-items: center; width: 100%; max-width: 320px; + max-height: calc( + var(--safe-area-height) - var(--header-total) - var(--navigation-total) - 70px + ); } .modal { @@ -29,9 +32,6 @@ flex-direction: column; gap: 6px; width: 100%; - max-height: calc( - var(--safe-area-height) - var(--header-total) - var(--navigation-total) - 70px - ); overflow: auto; padding: 13px; } diff --git a/src/routes/-/RootLayout/RootLayout.module.css b/src/routes/-/RootLayout/RootLayout.module.css index 8b00347..2dcf658 100644 --- a/src/routes/-/RootLayout/RootLayout.module.css +++ b/src/routes/-/RootLayout/RootLayout.module.css @@ -4,7 +4,7 @@ height: 100%; width: 100%; - background-image: url("./assets/main-bg.svg"); + background-image: url("./assets/main-bg.png"); background-size: auto 101%; background-position: center; overflow: hidden; diff --git a/src/routes/-/RootLayout/assets/main-bg.png b/src/routes/-/RootLayout/assets/main-bg.png new file mode 100644 index 0000000..95e5fa7 Binary files /dev/null and b/src/routes/-/RootLayout/assets/main-bg.png differ diff --git a/src/routes/-/RootLayout/components/Navigation/Navigation.tsx b/src/routes/-/RootLayout/components/Navigation/Navigation.tsx index a841522..5cd850d 100644 --- a/src/routes/-/RootLayout/components/Navigation/Navigation.tsx +++ b/src/routes/-/RootLayout/components/Navigation/Navigation.tsx @@ -168,6 +168,10 @@ export default function Navigation() { const [menuOpen, setMenuOpen] = useState(0); const navRef = useRef(null); + const viewportHeight = useTelegramViewportValue("height"); + const stableHeight = useTelegramViewportValue("stableHeight"); + const isKeyboardVisible = stableHeight - viewportHeight > 100; + const handleOutsideClick = useCallback((e: MouseEvent) => { if (navRef.current && !navRef.current.contains(e.target as Node)) { setMenuOpen(0); @@ -192,6 +196,8 @@ export default function Navigation() { setMenuOpen(0); }; + if (isKeyboardVisible) return null; + return (