server config

frontend/src/components/config/index.tsx

@@ -97,7 +97,7 @@ export const Configuration = <T extends Partial<Record<keyof T, unknown>>>({
               return (
                 <div
                   key={field}
-                  className="flex justify-between items-center border-b pb-4"
+                  className="flex justify-between items-center border-b pb-4 min-h-[40px]"
                 >
                   <div className="capitalize"> {fmt_field(field)} </div>
                   <Switch
@@ -168,7 +168,7 @@ export const Configuration = <T extends Partial<Record<keyof T, unknown>>>({
               }
               if (typeof val === "boolean") {
                 return (
-                  <div key={field} className="flex flex-col gap-2">
+                  <div key={field} className="flex flex-col gap-2 min-h-[40px]">
                     <div className="capitalize"> {fmt_field(field)} </div>
                     <Switch
                       checked={val}

frontend/src/layouts/page.tsx

@@ -9,7 +9,7 @@ interface PageProps {
 
 export const Page = ({ title, subtitle, actions, children }: PageProps) => (
   <div className="flex flex-col gap-12">
-    <div className="flex flex-col gap-6 lg:flex-row lg:gap-0 justify-between">
+    <div className="flex flex-col gap-6 lg:flex-row lg:gap-0 lg:items-start justify-between">
       <div className="flex flex-col">
         <h1 className="text-4xl">{title}</h1>
         {subtitle}
@@ -29,7 +29,7 @@ interface SectionProps {
 
 export const Section = ({ title, icon, actions, children }: SectionProps) => (
   <div className="flex flex-col gap-2">
-    <div className="flex justify-between">
+    <div className="flex items-start justify-between min-h-[40px]">
       <div className="flex items-center gap-2 text-muted-foreground">
         {icon}
         <h2 className="text-xl">{title}</h2>

frontend/src/resources/server/stats.tsx

@@ -1,4 +1,5 @@
 import { useServerStats } from "@hooks";
+import { Section } from "@layouts/page";
 import {
   Card,
   CardContent,
@@ -14,25 +15,18 @@ export const ServerStats = () => {
   if (!server_id) return null;
 
   return (
-    <div className="flex flex-col">
-      <div className="flex justify-between">
-        <div className="flex items-center gap-2 text-muted-foreground">
-          <LineChart className="w-4 h-4" />
-          <h2 className="text-xl">Server Stats</h2>
-        </div>
-        {/* <Link to={`/deployments/${id}/updates`}>
-          <Button variant="secondary">
-            <ExternalLink className="w-4 h-4" />
-          </Button>
-        </Link> */}
-      </div>
-      <div className="flex flex-col lg:flex-row gap-4 mt-2">
+    <Section
+      title="Server Stats"
+      icon={<LineChart className="w-4 h-4" />}
+      actions=""
+    >
+      <div className="flex flex-col lg:flex-row gap-4">
         <CPU server_id={server_id} />
         <RAM server_id={server_id} />
         <DISK server_id={server_id} />
         <LOAD server_id={server_id} />
       </div>
-    </div>
+    </Section>
   );
 };