Printing like the viewport is on mobile but in reality is on desktop

[nosinformatica]

i would like to print this component that is inside a modal but when i print it gets out like this

this is the function used to print:

<ReactToPrint
    bodyClass="print-agreement"
    content={() => ref.current}
     trigger={() => (
    <Button variant="contained" type="button" style={{ backgroundColor: 'gray', marginLeft: '2%' }} className="">
    <Download width={15} />PDF
        </Button>
    )}
    pageStyle={`@media print {@page {size: 2000x 2000px; margin: 1cm;}`}
 />

the component is inside a modal

<Modal
  isOpen={open}
  toggle={handleClose}
  centered
  size="lg"
  style={{maxWidth: '1100px', width: '100%'}}
  backdropClassName={open ? 'BDModalOpen' : 'BDModalClosed'}
  modalClassName={open ? 'ModalOpen' : 'ModalClosed'}
>
    <Container fluid={true} style={{ padding: '20px' }}>
        <ReactToPrint
            bodyClass="print-agreement"
            content={() => ref.current}
            trigger={() => (
              <Button variant="contained" type="button" style={{ backgroundColor: 'gray', marginLeft: '2%' }} className="">
                <Download width={15} />PDF
              </Button>
            )}
            pageStyle={`@media print {@page {size: 2000x 2000px; margin: 1cm;}`}
          />
          <div ref={ref} ><CsvGraphs data={jsonData} /></div>
    </Container>
</Modal>