fix: rizna huyeta

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;
   }

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;

src/routes/-/RootLayout/components/Navigation/Navigation.tsx

@@ -168,6 +168,10 @@ export default function Navigation() {
   const [menuOpen, setMenuOpen] = useState<number>(0);
   const navRef = useRef<HTMLDivElement>(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 (
     <div ref={navRef}>
       <div className={classes.menuOverlay}>