fix: overflow servers table cell and support sm breakpoint (#125)

* fix: overflow servers table cell and support sm breakpoint

* refactor: remove unneeded wrapper

Author: peppescg

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

@@ -16,18 +16,17 @@ 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">
+      <Table className="min-w-full">
         <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" />
+            <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>
@@ -43,13 +42,27 @@ export function ServersTable({ servers, onServerClick }: ServersTableProps) {
                 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">
+                <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>
+                <TableCell className="pr-3 text-right align-middle sm:w-1/10">
                   {url ? (
-                    <CopyUrlButton url={url} className="shadow-sm" />
+                    <CopyUrlButton
+                      url={url}
+                      className="md:h-9 md:w-auto md:rounded-md md:px-3"
+                      labelClassName="hidden md:inline"
+                    />
                   ) : null}
                 </TableCell>
               </TableRow>

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>
   );
 }