feat(2141): explorer footer should be at the bottom of the page (#2143)

* feat(2141): Explorer footer should be at the bottom of the page

apps/explorer/src/app/app.tsx

@@ -1,3 +1,4 @@
+import classnames from 'classnames';
 import { useState, useEffect } from 'react';
 import * as Sentry from '@sentry/react';
 import { BrowserTracing } from '@sentry/tracing';
@@ -44,16 +45,22 @@ function App() {
     },
   };
 
+  const layoutClasses = classnames(
+    'grid grid-rows-[auto_1fr_auto] grid-cols-[1fr] md:grid-rows-[auto_minmax(700px,_1fr)_auto] md:grid-cols-[300px_1fr]',
+    'min-h-[100vh] mx-auto my-0',
+    'border-neutral-700 dark:border-neutral-300 lg:border-l lg:border-r',
+    'bg-white dark:bg-black',
+    'antialiased text-black dark:text-white',
+    {
+      'h-[100vh] min-h-auto overflow-hidden': menuOpen,
+    }
+  );
+
   return (
     <ThemeContext.Provider value={theme}>
       <TendermintWebsocketProvider>
         <NetworkLoader cache={cacheConfig}>
-          <div
-            className={`${
-              menuOpen && 'h-[100vh] overflow-hidden'
-            } antialiased m-0 bg-white dark:bg-black text-black dark:text-white`}
-          >
-            <div className="grid grid-rows-[repeat(2,_auto)_1fr] grid-cols-[1fr] md:grid-rows-[auto_minmax(700px,_1fr)] md:grid-cols-[300px_1fr] border-neutral-700 dark:border-neutral-300 lg:border-l lg:border-r mx-auto">
+          <div className={layoutClasses}>
             <Header
               theme={theme}
               toggleTheme={toggleTheme}
@@ -66,7 +73,6 @@ function App() {
               <NetworkInfo />
             </footer>
           </div>
-          </div>
         </NetworkLoader>
       </TendermintWebsocketProvider>
     </ThemeContext.Provider>

apps/explorer/src/app/components/main/index.tsx

@@ -2,7 +2,7 @@ import { AppRouter } from '../../routes';
 
 export const Main = () => {
   return (
-    <main className="p-4 overflow-hidden">
+    <main className="p-4 overflow-scroll">
       <AppRouter />
     </main>
   );