absolute element doesnot cover the entire page

Question

hello community im creating an app using tailwindcss avelte to upload pdf and images using pdfjs and canvas. when im uploading image the absolute element not covering the bottom side of the page

enter image description here

my code is

<div class="absolute w-4/6 justify-center flex items-end mx-auto z-10 bottom-0 inset-x-0">
  <div class=" border-2 border-gray-100 flex px- py-4 w-full mx-auto  bg-gray-200 xl:flex-nowrap rounded-lg flex-wrap">
    <div class="container px-4 mx-auto flex items-center md:flex-row flex-col sm:right-0">
      <div class=" flex w-full pr-0 text-center md:mb-0 md:w-auto md:pr-10 md:text-left">
        <h1 class="title-font text-2xl font-bold text-red-600 md:text-2xl">Please verify document details before proceed</h1>
      </div>
      <div class="mx-auto flex flex-shrink-0 items-center space-x-6 md:ml-auto md:mr-0">
        <button class=" inline-flex items-center rounded-lg border border-red-600 text-red-600 py-2 px-8 hover:bg-red-600 hover:text-white disabled:cursor-not-allowed disabled:bg-red-200" on:click={releaseDoc} id="release">
          <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" class="w-6 h-6">
            <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>
          <span class="title-font ml-2 font-bold text-base">Release</span>
        </button>
        <button type="button" class="inline-flex items-center rounded-lg border border-green-900 text-green-900 py-2 px-8 hover:bg-green-900 hover:text-white focus:outline-none" id="confirm">
          {#if load}
            <svg role="status" class="mr-4 h-5 w-5 animate-spin rounded-full border-4 border-white border-r-green-900" viewBox="0 0 24 24" />
          {:else}
            <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" class="h-6 w-6 ">
              <path
                stroke-linecap="round"
                stroke-linejoin="round"
                d="M9 12.75L11.25 15 15 9.75M21 12c0 1.268-.63 2.39-1.593 3.068a3.745 3.745 0 01-1.043 3.296 3.745 3.745 0 01-3.296 1.043A3.745 3.745 0 0112 21c-1.268 0-2.39-.63-3.068-1.593a3.746 3.746 0 01-3.296-1.043 3.745 3.745 0 01-1.043-3.296A3.745 3.745 0 013 12c0-1.268.63-2.39 1.593-3.068a3.745 3.745 0 011.043-3.296 3.746 3.746 0 013.296-1.043A3.746 3.746 0 0112 3c1.268 0 2.39.63 3.068 1.593a3.746 3.746 0 013.296 1.043 3.746 3.746 0 011.043 3.296A3.745 3.745 0 0121 12z"
              />
            </svg>
          {/if}
          <span class="title-font ml-2 font-bold text-base">Confirm</span>
        </button>
        <button class="inline-flex items-center rounded-lg border border-green-900 text-green-900 py-2 px-8 hover:bg-green-900 hover:text-white focus:outline-none" style="display: none" on:click={getsignature} id="sign">
          {#if load}
            <svg role="status" class="mr-4 h-5 w-5 animate-spin rounded-full border-4 border-white border-r-green-900" viewBox="0 0 24 24" />
          {:else}
            <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" class="w-6 h-6">
              <path stroke-linecap="round" stroke-linejoin="round" d="M16.862 4.487l1.687-1.688a1.875 1.875 0 112.652 2.652L10.582 16.07a4.5 4.5 0 01-1.897 1.13L6 18l.8-2.685a4.5 4.5 0 011.13-1.897l8.932-8.931zm0 0L19.5 7.125M18 14v4.75A2.25 2.25 0 0115.75 21H5.25A2.25 2.25 0 013 18.75V8.25A2.25 2.25 0 015.25 6H10" />
            </svg>
          {/if}
          <span class="title-font ml-2 font-bold text-base">Sign_ID</span>
        </button>
        <button class="inline-flex items-center rounded-lg border border-green-900 text-green-900 py-2 px-8 hover:bg-green-900 hover:text-white focus:outline-none" style="display: none" id="publish" on:click|once={disablerelease} on:click={publishdoc}>
          {#if load}
            <svg role="status" class="mr-3 h-5 w-5 animate-spin rounded-full border-4 border-white border-r-green-900" viewBox="0 0 24 24" />
          {:else}
            <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" class="w-6 h-6">
              <path stroke-linecap="round" stroke-linejoin="round" d="M10.125 2.25h-4.5c-.621 0-1.125.504-1.125 1.125v17.25c0 .621.504 1.125 1.125 1.125h12.75c.621 0 1.125-.504 1.125-1.125v-9M10.125 2.25h.375a9 9 0 019 9v.375M10.125 2.25A3.375 3.375 0 0113.5 5.625v1.5c0 .621.504 1.125 1.125 1.125h1.5a3.375 3.375 0 013.375 3.375M9 15l2.25 2.25L15 12" />
            </svg>
          {/if}
          <span class="title-font ml-2 font-bold text-base">Submit</span>
        </button>
      </div>
    </div>
  </div>
</div>

Answer 1

if you want this element to cover the whole width you must replace w-4/6 with w-full in first line.