From 8522ef7edb5ac42e4b68c072fb0fd9e51942566b Mon Sep 17 00:00:00 2001
From: beckerinj <becker@assc.ai>
Date: Sun, 7 Aug 2022 15:20:08 -0400
Subject: [PATCH] try this

---
 frontend/src/components/home/Home.tsx         | 57 ++++++++++++++++++-
 frontend/src/components/home/home.module.scss | 12 ++++
 2 files changed, 68 insertions(+), 1 deletion(-)

diff --git a/frontend/src/components/home/Home.tsx b/frontend/src/components/home/Home.tsx
index 98cf77ed7..1c2591f39 100644
--- a/frontend/src/components/home/Home.tsx
+++ b/frontend/src/components/home/Home.tsx
@@ -1,4 +1,4 @@
-import { Component, For, Show } from "solid-js";
+import { Component, For, Match, Show, Switch } from "solid-js";
 import { useAppState } from "../../state/StateProvider";
 import { useTheme } from "../../state/ThemeProvider";
 import { useUser } from "../../state/UserProvider";
@@ -10,9 +10,11 @@ import s from "./home.module.scss";
 import AddServer from "./Tree/AddServer";
 import Summary from "./Summary/Summary";
 import Updates from "./Updates/Updates";
+import { useAppDimensions } from "../../state/DimensionProvider";
 
 const Home: Component<{}> = (p) => {
   const { servers } = useAppState();
+  const { width, isMobile } = useAppDimensions();
   const serverIDs = () => servers.loaded() && servers.ids();
   return (
     <Grid gap="0rem" class={s.Home} placeItems="start center">
@@ -40,6 +42,59 @@ const Home: Component<{}> = (p) => {
         <Updates />
       </Grid>
     </Grid>
+    // <Switch>
+    //   <Match when={width() >= 1200}>
+    //     <Grid gap="0rem" class={s.Home} placeItems="start center">
+    //       <Tabs
+    //         localStorageKey="home-tab"
+    //         containerClass={s.Tabs}
+    //         tabs={[
+    //           {
+    //             title: "deployments",
+    //             element: (
+    //               <Grid>
+    //                 <For each={serverIDs()}>{(id) => <Server id={id} />}</For>
+    //                 <AddServer />
+    //               </Grid>
+    //             ),
+    //           },
+    //           {
+    //             title: "builds",
+    //             element: <Builds />,
+    //           },
+    //         ]}
+    //       />
+    //       <Grid gap="0rem" style={{ width: "80%" }}>
+    //         <Summary />
+    //         <Updates />
+    //       </Grid>
+    //     </Grid>
+    //   </Match>
+    //   <Match when={width() < 1200}>
+    //     <Grid gap="0rem" class={s.Home} placeItems="start center">
+    //       <Summary />
+    //       <Tabs
+    //         localStorageKey="home-tab"
+    //         containerClass={s.Tabs}
+    //         tabs={[
+    //           {
+    //             title: "deployments",
+    //             element: (
+    //               <Grid>
+    //                 <For each={serverIDs()}>{(id) => <Server id={id} />}</For>
+    //                 <AddServer />
+    //               </Grid>
+    //             ),
+    //           },
+    //           {
+    //             title: "builds",
+    //             element: <Builds />,
+    //           },
+    //         ]}
+    //       />
+    //     </Grid>
+    //   </Match>
+    // </Switch>
   );
 };
 
diff --git a/frontend/src/components/home/home.module.scss b/frontend/src/components/home/home.module.scss
index 6307c6980..2100a62f7 100644
--- a/frontend/src/components/home/home.module.scss
+++ b/frontend/src/components/home/home.module.scss
@@ -6,6 +6,12 @@
   padding-top: 1rem;
 }
 
+@media only screen and (max-width: 1200px) {
+  .Home {
+    grid-template-columns: 1fr;
+  }
+}
+
 .Tabs {
   padding: 1rem;
   width: 80%;
@@ -74,6 +80,12 @@
   margin: 1rem;
 }
 
+@media only screen and (max-width: 1200px) {
+  .Summary {
+    width: 80%;
+  }
+}
+
 .Updates {
   padding: 1rem;
   margin: 1rem;