From 6eccbd5373fa4a3e8001ed5967b993cd287f7f0f Mon Sep 17 00:00:00 2001
From: Amruth Pillai <im.amruth@gmail.com>
Date: Fri, 27 Mar 2020 20:36:16 +0530
Subject: [PATCH] fixing page breaks in the print hTML

---
 src/components/App/App.js        | 2 +-
 src/index.css                    | 8 +++++---
 src/templates/pikachu/Pikachu.js | 6 +++++-
 3 files changed, 11 insertions(+), 5 deletions(-)

diff --git a/src/components/App/App.js b/src/components/App/App.js
index ceea9cdd..cd4e5e15 100644
--- a/src/components/App/App.js
+++ b/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()}
diff --git a/src/index.css b/src/index.css
index 7d762746..20ff01ce 100644
--- a/src/index.css
+++ b/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;
diff --git a/src/templates/pikachu/Pikachu.js b/src/templates/pikachu/Pikachu.js
index 5739ede5..659a2720 100644
--- a/src/templates/pikachu/Pikachu.js
+++ b/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>
     );