From 04c5f73dedf17de77efab0b9edb9e76505c227a3 Mon Sep 17 00:00:00 2001
From: Titouan Rigoudy <titouan.rigoudy@gmail.com>
Date: Sun, 7 Nov 2021 17:46:28 +0100
Subject: [PATCH] Hide header and footer on phones.

---
 src/components/Header.tsx | 2 +-
 src/containers/Footer.tsx | 2 +-
 2 files changed, 2 insertions(+), 2 deletions(-)

diff --git a/src/components/Header.tsx b/src/components/Header.tsx
index e7d4879..60592d4 100644
--- a/src/components/Header.tsx
+++ b/src/components/Header.tsx
@@ -15,7 +15,7 @@ const Link: FC<LinkProps> = ({ to, children }) => (
 );
 
 const Header: FC = () => (
-  <header className="flex p-4 items-center">
+  <header className="hidden md:flex p-4 items-center w-full overflow-hidden">
     <h1
       className={
         "text-3xl font-bold text-yellow-800 bg-yellow-300 shadow " +
diff --git a/src/containers/Footer.tsx b/src/containers/Footer.tsx
index 9fd0f17..9ce7617 100644
--- a/src/containers/Footer.tsx
+++ b/src/containers/Footer.tsx
@@ -11,7 +11,7 @@ const Footer: FC = () => {
   const socket = useSelector(selectSocket);
 
   return (
-    <footer className="flex items-center justify-center">
+    <footer className="hidden md:flex items-center justify-center">
       <SocketStatusPane socket={socket} />
       <LoginStatusPane login={login} />
     </footer>