Html2canvas push text outside of con

Question

I have a simple div with a paragraph in it. when the pdf is generated, the paragraph is pushed down outside the div I'm also using DaisyUI

<div class="bg-blue-50">
        <p class="text-xs">
          Placeholder for PDF Page BODY
        </p>
</div>

here is the code for generating the pdf from jspdf

export async function eyeReportToImage(eye: string) {
  const report = document.getElementById('pdf-report')
  if (!report)
    throw new Error('Report element not found')

  const pdfPageElement = document.getElementById(`my-pdf-page`)
  if (!pdfPageElement)
    throw new Error(`PDF page element not found  `)

  try {
    report.classList.remove('hidden')
    const canvas = await html2canvas(pdfPageElement, {
      scale: 3,
      width: 800,
      height: 1100,
      windowWidth: 800,
      windowHeight: 1100,
      useCORS: true,
      logging: false,
    })
    report.classList.add('hidden')
    return canvas.toDataURL('image/jpeg', 1)
  }
  catch (error) {
    report.classList.add('hidden')
    throw error
  }
}

How it looks on the page how it looks on the pdf

I tried a bunch of stuff but can't make it move