Support for zooming in and out for PrintPreview component

[rithviknishad]

Is your feature request related to a problem? Please describe.
Currently the PrintPreview component does not support zooming in and out.

Also, it is not mobile friendly as the print preview in mobile feels large as it maintains a minimum width as per the print for ~A4 sizes while ensuring the text / other contents are sized correctly.

Describe the solution you'd like

• Add support for zoom in/out for PrintPreview component by scaling the div of id=section-to-print element as per the zoom value.

• Default the zoom value to normal in desktop view, however, default it to a smaller value (as fitting) for mobile view.

You can use useBreakpoint hook to achieve that.

Refer how zoom is implemented in another similar place: https://github.com/coronasafe/care_fe/blob/develop/src/Components/Common/FilePreviewDialog.tsx#L10-L19

Example usage of Print Preview can be observed here: https://care.ohc.network/facility/0c95c7f0-e1d2-4aff-83fa-933cef60d3a8/patient/7e8fc20f-02da-47f7-8c33-f2d8c7e52dd8/consultation/edfe0bd6-0f50-4a4c-8cd0-2d4ad0e9cea1/prescriptions/print

[ayushpatil2122]

I want to work on this issue

[ayushpatil2122]

@rithviknishad

is this ok for mobile view

[rithviknishad]

@ayushpatil2122 Do not make the contents of the preview responsive based on screen size. This will lead to mismatch between the print output and preview. Instead just default the zoom scale level to a smaller value.

[rithviknishad]

@ayushpatil2122 Unassigning due to inactivity