Modal Lifting Entire Viewport Up When Activated with React, Tailwind-CodePudding

Currently having an issue with a modal in this project (Sandbox here). The Modal is correctly activated when the main image is clicked (note this should only be a thing in large viewports, will fix mobile after) and correctly works, however even though it is positioned Absolutely it seems to be affecting the rest of the page. The Navbar gets "squished" and everything lifts up to where there is a small gap on the bottom of the page. I set a min height of 100vh on the Main that is wrapping the two components but that doesn't seem to fix this problem.

CodePudding user response：

Use this tailwind trusted example model from their official website

Example:

<div  aria-labelledby="modal-title" role="dialog" aria-modal="true">
  <!--
    Background backdrop, show/hide based on modal state.

    Entering: "ease-out duration-300"
      From: "opacity-0"
      To: "opacity-100"
    Leaving: "ease-in duration-200"
      From: "opacity-100"
      To: "opacity-0"
  -->
  <div ></div>

  <div >
    <div >
      <!--
        Modal panel, show/hide based on modal state.

        Entering: "ease-out duration-300"
          From: "opacity-0 translate-y-4 sm:translate-y-0 sm:scale-95"
          To: "opacity-100 translate-y-0 sm:scale-100"
        Leaving: "ease-in duration-200"
          From: "opacity-100 translate-y-0 sm:scale-100"
          To: "opacity-0 translate-y-4 sm:translate-y-0 sm:scale-95"
      -->
      <div >
        <div >
          <div >
            <div >
              <!-- Heroicon name: outline/exclamation-triangle -->
              <svg  xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" aria-hidden="true">
                <path stroke-linecap="round" stroke-linejoin="round" d="M12 9v3.75m-9.303 3.376c-.866 1.5.217 3.374 1.948 3.374h14.71c1.73 0 2.813-1.874 1.948-3.374L13.949 3.378c-.866-1.5-3.032-1.5-3.898 0L2.697 16.126zM12 15.75h.007v.008H12v-.008z" />
              </svg>
            </div>
            <div >
              <h3  id="modal-title">Deactivate account</h3>
              <div >
                <p >Are you sure you want to deactivate your account? All of your data will be permanently removed. This action cannot be undone.</p>
              </div>
            </div>
          </div>
        </div>
        <div >
          <button type="button" >Deactivate</button>
          <button type="button" >Cancel</button>
        </div>
      </div>
    </div>
  </div>
</div>