From 6752a539aadef88ade45bc4dcf0bc7b9687c848d Mon Sep 17 00:00:00 2001
From: mbecker20 <becker.maxh@gmail.com>
Date: Wed, 27 Apr 2022 03:42:38 -0400
Subject: [PATCH] fix add server menu (make tabs move with left css prop

---
 frontend/src/components/sidebar/AddServer.tsx | 42 ++++++++-----------
 frontend/src/components/util/tabs/Tabs.tsx    |  6 +--
 2 files changed, 21 insertions(+), 27 deletions(-)

diff --git a/frontend/src/components/sidebar/AddServer.tsx b/frontend/src/components/sidebar/AddServer.tsx
index aecfc5e0f..0396ac594 100644
--- a/frontend/src/components/sidebar/AddServer.tsx
+++ b/frontend/src/components/sidebar/AddServer.tsx
@@ -4,7 +4,6 @@ import { createStore } from "solid-js/store";
 import { pushNotification } from "../..";
 import { ADD_SERVER } from "@monitor/util";
 import { useAppState } from "../../state/StateProvider";
-import { combineClasses } from "../../util/helpers";
 import { useToggle } from "../../util/hooks";
 import Input from "../util/Input";
 import Grid from "../util/layout/Grid";
@@ -50,29 +49,24 @@ const Content: Component<{ close: () => void }> = (p) => {
 		}
   };
   return (
-    <>
-      <Grid
-        placeItems="center"
-        style={{ padding: "2rem 1rem 1rem 1rem" }}
-      >
-        <Input
-          ref={nameInput}
-          value={server.name}
-          onEdit={(name) => setServer("name", name)}
-          placeholder="name"
-          style={{ "font-size": "1.5rem" }}
-        />
-        <Input
-          value={server.address}
-          onEdit={(address) => setServer("address", address)}
-          placeholder="address"
-          style={{ "font-size": "1.5rem" }}
-        />
-        <button class="green" style={{ width: "100%" }} onClick={create}>
-          add
-        </button>
-      </Grid>
-    </>
+    <Grid placeItems="center" style={{ padding: "2rem 1rem 1rem 1rem" }}>
+      <Input
+        ref={nameInput}
+        value={server.name}
+        onEdit={(name) => setServer("name", name)}
+        placeholder="name"
+        style={{ "font-size": "1.5rem" }}
+      />
+      <Input
+        value={server.address}
+        onEdit={(address) => setServer("address", address)}
+        placeholder="address"
+        style={{ "font-size": "1.5rem" }}
+      />
+      <button class="green" style={{ width: "100%" }} onClick={create}>
+        add
+      </button>
+    </Grid>
   );
 };
 
diff --git a/frontend/src/components/util/tabs/Tabs.tsx b/frontend/src/components/util/tabs/Tabs.tsx
index 63f9f36a4..6b1f710a6 100644
--- a/frontend/src/components/util/tabs/Tabs.tsx
+++ b/frontend/src/components/util/tabs/Tabs.tsx
@@ -13,7 +13,6 @@ import { combineClasses } from "../../../util/helpers";
 import { LocalStorageSetter, useLocalStorage } from "../../../util/hooks";
 import Button from "../Button";
 import Flex from "../layout/Flex";
-import Grid from "../layout/Grid";
 import s from "./tabs.module.scss";
 
 export type Tab = {
@@ -86,9 +85,10 @@ export const ControlledTabs: Component<{
         <Flex
           gap="0rem"
           style={{
+            position: "relative",
             width: `${tabs().length * 100}%`,
-            transform: `translateX(-${(current() / tabs().length) * 100}%)`,
-            transition: "transform 350ms ease",
+            left: `-${current() * 100}%`,
+            transition: "left 350ms ease",
           }}
         >
           <For each={tabs()}>