fix: keep footer element at the bottom of the page (#26909)

* format: prettier

* fix: keep footer at the bottom of the page

* fix: use calc to compute proper height

docs/interacting-with-geth/rpc/ns-debug.md

@@ -194,7 +194,7 @@ Returns a list of the last 'bad blocks' that the client has seen on the network
 Retrieves and returns the RLP encoded block by number.
 
 | Client  | Method invocation                                            |
-| :------ | ----------------------------------------------------- |
+| :------ | ------------------------------------------------------------ |
 | Go      | `debug.getRawBlock(blockNrOrHash) (string, error)`           |
 | Console | `debug.getBlockRlp(blockNrOrHash)`                           |
 | RPC     | `{"method": "debug_getRawBlock", "params": [blockNrOrHash]}` |
@@ -206,7 +206,7 @@ References: [RLP](https://ethereum.org/en/developers/docs/data-structures-and-en
 Returns an RLP-encoded header.
 
 | Client  | Method invocation                                             |
-| :------ | --------------------------------------------------- |
+| :------ | ------------------------------------------------------------- |
 | Console | `debug.getRawHeader(blockNrOrHash)`                           |
 | RPC     | `{"method": "debug_getRawHeader", "params": [blockNrOrHash]}` |
 
@@ -215,7 +215,7 @@ Returns an RLP-encoded header.
 Returns the bytes of the transaction.
 
 | Client  | Method invocation                                                    |
-| :------ | --------------------------------------------------- |
+| :------ | -------------------------------------------------------------------- |
 | Console | `debug.getRawTransaction(blockNrOrHash)`                             |
 | RPC     | `{"method": "debug_getRawTransaction", "params": [transactionHash]}` |
 

src/components/layouts/Layout.tsx

@@ -1,5 +1,5 @@
 // Libraries
-import { Container } from '@chakra-ui/react';
+import { Container, Flex, Stack } from '@chakra-ui/react';
 import { FC } from 'react';
 
 // Components
@@ -13,11 +13,16 @@ interface Props {
 export const Layout: FC<Props> = ({ children }) => {
   return (
     <Container maxW={{ base: 'full', md: 'container.2xl' }} my={{ base: 4, md: 7 }}>
+      {/* adding min-height & top margin to keep footer at the bottom of the page */}
+      <Flex direction='column' minH='calc(100vh - 3.5rem)'>
         <Header />
 
         {children}
 
+        <Stack mt='auto'>
           <Footer />
+        </Stack>
+      </Flex>
     </Container>
   );
 };

src/theme/search.css

@@ -27,7 +27,8 @@
   justify-content: space-between;
 }
 
-.DocSearch-Button-Placeholder, .DocSearch-Button-Keys {
+.DocSearch-Button-Placeholder,
+.DocSearch-Button-Keys {
   display: flex;
 }
 
@@ -174,7 +175,8 @@ svg[aria-label='Algolia'] * {
     color: var(--chakra-colors-bg);
   }
 
-  .DocSearch-Button-Placeholder, .DocSearch-Button-Keys {
+  .DocSearch-Button-Placeholder,
+  .DocSearch-Button-Keys {
     display: none;
   }