improve updates home, add server, add group

frontend/src/components/ServerChildren/serverchildren.module.scss

@@ -11,4 +11,8 @@
 	width: 100%;
 	justify-content: space-between;
 	transition: background-color 500ms ease;
+}
+
+.DropdownItem:hover {
+	background-color: rgba(c.$lightblue, 0.5);
 }

frontend/src/components/home/Tree/AddServer.tsx

@@ -13,10 +13,9 @@ const AddServer: Component<{}> = () => {
     <CenterMenu
       show={show}
       toggleShow={toggleShow}
-      title="add server"
       target="add server"
+      title="add server"
       targetClass="green shadow"
-      targetStyle={{ width: "100%" }}
       content={() => <Content close={toggleShow} />}
       position="center"
     />

frontend/src/components/home/Tree/Groups.tsx

@@ -37,14 +37,16 @@ const Groups: Component<{}> = (p) => {
   });
   return (
     <Grid style={{ height: "fit-content" }}>
-      <Input
-        placeholder="filter groups"
-        value={groupFilter()}
-        onEdit={setGroupFilter}
-        style={{ width: "100%", padding: "0.5rem" }}
-      />
+      <Grid gridTemplateColumns="1fr auto">
+        <Input
+          placeholder="filter groups"
+          value={groupFilter()}
+          onEdit={setGroupFilter}
+          style={{ width: "100%", padding: "0.5rem" }}
+        />
+        <NewGroup />
+      </Grid>
       <For each={groupIDs()}>{(id) => <Group id={id} />}</For>
-      <NewGroup />
     </Grid>
   );
 };

frontend/src/components/home/Tree/Servers.tsx

@@ -2,6 +2,7 @@ import { Component, createMemo, createSignal, For, Show } from "solid-js";
 import { useAppState } from "../../../state/StateProvider";
 import { useUser } from "../../../state/UserProvider";
 import Input from "../../shared/Input";
+import Flex from "../../shared/layout/Flex";
 import Grid from "../../shared/layout/Grid";
 import AddServer from "./AddServer";
 import Server from "./Server";
@@ -31,18 +32,20 @@ const Servers: Component<{ serverIDs: string[]; showAdd?: boolean }> = (p) => {
   });
   return (
     <Grid style={{ height: "fit-content" }}>
-      <Input
-        placeholder="filter servers"
-        value={serverFilter()}
-        onEdit={setServerFilter}
-        style={{ width: "100%", padding: "0.5rem" }}
-      />
+      <Grid gridTemplateColumns="1fr auto">
+        <Input
+          placeholder="filter servers"
+          value={serverFilter()}
+          onEdit={setServerFilter}
+          style={{ width: "100%", padding: "0.5rem" }}
+        />
+        <Show
+          when={p.showAdd && (user().admin || user().create_server_permissions)}
+        >
+          <AddServer />
+        </Show>
+      </Grid>
       <For each={serverIDs()}>{(id) => <Server id={id} />}</For>
-      <Show
-        when={p.showAdd && (user().admin || user().create_server_permissions)}
-      >
-        <AddServer />
-      </Show>
     </Grid>
   );
 };

frontend/src/components/home/Updates/Updates.tsx

@@ -18,7 +18,7 @@ const Updates: Component<{}> = () => {
           </Flex>
         }
       >
-        <Grid class="updates-container scroller">
+        <Grid class="updates-container-small scroller">
           <For each={updates.collection()!}>
             {(update) => <Update update={update} />}
           </For>

frontend/src/components/home/Updates/update.module.scss

@@ -14,7 +14,7 @@
 .Update {
 	background-color: c.$lightgrey;
 	padding: 0.75rem;
-	height: 70px;
+	height: 40px;
 	transform-origin: top;
 	animation-name: Enter;
 	animation-duration: 750ms;

frontend/src/style/app.scss

@@ -111,6 +111,10 @@ $anim-time: 500ms;
 	max-height: calc(225px + 5.5rem);
 }
 
+.updates-container-small {
+	max-height: calc(135px + 5.5rem);
+}
+
 .show-updates-indicator {
 	font-size: 0.8rem;
 	position: absolute;