From cc5210a3d87f7402c797a5606ea926c5f3da9dff Mon Sep 17 00:00:00 2001
From: mbecker20 <becker.maxh@gmail.com>
Date: Tue, 18 Apr 2023 06:17:42 +0000
Subject: [PATCH] fix server children add new button

---
 frontend/src/components/New.tsx               | 26 ++++++++++++++-----
 frontend/src/components/home/Tree/Groups.tsx  |  6 ++++-
 .../server_children/ServerChildren.tsx        |  5 +++-
 3 files changed, 28 insertions(+), 9 deletions(-)

diff --git a/frontend/src/components/New.tsx b/frontend/src/components/New.tsx
index 7dd4f5f1f..22b4a08fd 100644
--- a/frontend/src/components/New.tsx
+++ b/frontend/src/components/New.tsx
@@ -14,7 +14,11 @@ export const NewGroup: Component<{}> = (p) => {
     <Show
       when={showNew()}
       fallback={
-        <button class="green" onClick={toggleShowNew} style={{ height: "100%" }}>
+        <button
+          class="green"
+          onClick={toggleShowNew}
+          style={{ height: "100%" }}
+        >
           <Icon type="plus" />
         </button>
       }
@@ -33,8 +37,12 @@ export const NewDeployment: Component<{ serverID: string }> = (p) => {
     <Show
       when={showNew()}
       fallback={
-        <button class="green" onClick={toggleShowNew} style={{ width: "100%" }}>
-          <Icon type="plus" />
+        <button
+          class="green"
+          onClick={toggleShowNew}
+          style={{ width: "100%", height: "fit-content" }}
+        >
+          <Icon type="plus" width="1.2rem" />
         </button>
       }
     >
@@ -56,8 +64,12 @@ export const NewBuild: Component<{}> = (p) => {
     <Show
       when={showNew()}
       fallback={
-        <button class="green" onClick={toggleShowNew} style={{ width: "100%" }}>
-          <Icon type="plus" />
+        <button
+          class="green"
+          onClick={toggleShowNew}
+          style={{ width: "100%", height: "fit-content" }}
+        >
+          <Icon type="plus" width="1.2rem" />
         </button>
       }
     >
@@ -87,14 +99,14 @@ const New: Component<{
     }
   };
   return (
-    <Flex justifyContent="space-between">
+    <Flex justifyContent="space-between" style={{ height: "fit-content", width: "100%" }}>
       <Input
         ref={inputRef}
         placeholder={p.placeholder}
         value={name()}
         onEdit={setName}
         onEnter={create}
-        style={{ width: "20rem" }}
+        style={{ width: "100%", "min-width": "20rem" }}
       />
       <Flex gap="0.4rem">
         <button class="green" onClick={create}>
diff --git a/frontend/src/components/home/Tree/Groups.tsx b/frontend/src/components/home/Tree/Groups.tsx
index 2940071fc..ed2da6d02 100644
--- a/frontend/src/components/home/Tree/Groups.tsx
+++ b/frontend/src/components/home/Tree/Groups.tsx
@@ -74,7 +74,11 @@ const Groups: Component<{}> = (p) => {
         />
         <Flex alignItems="center" style={{ width: "fit-content" }}>
           <Selector
-            label={<div class="dimmed">sort by:</div>}
+            label={
+              <div class="dimmed" style={{ "white-space": "nowrap" }}>
+                sort by:
+              </div>
+            }
             selected={sort()}
             items={TREE_SORTS as any as string[]}
             onSelect={(mode) => setSort(mode as TreeSortType)}
diff --git a/frontend/src/components/server_children/ServerChildren.tsx b/frontend/src/components/server_children/ServerChildren.tsx
index 1850c74cb..96f44c31b 100644
--- a/frontend/src/components/server_children/ServerChildren.tsx
+++ b/frontend/src/components/server_children/ServerChildren.tsx
@@ -7,6 +7,7 @@ import { PermissionLevel } from "../../types";
 import { NewDeployment } from "../New";
 import Deployment from "./Deployment";
 import { useAppState } from "../../state/StateProvider";
+import Flex from "../shared/layout/Flex";
 
 const ServerChildren: Component<{ id: string }> = (p) => {
   const { user } = useUser();
@@ -35,7 +36,9 @@ const ServerChildren: Component<{ id: string }> = (p) => {
               PermissionLevel.Update
           }
         >
-          <NewDeployment serverID={p.id} />
+          <Flex class="full-width" alignItems="center">
+            <NewDeployment serverID={p.id} />
+          </Flex>
         </Show>
       </Grid>
     </div>