From cd4a42d29562d976e35ac6dac5f25dd86976e909 Mon Sep 17 00:00:00 2001
From: Josue <josue.quilon-barrios@senecacollege.ca>
Date: Thu, 29 Apr 2021 15:47:40 -0400
Subject: [PATCH] refactor: improve responsive capabilities

---
 striker-ui/pages/index.tsx | 30 +++++++++++++++++++++++-------
 1 file changed, 23 insertions(+), 7 deletions(-)

diff --git a/striker-ui/pages/index.tsx b/striker-ui/pages/index.tsx
index a83f70a2..172ad780 100644
--- a/striker-ui/pages/index.tsx
+++ b/striker-ui/pages/index.tsx
@@ -12,14 +12,35 @@ import Servers from '../components/Servers';
 import Header from '../components/Header';
 import AnvilProvider from '../components/AnvilContext';
 
-const useStyles = makeStyles(() => ({
+const useStyles = makeStyles((theme) => ({
   child: {
     width: '22%',
     height: '100%',
+    [theme.breakpoints.down('lg')]: {
+      width: '25%',
+    },
+    [theme.breakpoints.down('md')]: {
+      width: '100%',
+    },
   },
   server: {
     width: '35%',
     height: '100%',
+    [theme.breakpoints.down('lg')]: {
+      width: '25%',
+    },
+    [theme.breakpoints.down('md')]: {
+      width: '100%',
+    },
+  },
+  container: {
+    display: 'flex',
+    flexDirection: 'row',
+    width: '100%',
+    justifyContent: 'space-between',
+    [theme.breakpoints.down('md')]: {
+      display: 'block',
+    },
   },
 }));
 
@@ -36,12 +57,7 @@ const Home = (): JSX.Element => {
       <AnvilProvider>
         <Header />
         {data?.anvils && (
-          <Box
-            display="flex"
-            flexDirection="row"
-            width="100%"
-            justifyContent="space-between"
-          >
+          <Box className={classes.container}>
             <Box p={1} className={classes.child}>
               <Anvils list={data} />
               <Nodes anvil={data.anvils} />