From a6109754b419d4160ef6ec890ea74835dbc6b039 Mon Sep 17 00:00:00 2001
From: Willian Mitsuda <wmitsuda@gmail.com>
Date: Fri, 22 Oct 2021 09:29:54 -0300
Subject: [PATCH 1/2] Fix home screen flickering

---
 src/Home.tsx | 15 ++++++++++-----
 src/Logo.tsx |  2 +-
 2 files changed, 11 insertions(+), 6 deletions(-)

diff --git a/src/Home.tsx b/src/Home.tsx
index 04824ce..dc79748 100644
--- a/src/Home.tsx
+++ b/src/Home.tsx
@@ -38,9 +38,11 @@ const Home: React.FC = () => {
   document.title = "Home | Otterscan";
 
   return (
-    <div className="m-auto">
+    <div className="mx-auto flex flex-col h-full">
       {isScanning && <CameraScanner turnOffScan={() => setScanning(false)} />}
-      <Logo />
+      <div className="m-5 mb-10 flex items-end flex-grow max-h-72">
+        <Logo />
+      </div>
       <form
         className="flex flex-col"
         onSubmit={handleSubmit}
@@ -71,7 +73,9 @@ const Home: React.FC = () => {
         >
           Search
         </button>
-        <div className="mx-auto mt-5 mb-5 text-lg text-link-blue hover:text-link-blue-hover font-bold">
+      </form>
+      <div className="mx-auto h-32">
+        <div className="text-lg text-link-blue hover:text-link-blue-hover font-bold">
           <NavLink to="/special/london">
             <div className="flex space-x-2 items-baseline text-orange-500 hover:text-orange-700 hover:underline">
               <span>
@@ -86,14 +90,15 @@ const Home: React.FC = () => {
         </div>
         {latestBlock && (
           <NavLink
-            className="mx-auto flex flex-col items-center space-y-1 mt-5 text-sm text-gray-500 hover:text-link-blue"
+            className="flex flex-col items-center space-y-1 mt-5 text-sm text-gray-500 hover:text-link-blue"
             to={blockURL(latestBlock.number)}
           >
             <div>Latest block: {commify(latestBlock.number)}</div>
             <Timestamp value={latestBlock.timestamp} />
           </NavLink>
         )}
-      </form>
+      </div>
+      <div className="flex-grow pb-5"></div>
     </div>
   );
 };
diff --git a/src/Logo.tsx b/src/Logo.tsx
index eb31768..3671e42 100644
--- a/src/Logo.tsx
+++ b/src/Logo.tsx
@@ -2,7 +2,7 @@ import React from "react";
 import Otter from "./otter.jpg";
 
 const Logo: React.FC = () => (
-  <div className="mx-auto mb-16 text-6xl text-link-blue font-title font-bold cursor-default flex items-center space-x-4">
+  <div className="mx-auto text-6xl text-link-blue font-title font-bold cursor-default flex items-center space-x-4">
     <img
       className="rounded-full"
       src={Otter}

From f62f41759f4a2bcb49e7c8c4737ee8170d1d4154 Mon Sep 17 00:00:00 2001
From: Willian Mitsuda <wmitsuda@gmail.com>
Date: Fri, 22 Oct 2021 15:08:46 -0300
Subject: [PATCH 2/2] Fix missing bottom padding grow

---
 src/App.tsx           | 28 +++++++++++++---------------
 src/StandardFrame.tsx |  2 +-
 2 files changed, 14 insertions(+), 16 deletions(-)

diff --git a/src/App.tsx b/src/App.tsx
index e11a960..9c7c1fe 100644
--- a/src/App.tsx
+++ b/src/App.tsx
@@ -53,21 +53,19 @@ const App = () => {
                 </Route>
                 <Route>
                   <AppConfigContext.Provider value={appConfig}>
-                    <div className="mb-auto">
-                      <Title />
-                      <Route path="/block/:blockNumberOrHash" exact>
-                        <Block />
-                      </Route>
-                      <Route path="/block/:blockNumber/txs" exact>
-                        <BlockTransactions />
-                      </Route>
-                      <Route path="/tx/:txhash">
-                        <Transaction />
-                      </Route>
-                      <Route path="/address/:addressOrName/:direction?">
-                        <AddressTransactions />
-                      </Route>
-                    </div>
+                    <Title />
+                    <Route path="/block/:blockNumberOrHash" exact>
+                      <Block />
+                    </Route>
+                    <Route path="/block/:blockNumber/txs" exact>
+                      <BlockTransactions />
+                    </Route>
+                    <Route path="/tx/:txhash">
+                      <Transaction />
+                    </Route>
+                    <Route path="/address/:addressOrName/:direction?">
+                      <AddressTransactions />
+                    </Route>
                   </AppConfigContext.Provider>
                 </Route>
               </Switch>
diff --git a/src/StandardFrame.tsx b/src/StandardFrame.tsx
index 65fc076..10b5fe8 100644
--- a/src/StandardFrame.tsx
+++ b/src/StandardFrame.tsx
@@ -1,7 +1,7 @@
 import React from "react";
 
 const StandardFrame: React.FC = ({ children }) => (
-  <div className="bg-gray-100 px-9 pt-3 pb-12">{children}</div>
+  <div className="flex-grow bg-gray-100 px-9 pt-3 pb-12">{children}</div>
 );
 
 export default StandardFrame;