Проблема с пользовательским интерфейсом, он отлично работает в веб-просмотре, но делает прокрутку в мобильном представле ⇐ CSS

[Anonymous]

Я создал дизайн, который хорошо работает в веб-просмотре, но вызывает вертикальную прокрутку в мобильном браузере:
Веб-просмотр:
введите здесь описание изображения
мобильный вид :
введите здесь описание изображения
Кнопка селфи, обведенная кружком, появляется внизу, и пользователю нужно прокрутить ее до конца, чтобы увидеть ее.
Я хочу, чтобы страница не прокручивалась в мобильном представлении
"use client";
import Webcam from "react-webcam";
import React, { useState, useRef } from "react";
import { GrLinkNext, GrLinkPrevious } from "react-icons/gr";
import { MdOutlineCameraAlt, MdFlipCameraAndroid } from "react-icons/md";

// ANT-D :
import { Button, Flex } from "antd";
import { ImageUpload } from "@/services";

const SelfieScan = () => {
const webcamRef = useRef(null);
// Url of camera Image will come in this state in base64
const [capturedImage, setCapturedImage] = useState(null);
const [showCamera, setShowCamera] = useState(false);

const takeSelfieFun = () => {
if (webcamRef.current) {
const imageSrc = webcamRef.current.getScreenshot();
setCapturedImage(imageSrc);
} else {
console.error("Webcam is not ready.");
}
};

const handleRetake = () => {
setCapturedImage(null);
};

const handleSubmit = () => {
const imageToUpload = capturedImage ?? "";
try {
const data = ImageUpload(imageToUpload);
} catch (error) {
console.log("------>Error------>", error);
}
};

return (

{capturedImage && showCamera ? (



{
setShowCamera(false);
setCapturedImage(null);
}}
>










) : (

{showCamera && (









)}

)}
{!showCamera && (
setShowCamera(true)}>Tomarse una selfie
)}

);
};

export default SelfieScan;

.selfie-scan-container {
width: 100%;
display: flex;
align-items: center;
justify-content: center;
height: calc(100vh - 65px);

.webcam-container {
width: 100%;
display: flex;
gap: 50px;
align-items: center;
flex-direction: column;
position: relative;

.webcam {
height: calc(100vh - 65px);

@media screen and (max-width: 768px) {
width: 100vw;
}
}

.btn-position {
position: absolute;
bottom: 2rem;

.camera-btn,
.retake-btn,
.submit-btn {
height: 60px;
width: 60px;
font-size: 25px;
border-radius: 50%;
color: black;
background-color: #fff;
display: flex;
align-items: center;
justify-content: center;
}
}
}
}


Подробнее здесь: https://stackoverflow.com/questions/784 ... mobile-vie