From 7d143f085c5ed06fb6c3907e908175d97ebdbe41 Mon Sep 17 00:00:00 2001
From: Li Xin <lixin.henry@bytedance.com>
Date: Thu, 24 Apr 2025 15:57:37 +0800
Subject: [PATCH] feat: adjust layout

---
 web/src/app/_settings/dialogs/settings-dialog.tsx |  6 +++---
 web/src/app/_settings/tabs/mcp-tab.tsx            | 11 ++++++++++-
 2 files changed, 13 insertions(+), 4 deletions(-)

diff --git a/web/src/app/_settings/dialogs/settings-dialog.tsx b/web/src/app/_settings/dialogs/settings-dialog.tsx
index c0dc92e..ff1146c 100644
--- a/web/src/app/_settings/dialogs/settings-dialog.tsx
+++ b/web/src/app/_settings/dialogs/settings-dialog.tsx
@@ -93,7 +93,7 @@ export function SettingsDialog() {
           </Button>
         </DialogTrigger>
       </Tooltip>
-      <DialogContent className="sm:max-w-[800px]">
+      <DialogContent className="sm:max-w-[850px]">
         <DialogHeader>
           <DialogTitle>DeerFlow Settings</DialogTitle>
           <DialogDescription>
@@ -101,8 +101,8 @@ export function SettingsDialog() {
           </DialogDescription>
         </DialogHeader>
         <Tabs value={activeTabId}>
-          <div className="flex h-100 w-full overflow-auto border-y">
-            <ul className="flex w-60 shrink-0 border-r p-1">
+          <div className="flex h-120 w-full overflow-auto border-y">
+            <ul className="flex w-50 shrink-0 border-r p-1">
               <div className="size-full">
                 {SETTINGS_TABS.map((tab) => (
                   <li
diff --git a/web/src/app/_settings/tabs/mcp-tab.tsx b/web/src/app/_settings/tabs/mcp-tab.tsx
index a2449bf..933397a 100644
--- a/web/src/app/_settings/tabs/mcp-tab.tsx
+++ b/web/src/app/_settings/tabs/mcp-tab.tsx
@@ -9,6 +9,7 @@ import { Tooltip } from "~/app/_components/tooltip";
 import { Button } from "~/components/ui/button";
 import { Switch } from "~/components/ui/switch";
 import type { MCPServerMetadata } from "~/core/mcp";
+import { cn } from "~/lib/utils";
 
 import { AddMCPServerDialog } from "../dialogs/add-mcp-server-dialog";
 
@@ -93,7 +94,10 @@ export const MCPTab: Tab = ({ settings, onChange }) => {
               server.createdAt > Date.now() - 1000 * 60 * 60 * 1;
             return (
               <motion.li
-                className="!bg-card group relative overflow-hidden rounded-lg border shadow"
+                className={cn(
+                  "!bg-card group relative overflow-hidden rounded-lg border pb-2 shadow transition-opacity duration-300",
+                  !server.enabled && "opacity-60",
+                )}
                 key={server.name}
                 {...(isNew && newlyAdded && animationProps)}
               >
@@ -124,6 +128,11 @@ export const MCPTab: Tab = ({ settings, onChange }) => {
                 <div className="flex flex-col items-start px-4 py-2">
                   <div className="mb-2 flex items-center gap-2">
                     <div className="text-lg font-medium">{server.name}</div>
+                    {!server.enabled && (
+                      <div className="bg-primary text-primary-foreground h-fit rounded px-1.5 py-0.5 text-xs">
+                        Disabled
+                      </div>
+                    )}
                     <div className="bg-primary text-primary-foreground h-fit rounded px-1.5 py-0.5 text-xs">
                       {server.transport}
                     </div>