fixing page breaks in the print hTML

src/components/App/App.js

@@ -40,7 +40,7 @@ const App = () => {
       <div className="z-0 h-screen col-span-3 flex justify-center items-center overflow-scroll">
         <div
           id="page"
-          className="animated fadeIn p-10 my-auto shadow-2xl"
+          className="animated fadeIn my-auto shadow-2xl"
           style={{ animationDelay: '500ms' }}
         >
           {renderTemplate()}

src/index.css

@@ -67,6 +67,7 @@ li {
     width: 21cm;
     height: 29.7cm;
     zoom: 0.8;
+    padding: 2.5em;
     overflow: scroll;
     background-color: white;
   }
@@ -74,7 +75,7 @@ li {
 
 @page {
   size: A4;
-  margin: 0;
+  margin: 2.5em;
 }
 
 @media print {
@@ -82,19 +83,20 @@ li {
   body,
   body * {
     -webkit-print-color-adjust: exact;
+    color-adjust: exact;
     visibility: hidden;
   }
 
   #page,
   #page * {
+    page-break-inside: avoid;
     visibility: visible;
   }
 
   #page {
     background-color: white;
-    width: 21cm;
-    height: 29.7cm;
     margin: 0;
+    padding: 0;
     box-shadow: none;
     position: absolute;
     left: 0;

src/templates/pikachu/Pikachu.js

@@ -11,7 +11,11 @@ const Pikachu = () => {
   const Photo = () =>
     data.profile.photo !== '' && (
       <div className="self-center col-span-4">
-        <img className="h-48 rounded-full mx-auto object-cover" src={data.profile.photo} alt="" />
+        <img
+          className="w-48 h-48 rounded-full mx-auto object-cover"
+          src={data.profile.photo}
+          alt=""
+        />
       </div>
     );