fix server children add new button

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}>

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)}

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>