more config

frontend/src/components/config/index.tsx

@@ -144,7 +144,7 @@ export const Config = <T,>({
     >
       <div className="flex gap-4">
         {/** The sidebar when large */}
-        <div className="hidden lg:flex flex-col gap-4 w-[300px]">
+        <div className="hidden xl:flex flex-col gap-4 w-[300px]">
           {keys(components).map((tab) => (
             <Button
               key={tab}

frontend/src/components/config/util.tsx

@@ -11,7 +11,7 @@ import {
 import { Button } from "@ui/button";
 import { Input } from "@ui/input";
 import { Switch } from "@ui/switch";
-import { CheckCircle, MinusCircle, PlusCircle, Save } from "lucide-react";
+import { CheckCircle, MinusCircle, Save } from "lucide-react";
 import { ReactNode, useState } from "react";
 import { cn } from "@lib/utils";
 import {
@@ -129,7 +129,7 @@ export const DoubleInput = <
   return (
     <div className={cn("flex flex-col gap-4", containerClassName)}>
       {values?.map((value, i) => (
-        <div className="flex items-center justify-between gap-4" key={i}>
+        <div className="flex items-center justify-between gap-4 flex-wrap" key={i}>
           <Input
             className={inputClassName}
             value={value[leftval] as any}

frontend/src/components/layouts.tsx

@@ -37,7 +37,7 @@ export const Layout = () => {
   return (
     <>
       <Topbar />
-      <div className="flex gap-2">
+      <div className="flex">
         <Sidebar />
         <div className="w-full h-[calc(100vh-70px)] overflow-y-auto">
           <div className="pb-24">
@@ -68,7 +68,7 @@ export const Page = ({
   actions,
   children,
 }: PageProps) => (
-  <div className="flex flex-col gap-10 container py-8">
+  <div className="flex flex-col gap-10 container py-8 pr-12">
     {(title || icon || subtitle || actions) && (
       <div className="flex flex-col gap-6 lg:flex-row lg:gap-0 lg:items-start justify-between">
         <div className="flex flex-col gap-4">

frontend/src/components/resources/common.tsx

@@ -289,7 +289,7 @@ export const LabelsConfig = ({
   <div className="py-2 w-full flex justify-end">
     <DoubleInput
       disabled={disabled}
-      inputClassName="max-w-full"
+      inputClassName="w-[200px] max-w-full"
       containerClassName="w-fit"
       values={labels}
       leftval="variable"

frontend/src/components/resources/deployment/config/components/volumes.tsx

@@ -13,7 +13,7 @@ export const VolumesConfig = ({
   <div className="py-2 w-full flex justify-end">
     <DoubleInput
       disabled={disabled}
-      inputClassName="w-[400px] max-w-full"
+      inputClassName="w-[300px] 2xl:w-[400px] max-w-full"
       containerClassName="w-fit"
       values={volumes}
       leftval="local"

frontend/src/components/resources/deployment/config/index.tsx

@@ -206,6 +206,7 @@ export const DeploymentConfig = ({
           },
           {
             label: "Labels",
+            contentHidden: (update.labels ?? config.labels)?.length === 0,
             actions: (
               <Button
                 variant="secondary"

frontend/src/components/resources/deployment/index.tsx

@@ -53,12 +53,12 @@ const ConfigOrLog = ({ id }: { id: string }) => {
           id={id}
           titleOther={
             <TabsList className="justify-start w-fit">
-              <TabsTrigger value="Config" className="w-[70px]">
+              <TabsTrigger value="Config" className="w-[110px]">
                 Config
               </TabsTrigger>
               <TabsTrigger
                 value="Log"
-                className="w-[70px]"
+                className="w-[110px]"
                 disabled={logsDisabled}
               >
                 Log
@@ -72,12 +72,12 @@ const ConfigOrLog = ({ id }: { id: string }) => {
           id={id}
           titleOther={
             <TabsList className="justify-start w-fit">
-              <TabsTrigger value="Config" className="w-[70px]">
+              <TabsTrigger value="Config" className="w-[110px]">
                 Config
               </TabsTrigger>
               <TabsTrigger
                 value="Log"
-                className="w-[70px]"
+                className="w-[110px]"
                 disabled={logsDisabled}
               >
                 Log

frontend/src/components/resources/server/config.tsx

@@ -1,9 +1,15 @@
 import { Config } from "@components/config";
 import { useInvalidate, useRead, useWrite } from "@lib/hooks";
 import { Types } from "@monitor/client";
-import { useState } from "react";
+import { ReactNode, useState } from "react";
 
-export const ServerConfig = ({ id }: { id: string }) => {
+export const ServerConfig = ({
+  id,
+  titleOther,
+}: {
+  id: string;
+  titleOther: ReactNode;
+}) => {
   const perms = useRead("GetPermissionLevel", {
     target: { type: "Server", id },
   }).data;
@@ -22,6 +28,7 @@ export const ServerConfig = ({ id }: { id: string }) => {
 
   return (
     <Config
+      titleOther={titleOther}
       disabled={disabled}
       config={config}
       update={update}

frontend/src/components/resources/server/index.tsx

@@ -4,7 +4,6 @@ import { Types } from "@monitor/client";
 import { RequiredResourceComponents } from "@types";
 import {
   ServerIcon,
-  Rocket,
   Cpu,
   MemoryStick,
   Database,
@@ -29,6 +28,8 @@ import { DeleteResource, NewResource } from "../common";
 import { ActionWithDialog, ConfirmButton } from "@components/util";
 import { Card, CardHeader } from "@ui/card";
 import { Button } from "@ui/button";
+import { useState } from "react";
+import { Tabs, TabsContent, TabsList, TabsTrigger } from "@ui/tabs";
 
 export const useServer = (id?: string) =>
   useRead("ListServers", {}, { refetchInterval: 5000 }).data?.find(
@@ -47,6 +48,61 @@ const _ServerIcon = ({ id, size }: { id?: string; size: number }) => {
   );
 };
 
+const ConfigOrDeployments = ({ id }: { id: string }) => {
+  const [view, setView] = useState("Config");
+  const deployments = useRead("ListDeployments", {}).data?.filter(
+    (deployment) => deployment.info.server_id === id
+  );
+  const deploymentsDisabled = (deployments?.length || 0) === 0;
+  return (
+    <Tabs
+      value={deploymentsDisabled ? "Config" : view}
+      onValueChange={setView}
+      className="grid gap-4"
+    >
+      <TabsContent value="Config">
+        <ServerConfig
+          id={id}
+          titleOther={
+            <TabsList className="justify-start w-fit">
+              <TabsTrigger value="Config" className="w-[110px]">
+                Config
+              </TabsTrigger>
+              <TabsTrigger
+                value="Deployments"
+                className="w-[110px]"
+                disabled={deploymentsDisabled}
+              >
+                Deployments
+              </TabsTrigger>
+            </TabsList>
+          }
+        />
+      </TabsContent>
+      <TabsContent value="Deployments">
+        <Section
+          titleOther={
+            <TabsList className="justify-start w-fit">
+              <TabsTrigger value="Config" className="w-[110px]">
+                Config
+              </TabsTrigger>
+              <TabsTrigger
+                value="Deployments"
+                className="w-[110px]"
+                disabled={deploymentsDisabled}
+              >
+                Deployments
+              </TabsTrigger>
+            </TabsList>
+          }
+        >
+          <DeploymentTable deployments={deployments} />
+        </Section>
+      </TabsContent>
+    </Tabs>
+  );
+};
+
 export const ServerComponents: RequiredResourceComponents = {
   Dashboard: ServersChart,
 
@@ -204,21 +260,9 @@ export const ServerComponents: RequiredResourceComponents = {
     //     )
     //   );
     // },
-    Deployments: ({ id }) => {
-      const deployments = useRead("ListDeployments", {}).data?.filter(
-        (deployment) => deployment.info.server_id === id
-      );
-      return (
-        (deployments?.length || 0) > 0 && (
-          <Section title="Deployments" icon={<Rocket className="w-4 h-4" />}>
-            <DeploymentTable deployments={deployments} />
-          </Section>
-        )
-      );
-    },
   },
 
-  Config: ServerConfig,
+  Config: ConfigOrDeployments,
 
   DangerZone: ({ id }) => (
     <>