add 100vw 100vh background to menu for close on click outside

frontend/src/components/builds/tabs/build-config/Docker.tsx

@@ -32,7 +32,7 @@ const Docker: Component<{}> = (p) => {
           }
         />
       </Flex>
-      <Show when={dockerAccounts()}>
+      <Show when={dockerAccounts() && dockerAccounts()!.length > 0}>
         <Flex justifyContent="space-between" alignItems="center">
           <div>account</div>
           <Selector

frontend/src/components/builds/tabs/git-config/Git.tsx

@@ -30,7 +30,7 @@ const Git: Component<{}> = (p) => {
           onEdit={(value) => setBuild("branch", value)}
         />
       </Flex>
-      <Show when={githubAccounts()}>
+      <Show when={githubAccounts() && githubAccounts()!.length > 0}>
         <Flex justifyContent="space-between" alignItems="center">
           <div>github account</div>
           <Selector

frontend/src/components/create/Build.tsx

@@ -52,7 +52,6 @@ const Content: Component<{ close: () => void }> = (p) => {
           onEdit={setName}
           placeholder="name"
           style={{ "font-size": "1.5rem" }}
-          onConfirm={create}
         />
         <button class="green" style={{ width: "100%" }} onClick={create}>
           create

frontend/src/components/create/Deployment.tsx

@@ -55,7 +55,6 @@ const Content: Component<{ serverID: string; close: () => void }> = (p) => {
           onEdit={setName}
           placeholder="name"
           style={{ "font-size": "1.5rem" }}
-          onConfirm={create}
         />
         <button class="green" style={{ width: "100%" }} onClick={create}>
           create

frontend/src/components/deployment/tabs/config/DockerAccount.tsx

@@ -10,7 +10,7 @@ const DockerAccount: Component<{}> = (p) => {
 	const { dockerAccounts } = useAppState();
   const { deployment, setDeployment } = useConfig();
   return (
-    <Show when={dockerAccounts}>
+    <Show when={dockerAccounts() && dockerAccounts()!.length > 0}>
       <Flex
         class={combineClasses(s.ConfigItem, "shadow")}
         justifyContent="space-between"

frontend/src/components/topbar/Topbar.tsx

@@ -27,11 +27,11 @@ const Topbar: Component = () => {
         </button>
         <div class={s.Monitor}>monitor</div>
       </Flex>
-
       {/* left side */}
       <Flex gap="0.5rem" alignItems="center" style={{ padding: "0rem 0.5rem" }}>
         <Menu
           show={menu() === "updates"}
+          close={() => setMenu(undefined)}
           target={
             <button
               onClick={() =>
@@ -46,6 +46,7 @@ const Topbar: Component = () => {
         />
         <Menu
           show={menu() === "account"}
+          close={() => setMenu(undefined)}
           target={
             <button
               onClick={() =>

frontend/src/components/util/menu/Menu.module.css

@@ -4,6 +4,14 @@
   width: fit-content;
 }
 
+.MenuBackground {
+  position: fixed;
+  top: 0;
+  left: 0;
+  width: 100vw;
+  height: 100vh;
+}
+
 .Menu {
   white-space: nowrap;
   padding: 0.5rem 1rem;

frontend/src/components/util/menu/Menu.tsx

@@ -14,6 +14,7 @@ const Menu: Component<{
   content: JSXElement;
   target: JSXElement;
   show: boolean;
+  close: () => void;
   position?: Position;
   padding?: string | number;
   style?: JSX.CSSProperties;
@@ -32,6 +33,7 @@ const Menu: Component<{
     <div class={s.MenuContainer}>
       {p.target}
       <Show when={buffer()}>
+        <div class={s.MenuBackground} onClick={p.close} />
         <div
           class={combineClasses(
             s.Menu,
@@ -40,6 +42,7 @@ const Menu: Component<{
             p.show ? s.Enter : s.Exit
           )}
           style={{ padding: p.padding, ...p.style }}
+          onClick={(e) => e.stopPropagation()}
         >
           {p.content}
         </div>

frontend/src/components/util/menu/Selector.tsx

@@ -16,6 +16,7 @@ const Selector: Component<{
   return (
     <Menu
       show={show()}
+      close={toggle}
       target={
         <button class={p.targetClass} onClick={toggle}>
           {p.selected}