From 564890a93eebe577584d65b5e878f6a5975d35f7 Mon Sep 17 00:00:00 2001
From: Sacha Weatherstone <sachaw100@hotmail.com>
Date: Fri, 24 Dec 2021 21:41:56 +1100
Subject: [PATCH] Add mobile layout change

---
 src/pages/showcase/_components/Network.tsx | 23 +++++++++++-----------
 1 file changed, 12 insertions(+), 11 deletions(-)

diff --git a/src/pages/showcase/_components/Network.tsx b/src/pages/showcase/_components/Network.tsx
index d40f8013..dd062ae5 100644
--- a/src/pages/showcase/_components/Network.tsx
+++ b/src/pages/showcase/_components/Network.tsx
@@ -25,14 +25,8 @@ export const Network = ({ id }: NetworkProps): JSX.Element => {
     fetcher
   ).data;
 
-  return true ? (
-    <PlaceholderNetwork />
-  ) : (
+  return (
     <div>
-      <a className="button button--outline button--secondary" href="/showcase">
-        Back
-      </a>
-
       {data && !error ? (
         <div className="container">
           <h1>{data.title}</h1>
@@ -127,7 +121,7 @@ export const Network = ({ id }: NetworkProps): JSX.Element => {
               <JSONPretty data={error} />
             </div>
           )}
-          {!data && <div>Loading...</div>}
+          {!data && <PlaceholderNetwork />}
         </div>
       )}
     </div>
@@ -136,10 +130,17 @@ export const Network = ({ id }: NetworkProps): JSX.Element => {
 
 export const PlaceholderNetwork = (): JSX.Element => {
   return (
-    <div className="container" style={{ display: "flex", gap: "2rem" }}>
+    <div
+      className="container"
+      style={{
+        display: "flex",
+        flexDirection: window.innerWidth > 768 ? "row" : "column",
+        gap: "2rem",
+      }}
+    >
       <div
         style={{
-          width: "60%",
+          width: window.innerWidth > 768 ? "60%" : "100%",
         }}
       >
         <div
@@ -208,7 +209,7 @@ export const PlaceholderNetwork = (): JSX.Element => {
       </div>
       <div
         style={{
-          width: "40%",
+          width: window.innerWidth > 768 ? "40%" : "100%",
         }}
       >
         <div