feat: scroll catalog page content

Author: peppescg

src/app/catalog/components/servers-wrapper.tsx

@@ -18,7 +18,7 @@ export function ServersWrapper({ servers }: ServersWrapperProps) {
   const [searchQuery, setSearchQuery] = useState("");
 
   return (
-    <>
+    <div className="flex flex-col h-full">
       <PageHeader title="MCP Server Catalog">
         <ServerFilters
           viewMode={viewMode}
@@ -28,11 +28,13 @@ export function ServersWrapper({ servers }: ServersWrapperProps) {
         />
       </PageHeader>
 
-      <Servers
-        servers={servers}
-        viewMode={viewMode}
-        searchQuery={searchQuery}
-      />
-    </>
+      <div className="flex-1 overflow-auto">
+        <Servers
+          servers={servers}
+          viewMode={viewMode}
+          searchQuery={searchQuery}
+        />
+      </div>
+    </div>
   );
 }

src/app/catalog/components/servers.tsx

@@ -50,15 +50,17 @@ export function Servers({ servers, viewMode, searchQuery }: ServersProps) {
 
   if (viewMode === "list") {
     return (
-      <ServersTable
-        servers={filteredServers}
-        onServerClick={handleServerClick}
-      />
+      <div className="pb-6">
+        <ServersTable
+          servers={filteredServers}
+          onServerClick={handleServerClick}
+        />
+      </div>
     );
   }
 
   return (
-    <div className="grid grid-cols-1 gap-6 md:grid-cols-2 lg:grid-cols-3">
+    <div className="grid grid-cols-1 gap-6 pb-6 md:grid-cols-2 lg:grid-cols-3">
       {filteredServers.map((server) => (
         <ServerCard
           key={server.name}

src/app/catalog/layout.tsx

@@ -8,7 +8,7 @@ export default async function CatalogLayout({
   return (
     <div className="flex flex-col h-screen">
       <Navbar />
-      <main className="mx-auto flex-col items-center justify-between px-8 py-5">
+      <main className="flex flex-col flex-1 overflow-hidden px-8 py-5">
         {children}
       </main>
     </div>