Merge branch 'feature/fix-home-flickering' into develop

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>

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>
   );
 };

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}

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;