fix: overflow servers table cell and support sm breakpoint

Author: peppescg

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

@@ -16,47 +16,62 @@ interface ServersTableProps {
   onServerClick?: (server: V0ServerJson) => void;
 }
 
-/**
- * Server table component that displays MCP servers in a table format
- */
 export function ServersTable({ servers, onServerClick }: ServersTableProps) {
   return (
     <div className="w-full overflow-hidden rounded-md border">
-      <Table className="table-fixed">
-        <TableHeader className="bg-muted/50">
-          <TableRow>
-            <TableHead className="w-2/12 pl-4">Server</TableHead>
-            <TableHead className="w-9/12">About</TableHead>
-            <TableHead className="w-1/12" />
-          </TableRow>
-        </TableHeader>
-        <TableBody>
-          {servers.map((server) => {
-            const url = server.remotes?.[0]?.url || "";
-            const serverName = server.name || "Unknown";
-            const description =
-              server.description || "No description available";
+      <div className="overflow-x-auto">
+        <Table className="min-w-full">
+          <TableHeader className="bg-muted/50">
+            <TableRow>
+              <TableHead className="w-full pl-4 sm:w-1/5">Server</TableHead>
+              <TableHead className="hidden sm:w-7/10 sm:table-cell">
+                About
+              </TableHead>
+              <TableHead className="w-16 text-right sm:w-1/10" />
+            </TableRow>
+          </TableHeader>
+          <TableBody>
+            {servers.map((server) => {
+              const url = server.remotes?.[0]?.url || "";
+              const serverName = server.name || "Unknown";
+              const description =
+                server.description || "No description available";
 
-            return (
-              <TableRow
-                key={server.name}
-                onClick={() => onServerClick?.(server)}
-                className={onServerClick ? "cursor-pointer" : undefined}
-              >
-                <TableCell className="font-medium pl-4">{serverName}</TableCell>
-                <TableCell className="max-w-0 overflow-hidden text-ellipsis whitespace-nowrap">
-                  {description}
-                </TableCell>
-                <TableCell>
-                  {url ? (
-                    <CopyUrlButton url={url} className="shadow-sm" />
-                  ) : null}
-                </TableCell>
-              </TableRow>
-            );
-          })}
-        </TableBody>
-      </Table>
+              return (
+                <TableRow
+                  key={server.name}
+                  onClick={() => onServerClick?.(server)}
+                  className={onServerClick ? "cursor-pointer" : undefined}
+                >
+                  <TableCell
+                    className="pl-4 align-middle sm:w-1/5"
+                    title={serverName}
+                  >
+                    <p className="text-base font-medium sm:text-sm">
+                      {serverName}
+                    </p>
+                  </TableCell>
+                  <TableCell
+                    className="hidden pr-4 text-muted-foreground whitespace-normal wrap-break-word sm:table-cell sm:w-7/10"
+                    title={description}
+                  >
+                    {description}
+                  </TableCell>
+                  <TableCell className="pr-3 text-right align-middle sm:w-1/10">
+                    {url ? (
+                      <CopyUrlButton
+                        url={url}
+                        className="md:h-9 md:w-auto md:rounded-md md:px-3"
+                        labelClassName="hidden md:inline"
+                      />
+                    ) : null}
+                  </TableCell>
+                </TableRow>
+              );
+            })}
+          </TableBody>
+        </Table>
+      </div>
     </div>
   );
 }

src/components/copy-url-button.tsx

@@ -4,10 +4,12 @@ import { Copy } from "lucide-react";
 import type { ComponentPropsWithoutRef } from "react";
 import { toast } from "sonner";
 import { Button } from "@/components/ui/button";
+import { cn } from "@/lib/utils";
 
 interface CopyUrlButtonProps
   extends Omit<ComponentPropsWithoutRef<typeof Button>, "onClick"> {
   url: string;
+  labelClassName?: string;
 }
 
 /**
@@ -17,6 +19,7 @@ export function CopyUrlButton({
   url,
   variant = "secondary",
   size = "sm",
+  labelClassName,
   ...props
 }: CopyUrlButtonProps) {
   const handleCopyUrl = async (e: React.MouseEvent<HTMLButtonElement>) => {
@@ -40,7 +43,7 @@ export function CopyUrlButton({
       {...props}
     >
       <Copy className="size-4" />
-      Copy URL
+      <span className={cn(labelClassName)}>Copy URL</span>
     </Button>
   );
 }