slick including unintended spacing in the end

[vishnupeas]

Problem for the homepage

I have styling for Navbar set with

.nav-links {
            position: absolute;
            top: 0;
            left: 0;
            bottom: 0;
            right: 0;
            opacity: 0;
            flex-direction: column;
            align-items: center;
            justify-content: center;
            row-gap: 2rem;
            width: 100vw;
            height: 100vh;
            font-size: 2rem;
            color: #fff;
            background: #272727;
            transition: opacity 0.5s 0.5s, clip-path 0.7s 0.5s;
            clip-path: circle(200px at top right);
}

when navbar input is checked(hamburger),

.menu-btn:checked ~ .nav-links {
            opacity: 1;
            clip-path: circle(100% at center);
}

I have this working perfectly for all my pages except homepage which contains react-slick, and I found out its the one which is actually causing the problem because when I remove this <Slider {...settings}>{items}</Slider> it works perfectly just like other pages fully covering 100vh but somehow react-slick is causing the problem. I have tried removing all the styling done manually to check if it was working, even shortlisting the settings was also not able to do anything.

const settings = {
      PauseOnHover: true,
      dots: true,
      infinite: true,
      autoplay: true,
      swipeToSlide: true,
      speed: 1300,
      slidesToShow: 1,
      slidesToScroll: 1,
      arrows: true,
   };

When working perfectly

To be noted this happens only in mobile browsers, I have tested this in Desktop browsers (chrome,mozilla) looking for responsiveness and it works perfectly but soon as I get this page running in all my android phones this bug just happens for no reason