improved footer

components/footer.js

@@ -1,5 +1,6 @@
 import { useQuery } from '@apollo/client'
 import gql from 'graphql-tag'
+import { Container } from 'react-bootstrap'
 import { CopyInput } from './form'
 
 export default function Footer () {
@@ -13,19 +14,21 @@ export default function Footer () {
 
   return (
     <footer>
-      {data
-        ? (
-          <div className='d-flex align-items-center text-small my-3'>
+      {data &&
+        <Container>
+          <div
+            className='d-flex align-items-center text-small my-3 mx-auto w-100'
+            style={{ maxWidth: '500px' }}
+          >
             <span className='nav-item text-muted mr-2'>connect:</span>
             <CopyInput
               size='sm'
-              groupClassName='mb-0'
+              groupClassName='mb-0 w-100'
               readOnly
               placeholder={data.connectAddress}
             />
           </div>
-          )
-        : 'loading'}
+        </Container>}
     </footer>
   )
 }