fix(header): header and application spacing (#88)

* fix(header): header and application spacing

* feat: scroll catalog page content

* fix: scrollbar positioning

* fix: horizontal alignement for table, app and scrolling

* leftover

Author: peppescg

biome.json

@@ -1,5 +1,5 @@
 {
-  "$schema": "https://biomejs.dev/schemas/2.3.6/schema.json",
+  "$schema": "https://biomejs.dev/schemas/2.3.7/schema.json",
   "vcs": {
     "enabled": true,
     "clientKind": "git",

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

@@ -25,9 +25,9 @@ export function ServersTable({ servers, onServerClick }: ServersTableProps) {
       <Table>
         <TableHeader className="bg-muted/50">
           <TableRow>
-            <TableHead className="w-[187px]">Server</TableHead>
-            <TableHead>About</TableHead>
-            <TableHead className="w-[120px]" />
+            <TableHead className="w-2/12 pl-4">Server</TableHead>
+            <TableHead className="w-9/12">About</TableHead>
+            <TableHead className="w-1/12" />
           </TableRow>
         </TableHeader>
         <TableBody>
@@ -43,7 +43,7 @@ export function ServersTable({ servers, onServerClick }: ServersTableProps) {
                 onClick={() => onServerClick?.(server)}
                 className={onServerClick ? "cursor-pointer" : undefined}
               >
-                <TableCell className="font-medium">{serverName}</TableCell>
+                <TableCell className="font-medium pl-4">{serverName}</TableCell>
                 <TableCell className="overflow-hidden text-ellipsis whitespace-nowrap">
                   {description}
                 </TableCell>

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 px-4">
       {filteredServers.map((server) => (
         <ServerCard
           key={server.name}

src/app/catalog/layout.tsx

@@ -6,9 +6,11 @@ export default async function CatalogLayout({
   children: React.ReactNode;
 }>) {
   return (
-    <>
+    <div className="flex flex-col h-screen">
       <Navbar />
-      {children}
-    </>
+      <main className="flex flex-col flex-1 overflow-hidden px-4 py-5">
+        {children}
+      </main>
+    </div>
   );
 }

src/app/catalog/page.tsx

@@ -15,11 +15,5 @@ export default async function CatalogPage() {
 
   const servers = await getServers();
 
-  return (
-    <div className="flex min-h-screen flex-col">
-      <div className="container mx-auto space-y-6 py-2">
-        <ServersWrapper servers={servers} />
-      </div>
-    </div>
-  );
+  return <ServersWrapper servers={servers} />;
 }

src/components/header-page.tsx

@@ -9,7 +9,7 @@ export function PageHeader({
 }) {
   return (
     <header className="w-full bg-background">
-      <div className="container mx-auto flex items-center justify-between py-2">
+      <div className="mx-auto flex items-center justify-between pb-5 px-4">
         <h1 className="text-2xl font-bold">{title}</h1>
         {children && <div className="flex items-center gap-2">{children}</div>}
       </div>

src/components/navbar.tsx

@@ -9,11 +9,9 @@ export async function Navbar() {
   });
 
   return (
-    <header className="w-full border-b bg-muted/50">
-      <div className="container mx-auto flex items-center justify-between px-4 py-4">
-        <NavbarLogo />
-        {session?.user?.name && <UserMenu userName={session.user.name} />}
-      </div>
+    <header className="w-full border-b bg-muted/50 flex items-center justify-between pl-8 pr-4 h-16">
+      <NavbarLogo />
+      {session?.user?.name && <UserMenu userName={session.user.name} />}
     </header>
   );
 }