diff --git a/projects/app/src/components/core/chat/ChatContainer/ChatBox/Input/VoiceInput.tsx b/projects/app/src/components/core/chat/ChatContainer/ChatBox/Input/VoiceInput.tsx
index d02885dc3219..c5c9e909caef 100644
--- a/projects/app/src/components/core/chat/ChatContainer/ChatBox/Input/VoiceInput.tsx
+++ b/projects/app/src/components/core/chat/ChatContainer/ChatBox/Input/VoiceInput.tsx
@@ -96,7 +96,8 @@ const MobileVoiceInput = ({
   const startYRef = useRef(0);
 
   const [isCancel, setIsCancel] = useState(false);
-
+  const canvasPosition = canvasRef.current?.getBoundingClientRect();
+  const maskBottom = canvasPosition ? `${window.innerHeight - canvasPosition.top}px` : '50px';
   const handleTouchStart = useCallback(
     (e: React.TouchEvent<HTMLDivElement>) => {
       isPressing.current = true;
@@ -195,7 +196,7 @@ const MobileVoiceInput = ({
           position="fixed"
           left={0}
           right={0}
-          bottom={'50px'}
+          bottom={maskBottom}
           h={'200px'}
           bg="linear-gradient(to top, white, rgba(255, 255, 255, 0.7), rgba(255, 255, 255, 0))"
         >