Styling bug when generating table

[MarvingMoreton]

Hello,

I am using html2canvas with jsPDF in my next js app. However, it seems like I am having an error specifically on the table part of my generation (which is an invoice), as you can see on the screenshot attached:

What is weird is that, it used to work, and the fact that it's not working anymore on the table part is very strange to me...

Here's my generatePDF function:

` const generatePDF = () => {
const input = document.getElementById('invoice')
if (input) {
html2canvas(input, {
scale: 2,
useCORS: true,
logging: true,
width: input.offsetWidth,
height: input.offsetHeight
})
.then((canvas) => {
// Pixels per millimeter (A4 size is 210mm x 297mm)
const imgData = canvas.toDataURL('image/png')
const pdf = new jsPDF('p', 'mm', 'a4')
const pdfWidth = pdf.internal.pageSize.getWidth()
const pdfHeight = pdf.internal.pageSize.getHeight()
const canvasWidth = canvas.width
const canvasHeight = canvas.height
const ratio = pdfWidth / canvasWidth
const imgWidth = canvasWidth * ratio
const imgHeight = canvasHeight * ratio

      pdf.addImage(imgData, 'PNG', 0, 0, imgWidth, imgHeight)
      pdf.save('invoice.pdf')
    })
    .catch((error) => {
      console.error('Error generating PDF: ', error)
    })
} else {
  console.error('Element to render as PDF was not found.')
}

}`

And the section that is currently bugging:

` {isFormEmpty(details) ? (
// Render skeleton or placeholder if form is empty

) : (

{/* TABLE HERE */}

{i('itemsSection')}

{i('qty')}

{i('itemRate')}

{i('amount')}

                <div className="hidden border-b border-gray-200 dark:border-gray-700 sm:block"></div>
                {/* Item Rows */}
                {details?.items.map((item, index) => (
                  <React.Fragment key={index}>
                    <div className="grid grid-cols-3 gap-2 py-2 sm:grid-cols-5">
                      <div className="col-span-full sm:col-span-2">
                        <p className="font-medium text-black-100 ">
                          {item?.name}
                        </p>
                      </div>
                      <div>
                        <p className="text-black-100 ">{item?.quantity}</p>
                      </div>
                      <div>
                        <p className="text-black-100 ">
                          ${details.currency}{' '}
                          {safeParseFloat(item?.unitPrice).toFixed(2)}
                        </p>
                      </div>
                      <div>
                        <p className="text-black-100  sm:text-end">
                          ${details.currency}{' '}
                          {safeParseFloat(item?.total).toFixed(2)}
                        </p>
                      </div>
                    </div>
                    {/* Conditionally render a border if not the last item */}
                    {index < details.items.length - 1 && (
                      <div className="border-b border-slate-200 dark:border-gray-700"></div>
                    )}
                  </React.Fragment>
                ))}
              </div>
            </div>`

I have tried:

• Disactivating my skeleton behavior, still bugging
• Disactivating my translation set up with next-intl, still bugging

Thanks in advance for the help!

Behavior visible live on: https://freel.ca/tools/free-invoice-generator