diff --git a/frontend/src/components/builds/tabs/build-config/CliBuild.tsx b/frontend/src/components/builds/tabs/build-config/CliBuild.tsx
index 40872b64f..8fd9d0e45 100644
--- a/frontend/src/components/builds/tabs/build-config/CliBuild.tsx
+++ b/frontend/src/components/builds/tabs/build-config/CliBuild.tsx
@@ -13,6 +13,7 @@ const CliBuild: Component<{}> = (p) => {
       <Flex
         justifyContent={userCanUpdate() ? "space-between" : undefined}
         alignItems="center"
+        style={{ "flex-wrap": "wrap" }}
       >
         <h2>build path: </h2>
         <Input
@@ -25,6 +26,7 @@ const CliBuild: Component<{}> = (p) => {
       <Flex
         justifyContent={userCanUpdate() ? "space-between" : undefined}
         alignItems="center"
+        style={{ "flex-wrap": "wrap" }}
       >
         <h2>command: </h2>
         <Input
diff --git a/frontend/src/components/builds/tabs/build-config/Docker.tsx b/frontend/src/components/builds/tabs/build-config/Docker.tsx
index 86ef95ecd..d9b2dda37 100644
--- a/frontend/src/components/builds/tabs/build-config/Docker.tsx
+++ b/frontend/src/components/builds/tabs/build-config/Docker.tsx
@@ -17,6 +17,7 @@ const Docker: Component<{}> = (p) => {
       <Flex
         justifyContent={userCanUpdate() ? "space-between" : undefined}
         alignItems="center"
+        style={{ "flex-wrap": "wrap" }}
       >
         <h2>build path: </h2>
         <Input
@@ -29,6 +30,7 @@ const Docker: Component<{}> = (p) => {
       <Flex
         justifyContent={userCanUpdate() ? "space-between" : undefined}
         alignItems="center"
+        style={{ "flex-wrap": "wrap" }}
       >
         <h2>dockerfile path: </h2>
         <Input
@@ -47,8 +49,9 @@ const Docker: Component<{}> = (p) => {
         <Flex
           justifyContent={userCanUpdate() ? "space-between" : undefined}
           alignItems="center"
+          style={{ "flex-wrap": "wrap" }}
         >
-          <h2>account: </h2>
+          <h2>dockerhub account: </h2>
           <Selector
             targetClass="blue"
             selected={build.dockerAccount || "none"}
diff --git a/frontend/src/components/builds/tabs/git-config/Git.tsx b/frontend/src/components/builds/tabs/git-config/Git.tsx
index 236521188..f0e9acfbf 100644
--- a/frontend/src/components/builds/tabs/git-config/Git.tsx
+++ b/frontend/src/components/builds/tabs/git-config/Git.tsx
@@ -16,6 +16,7 @@ const Git: Component<{}> = (p) => {
       <Flex
         justifyContent={userCanUpdate() ? "space-between" : undefined}
         alignItems="center"
+        style={{ "flex-wrap": "wrap" }}
       >
         <h2>repo: </h2>
         <Input
@@ -28,6 +29,7 @@ const Git: Component<{}> = (p) => {
       <Flex
         justifyContent={userCanUpdate() ? "space-between" : undefined}
         alignItems="center"
+        style={{ "flex-wrap": "wrap" }}
       >
         <h2>branch: </h2>
         <Input
@@ -41,6 +43,7 @@ const Git: Component<{}> = (p) => {
         <Flex
           justifyContent={userCanUpdate() ? "space-between" : undefined}
           alignItems="center"
+          style={{ "flex-wrap": "wrap" }}
         >
           <h2>github account: </h2>
           <Selector
@@ -58,7 +61,6 @@ const Git: Component<{}> = (p) => {
           />
         </Flex>
       </Show>
-      
     </Grid>
   );
 };
diff --git a/frontend/src/components/builds/tabs/git-config/GitConfig.tsx b/frontend/src/components/builds/tabs/git-config/GitConfig.tsx
index 423c772ea..bf0d68dc4 100644
--- a/frontend/src/components/builds/tabs/git-config/GitConfig.tsx
+++ b/frontend/src/components/builds/tabs/git-config/GitConfig.tsx
@@ -23,7 +23,7 @@ const GitConfig: Component<{}> = (p) => {
             <Grid class="config-item shadow">
               <h1>webhook url</h1>
               <Flex justifyContent="space-between" alignItems="center">
-                <div class="ellipsis" style={{ width: "350px" }}>
+                <div class="ellipsis" style={{ width: "250px" }}>
                   {listenerUrl()}
                 </div>
                 <ConfirmButton
diff --git a/frontend/src/components/builds/tabs/git-config/OnClone.tsx b/frontend/src/components/builds/tabs/git-config/OnClone.tsx
index 9b24db64c..4e6b77ccb 100644
--- a/frontend/src/components/builds/tabs/git-config/OnClone.tsx
+++ b/frontend/src/components/builds/tabs/git-config/OnClone.tsx
@@ -14,6 +14,7 @@ const OnClone: Component = () => {
       <Flex
         alignItems="center"
         justifyContent={userCanUpdate() ? "space-between" : undefined}
+        style={{ "flex-wrap": "wrap" }}
       >
         <h2>path:</h2>
         <Input
@@ -36,6 +37,7 @@ const OnClone: Component = () => {
       <Flex
         alignItems="center"
         justifyContent={userCanUpdate() ? "space-between" : undefined}
+        style={{ "flex-wrap": "wrap" }}
       >
         <h2>command:</h2>
         <Input
diff --git a/frontend/src/components/deployment/tabs/config/Config.tsx b/frontend/src/components/deployment/tabs/config/Config.tsx
index 03aca0f83..4d82c6a37 100644
--- a/frontend/src/components/deployment/tabs/config/Config.tsx
+++ b/frontend/src/components/deployment/tabs/config/Config.tsx
@@ -56,7 +56,7 @@ const Config: Component<{}> = (p) => {
                     <Grid class="config-item shadow">
                       <h1>webhook url</h1>
                       <Flex justifyContent="space-between" alignItems="center">
-                        <div class="ellipsis" style={{ width: "350px" }}>
+                        <div class="ellipsis" style={{ width: "250px" }}>
                           {listenerUrl()}
                         </div>
                         <ConfirmButton
diff --git a/frontend/src/components/deployment/tabs/config/container/DockerAccount.tsx b/frontend/src/components/deployment/tabs/config/container/DockerAccount.tsx
index 9cd870ca2..2bff8077f 100644
--- a/frontend/src/components/deployment/tabs/config/container/DockerAccount.tsx
+++ b/frontend/src/components/deployment/tabs/config/container/DockerAccount.tsx
@@ -13,6 +13,7 @@ const DockerAccount: Component<{}> = (p) => {
         class="config-item shadow"
         justifyContent="space-between"
         alignItems="center"
+        style={{ "flex-wrap": "wrap" }}
       >
         <h1>docker account</h1>
         <Selector
diff --git a/frontend/src/components/deployment/tabs/config/container/Env.tsx b/frontend/src/components/deployment/tabs/config/container/Env.tsx
index 544e52226..13e7f9d46 100644
--- a/frontend/src/components/deployment/tabs/config/container/Env.tsx
+++ b/frontend/src/components/deployment/tabs/config/container/Env.tsx
@@ -42,6 +42,7 @@ const Env: Component<{}> = (p) => {
           <Flex
             justifyContent={userCanUpdate() ? "space-between" : undefined}
             alignItems="center"
+            style={{ "flex-wrap": "wrap" }}
           >
             <Input
               placeholder="variable"
diff --git a/frontend/src/components/deployment/tabs/config/container/Image.tsx b/frontend/src/components/deployment/tabs/config/container/Image.tsx
index facaa1b0a..f1f15d732 100644
--- a/frontend/src/components/deployment/tabs/config/container/Image.tsx
+++ b/frontend/src/components/deployment/tabs/config/container/Image.tsx
@@ -14,7 +14,7 @@ const Image: Component<{}> = (p) => {
   return (
     <Flex class="config-item shadow" justifyContent="space-between">
       <h1>{deployment.buildID ? "build" : "image"}</h1>
-      <Flex alignItems="center">
+      <Flex alignItems="center" style={{ "flex-wrap": "wrap" }}>
         <Show when={!deployment.buildID}>
           <Input
             placeholder="image"
diff --git a/frontend/src/components/deployment/tabs/config/container/Ports.tsx b/frontend/src/components/deployment/tabs/config/container/Ports.tsx
index db617c672..b97b7de37 100644
--- a/frontend/src/components/deployment/tabs/config/container/Ports.tsx
+++ b/frontend/src/components/deployment/tabs/config/container/Ports.tsx
@@ -36,6 +36,7 @@ const Ports: Component<{}> = (p) => {
           <Flex
             justifyContent={userCanUpdate() ? "space-between" : undefined}
             alignItems="center"
+            style={{ "flex-wrap": "wrap" }}
           >
             <Input
               placeholder="system"
diff --git a/frontend/src/components/deployment/tabs/config/container/Volumes.tsx b/frontend/src/components/deployment/tabs/config/container/Volumes.tsx
index 476c170cb..009c1f367 100644
--- a/frontend/src/components/deployment/tabs/config/container/Volumes.tsx
+++ b/frontend/src/components/deployment/tabs/config/container/Volumes.tsx
@@ -38,6 +38,7 @@ const Volumes: Component<{}> = (p) => {
           <Flex
             justifyContent={userCanUpdate() ? "space-between" : undefined}
             alignItems="center"
+            style={{ "flex-wrap": "wrap" }}
           >
             <Input
               placeholder="system"
diff --git a/frontend/src/components/deployment/tabs/config/mount-repo/Git.tsx b/frontend/src/components/deployment/tabs/config/mount-repo/Git.tsx
index e8ee26196..54b7b8b87 100644
--- a/frontend/src/components/deployment/tabs/config/mount-repo/Git.tsx
+++ b/frontend/src/components/deployment/tabs/config/mount-repo/Git.tsx
@@ -15,6 +15,7 @@ const Git: Component<{}> = (p) => {
       <Flex
         justifyContent={userCanUpdate() ? "space-between" : undefined}
         alignItems="center"
+        style={{ "flex-wrap": "wrap" }}
       >
         <h2>repo: </h2>
         <Input
@@ -27,6 +28,7 @@ const Git: Component<{}> = (p) => {
       <Flex
         justifyContent={userCanUpdate() ? "space-between" : undefined}
         alignItems="center"
+        style={{ "flex-wrap": "wrap" }}
       >
         <h2>branch: </h2>
         <Input
@@ -40,6 +42,7 @@ const Git: Component<{}> = (p) => {
         <Flex
           justifyContent={userCanUpdate() ? "space-between" : undefined}
           alignItems="center"
+          style={{ "flex-wrap": "wrap" }}
         >
           <h2>github account: </h2>
           <Selector
diff --git a/frontend/src/components/deployment/tabs/config/mount-repo/OnGit.tsx b/frontend/src/components/deployment/tabs/config/mount-repo/OnGit.tsx
index a145c66fa..0f9f6273f 100644
--- a/frontend/src/components/deployment/tabs/config/mount-repo/OnGit.tsx
+++ b/frontend/src/components/deployment/tabs/config/mount-repo/OnGit.tsx
@@ -12,6 +12,7 @@ export const OnClone: Component<{}> = (p) => {
       <Flex
         alignItems="center"
         justifyContent={userCanUpdate() ? "space-between" : undefined}
+        style={{ "flex-wrap": "wrap" }}
       >
         <h2>path:</h2>
         <Input
@@ -34,6 +35,7 @@ export const OnClone: Component<{}> = (p) => {
       <Flex
         alignItems="center"
         justifyContent={userCanUpdate() ? "space-between" : undefined}
+        style={{ "flex-wrap": "wrap" }}
       >
         <h2>command:</h2>
         <Input
@@ -65,6 +67,7 @@ export const OnPull: Component<{}> = (p) => {
       <Flex
         alignItems="center"
         justifyContent={userCanUpdate() ? "space-between" : undefined}
+        style={{ "flex-wrap": "wrap" }}
       >
         <h2>path:</h2>
         <Input
@@ -87,6 +90,7 @@ export const OnPull: Component<{}> = (p) => {
       <Flex
         alignItems="center"
         justifyContent={userCanUpdate() ? "space-between" : undefined}
+        style={{ "flex-wrap": "wrap" }}
       >
         <h2>command:</h2>
         <Input
diff --git a/frontend/src/components/deployment/tabs/config/mount-repo/RepoMount.tsx b/frontend/src/components/deployment/tabs/config/mount-repo/RepoMount.tsx
index 5f09a3f08..0de1cb159 100644
--- a/frontend/src/components/deployment/tabs/config/mount-repo/RepoMount.tsx
+++ b/frontend/src/components/deployment/tabs/config/mount-repo/RepoMount.tsx
@@ -12,6 +12,7 @@ const RepoMount: Component<{}> = (p) => {
       <Flex
         alignItems="center"
         justifyContent={userCanUpdate() ? "space-between" : undefined}
+        style={{ "flex-wrap": "wrap" }}
       >
         <Input
           placeholder="repo folder to mount"
diff --git a/frontend/src/components/sidebar/server/Deployment.tsx b/frontend/src/components/sidebar/server/Deployment.tsx
index c4c8b9cbe..48052d418 100644
--- a/frontend/src/components/sidebar/server/Deployment.tsx
+++ b/frontend/src/components/sidebar/server/Deployment.tsx
@@ -34,7 +34,7 @@ const Deployment: Component<{ id: string }> = (p) => {
         )}
         onClick={() => {
           selected.set(deployment()!._id!, "deployment");
-          if (width() <= 1000) {
+          if (width() <= 1200) {
             sidebar.toggle();
           }
         }}
diff --git a/frontend/src/components/topbar/Search/Search.tsx b/frontend/src/components/topbar/Search/Search.tsx
index 2cb47b54a..7adcd1966 100644
--- a/frontend/src/components/topbar/Search/Search.tsx
+++ b/frontend/src/components/topbar/Search/Search.tsx
@@ -15,6 +15,7 @@ import { useWindowKeyDown } from "../../../util/hooks";
 import Circle from "../../util/Circle";
 import { ControlledTabs } from "../../util/tabs/Tabs";
 import { useAppDimensions } from "../../../state/DimensionProvider";
+import Grid from "../../util/layout/Grid";
 
 const mobileStyle: JSX.CSSProperties = {
   position: "fixed",
@@ -33,21 +34,15 @@ export const Search: Component<{}> = (p) => {
       setTimeout(() => inputRef?.focus(), 200);
     }
   });
-  const style = () => {
-    return {
-      "max-height": "80vh",
-      "padding-right": "0.5rem",
-      gap: "0.5rem",
-      ...(isMobile() ? mobileStyle : {}),
-    };
-  };
   return (
     <Menu
       show={open.value()}
       close={() => open.close(inputRef)}
       position="bottom right"
-      menuClass="scroller"
-      menuStyle={style()}
+      menuStyle={{
+        gap: "0.5rem",
+        ...(isMobile() ? mobileStyle : {}),
+      }}
       backgroundColor={isMobile() ? "rgba(0,0,0,0.6)" : undefined}
       target={
         <Show
@@ -99,7 +94,7 @@ const SearchMenu: Component<{ close: () => void }> = (p) => {
       <ControlledTabs
         selected={tab.selected}
         set={tab.set}
-        containerStyle={{ width: isMobile() ? "100%" : "350px" }}
+        containerStyle={{ width: isMobile() ? "100%" : "350px", gap: "0.5rem" }}
         tabs={[
           {
             title: "deployments",
@@ -123,7 +118,11 @@ const Deployments: Component<{ close: () => void }> = (p) => {
   const { selected, servers, deployments } = useAppState();
   const { highlighted, filteredDeployments } = useSearchState();
   return (
-    <>
+    <Grid
+      class="scroller"
+      gap="0.5rem"
+      style={{ "max-height": "70vh", "padding-right": "0.5rem" }}
+    >
       <Show when={filteredDeployments()?.length === 0}>no results</Show>
       <For each={filteredDeployments()}>
         {(deployment, index) => (
@@ -158,7 +157,7 @@ const Deployments: Component<{ close: () => void }> = (p) => {
           </button>
         )}
       </For>
-    </>
+    </Grid>
   );
 };
 
@@ -166,7 +165,11 @@ const Builds: Component<{ close: () => void }> = (p) => {
   const { selected } = useAppState();
   const { highlighted, filteredBuilds } = useSearchState();
   return (
-    <>
+    <Grid
+      class="scroller"
+      gap="0.5rem"
+      style={{ "max-height": "70vh", "padding-right": "0.5rem" }}
+    >
       <Show when={filteredBuilds()?.length === 0}>no results</Show>
       <For each={filteredBuilds()}>
         {(build, index) => (
@@ -186,7 +189,7 @@ const Builds: Component<{ close: () => void }> = (p) => {
           </button>
         )}
       </For>
-    </>
+    </Grid>
   );
 };
 
@@ -194,7 +197,11 @@ const Servers: Component<{ close: () => void }> = (p) => {
   const { selected } = useAppState();
   const { highlighted, filteredServers } = useSearchState();
   return (
-    <>
+    <Grid
+      class="scroller"
+      gap="0.5rem"
+      style={{ "max-height": "70vh", "padding-right": "0.5rem" }}
+    >
       <Show when={filteredServers()?.length === 0}>no results</Show>
       <For each={filteredServers()}>
         {(server, index) => (
@@ -214,6 +221,6 @@ const Servers: Component<{ close: () => void }> = (p) => {
           </button>
         )}
       </For>
-    </>
+    </Grid>
   );
 };
diff --git a/frontend/src/components/topbar/Topbar.tsx b/frontend/src/components/topbar/Topbar.tsx
index adeb8a80a..d96646353 100644
--- a/frontend/src/components/topbar/Topbar.tsx
+++ b/frontend/src/components/topbar/Topbar.tsx
@@ -78,6 +78,7 @@ const Topbar: Component = () => {
           }
           content={<Updates />}
           position="bottom right"
+          backgroundColor={isMobile() ? "rgba(0,0,0,0.6)" : undefined}
         />
         <Menu
           show={menu() === "account"}
diff --git a/frontend/src/components/topbar/Updates.tsx b/frontend/src/components/topbar/Updates.tsx
index 3c4002e9d..9a7efcab5 100644
--- a/frontend/src/components/topbar/Updates.tsx
+++ b/frontend/src/components/topbar/Updates.tsx
@@ -11,16 +11,17 @@ const Updates: Component<{}> = () => {
   const { isMobile } = useAppDimensions();
   return (
     <Show when={updates.loaded()}>
-      <Grid class={s.Updates} style={isMobile() ? { width: "100%" } : undefined}>
-        <div
+      <Grid
+        class={s.Updates}
+        style={isMobile() ? { width: "100%" } : undefined}
+      >
+        <h1
           style={{
-            "font-size": "1.5rem",
-            "font-weight": 500,
             "place-self": "center end",
           }}
         >
           updates
-        </div>
+        </h1>
         <Grid class={combineClasses(s.UpdatesContainer, "scroller")}>
           <For each={updates.collection()!}>
             {(update) => <Update update={update} showName />}
diff --git a/frontend/src/components/topbar/topbar.module.scss b/frontend/src/components/topbar/topbar.module.scss
index 1597eefc4..e3ee00d9c 100644
--- a/frontend/src/components/topbar/topbar.module.scss
+++ b/frontend/src/components/topbar/topbar.module.scss
@@ -31,6 +31,7 @@
 .Updates {
 	width: 340px;
 	z-index: 25;
+	padding-bottom: 1rem;
 }
 
 .UpdatesContainer {
diff --git a/frontend/src/state/DimensionProvider.tsx b/frontend/src/state/DimensionProvider.tsx
index e5902edc3..1d9ef0b7b 100644
--- a/frontend/src/state/DimensionProvider.tsx
+++ b/frontend/src/state/DimensionProvider.tsx
@@ -15,7 +15,7 @@ export const DimensionProvider: Component = (p) => {
   const context = {
     width,
     height,
-    isMobile: () => width() <= 500,
+    isMobile: () => width() <= 700,
   };
   return (
     <DimensionContext.Provider value={context}>
diff --git a/frontend/src/state/StateProvider.tsx b/frontend/src/state/StateProvider.tsx
index 7ba0f15fb..d73162156 100644
--- a/frontend/src/state/StateProvider.tsx
+++ b/frontend/src/state/StateProvider.tsx
@@ -75,7 +75,7 @@ export const AppStateProvider: Component<{}> = (p) => {
   onCleanup(ws.subscribe([USER_UPDATE], reloadUser));
 
   const resizeListener = () => {
-    if (width() < 1000 && sidebarOpen()) {
+    if (width() < 1200 && sidebarOpen()) {
       toggleSidebarOpen();
     }
   };
diff --git a/frontend/src/style/app.scss b/frontend/src/style/app.scss
index 469f20137..5443c62c2 100644
--- a/frontend/src/style/app.scss
+++ b/frontend/src/style/app.scss
@@ -78,12 +78,14 @@
 }
 
 .config-item {
-  width: 60vw;
-  max-width: 30rem;
+  width: 400px;
+  max-width: calc(100vw - 2rem);
+  flex-wrap: wrap;
   background-color: c.$lightgrey;
   box-sizing: border-box;
   padding: 0.5rem;
   height: fit-content;
+  box-sizing: border-box;
 }
 
 .selected {