Integrate ScrollArea component into MCP page layout for improved scrolling experience, while maintaining existing structure and loading states.

Author: cgoinglove

src/app/mcp/page.tsx

@@ -10,6 +10,7 @@ import { Skeleton } from "ui/skeleton";
 
 import { handleErrorWithToast } from "ui/shared-toast";
 import { Plus } from "lucide-react";
+import { ScrollArea } from "ui/scroll-area";
 
 export default function Page() {
   const { data: mcpList, isLoading } = useSWR(
@@ -23,39 +24,41 @@ export default function Page() {
   );
 
   return (
-    <div className="relative flex flex-col gap-4 px-8 py-8 max-w-3xl mx-auto">
-      <div className="flex items-center mb-4">
-        <h1 className="text-2xl font-bold">MCP Servers</h1>
-        <div className="flex-1" />
+    <ScrollArea className="h-full w-full">
+      <div className="flex-1 relative flex flex-col gap-4 px-8 py-8 max-w-3xl h-full mx-auto">
+        <div className="flex items-center mb-4">
+          <h1 className="text-2xl font-bold">MCP Servers</h1>
+          <div className="flex-1" />
 
-        <div className="flex gap-2">
-          <Link href="/mcp/create">
-            <Button
-              className="border-dashed border-foreground/20 font-semibold"
-              variant="outline"
-            >
-              <Plus className="stroke-2" />
-              Add MCP Server
-            </Button>
-          </Link>
+          <div className="flex gap-2">
+            <Link href="/mcp/create">
+              <Button
+                className="border-dashed border-foreground/20 font-semibold"
+                variant="outline"
+              >
+                <Plus className="stroke-2" />
+                Add MCP Server
+              </Button>
+            </Link>
+          </div>
         </div>
+        {isLoading ? (
+          <div className="flex flex-col gap-4">
+            <Skeleton className="h-60 w-full" />
+            <Skeleton className="h-60 w-full" />
+            <Skeleton className="h-60 w-full" />
+          </div>
+        ) : mcpList?.length ? (
+          <div className="flex flex-col gap-6 my-4">
+            {mcpList.map((mcp) => (
+              <MCPCard key={mcp.name} {...mcp} />
+            ))}
+          </div>
+        ) : (
+          // When MCP list is empty
+          <MCPOverview />
+        )}
       </div>
-      {isLoading ? (
-        <div className="flex flex-col gap-4">
-          <Skeleton className="h-60 w-full" />
-          <Skeleton className="h-60 w-full" />
-          <Skeleton className="h-60 w-full" />
-        </div>
-      ) : mcpList?.length ? (
-        <div className="flex flex-col gap-6 my-4">
-          {mcpList.map((mcp) => (
-            <MCPCard key={mcp.name} {...mcp} />
-          ))}
-        </div>
-      ) : (
-        // When MCP list is empty
-        <MCPOverview />
-      )}
-    </div>
+    </ScrollArea>
   );
 }