feat: More playground responsive ness (#353)

* feat: Collapse breadcrumb on small screens * chore: Improve mobile layout of configs list * chore: Move clerk pickers into popover
inferablehq · Dec 22, 2024 · 3a677ce · 3a677ce
1 parent b36ca56
commit 3a677ce
Show file tree

Hide file tree

Showing 6 changed files with 204 additions and 189 deletions.
diff --git a/app/app/clusters/[clusterId]/configs/page.tsx b/app/app/clusters/[clusterId]/configs/page.tsx
@@ -21,25 +21,15 @@ type Prompt = ClientInferResponseBody<
 const columns: ColumnDef<Prompt>[] = [
   {
     accessorKey: "name",
-    header: ({ column }) => {
-      return (
-        <Button
-          variant="ghost"
-          onClick={() => column.toggleSorting(column.getIsSorted() === "asc")}
-        >
-          Name
-          <ArrowUpDown className="ml-2 h-4 w-4" />
-        </Button>
-      );
-    },
+    header: "Name",
     cell: ({ row }) => (
       <div className="space-y-2 max-w-[800px]">
         <p className="font-medium">{row.getValue("name")}</p>
-        <p className="text-sm text-gray-500 line-clamp-2 overflow-hidden text-ellipsis">
+        <p className="text-sm text-gray-500 line-clamp-2 overflow-hidden text-ellipsis md:block hidden">
           {row.original.initialPrompt}
         </p>
         {row.original.attachedFunctions.filter(Boolean).length > 0 && (
-          <div className="flex flex-wrap gap-1">
+          <div className="flex flex-wrap gap-1 hidden md:flex">
             {row.original.attachedFunctions.map((tool) => (
               <span
                 key={tool}
@@ -55,16 +45,20 @@ const columns: ColumnDef<Prompt>[] = [
   },
   {
     id: "id",
-    header: "Configuration ID",
+    header: ({ column }) => (
+      <div className="hidden md:block">Configuration ID</div>
+    ),
     cell: ({ row }) => (
-      <pre className="text-sm text-gray-500">{row.original.id}</pre>
+      <pre className="text-sm text-gray-500 hidden md:block">{row.original.id}</pre>
     ),
   },
   {
     id: "lastUpdated",
-    header: "Last Updated",
+    header: ({ column }) => (
+      <div className="hidden md:block">Last Updated</div>
+    ),
     cell: ({ row }) => (
-      <p className="text-sm text-gray-500">
+      <p className="text-sm text-gray-500 hidden md:block">
         {row.original.updatedAt
           ? formatDistanceToNow(new Date(row.original.updatedAt), {
               addSuffix: true,
@@ -75,6 +69,7 @@ const columns: ColumnDef<Prompt>[] = [
   },
   {
     id: "actions",
+    header: "Actions",
     cell: function Cell({ row }) {
       const [isDeleting, setIsDeleting] = useState(false);
       const { getToken } = useAuth();
@@ -133,6 +128,7 @@ const columns: ColumnDef<Prompt>[] = [
             size="sm"
             onClick={handleDelete}
             disabled={isDeleting}
+            className="hidden md:inline-flex"
           >
             {isDeleting ? "Deleting..." : "Delete"}
           </Button>
@@ -188,18 +184,19 @@ export default function Page({ params }: { params: { clusterId: string } }) {
   }
 
   return (
-    <div className="ml-0 max-w-[1200px]">
+    <div className="container mx-auto px-4">
       <h1 className="text-xl">Saved Run Configurations</h1>
       <p className="text-sm text-gray-500 mb-4">
         Saved run configurations are reusable configurations that can be used in
         your next run.
       </p>
-      <div className="flex space-x-4 mb-4">
+      <div className="flex flex-col md:flex-row gap-4 mb-4">
         <Button
           variant="secondary"
           onClick={() => {
             router.push(`/clusters/${params.clusterId}/configs/new`);
           }}
+          className="w-full md:w-auto"
         >
           <PlusIcon className="mr-2 h-4 w-4" />
           Create New Run Configuration
@@ -209,6 +206,7 @@ export default function Page({ params }: { params: { clusterId: string } }) {
           onClick={() => {
             router.push(`/clusters/${params.clusterId}/configs/global`);
           }}
+          className="w-full md:w-auto"
         >
           <Globe className="mr-2 h-4 w-4" />
           Global Context

diff --git a/app/app/clusters/[clusterId]/runs/layout.tsx b/app/app/clusters/[clusterId]/runs/layout.tsx
@@ -1,11 +1,11 @@
-import { client } from "@/client/client";
-import { MachineList } from "@/components/MachineList";
-import { ServiceList } from "@/components/ServiceList";
-import { RunList } from "@/components/WorkflowList";
-import { auth } from "@clerk/nextjs";
-import { Button } from "@/components/ui/button";
-import { Sheet, SheetContent, SheetTrigger } from "@/components/ui/sheet";
-import { Blocks, Cpu } from "lucide-react";
+import { client } from '@/client/client';
+import { MachineList } from '@/components/MachineList';
+import { ServiceList } from '@/components/ServiceList';
+import { RunList } from '@/components/WorkflowList';
+import { auth } from '@clerk/nextjs';
+import { Button } from '@/components/ui/button';
+import { Sheet, SheetContent, SheetTrigger } from '@/components/ui/sheet';
+import { Blocks, Cpu } from 'lucide-react';
 
 export async function generateMetadata({
   params: { clusterId },
@@ -21,7 +21,7 @@ export async function generateMetadata({
   });
 
   if (cluster.status !== 200) {
-    return { title: "Inferable" };
+    return { title: 'Inferable' };
   }
 
   return { title: `${cluster.body?.name}` };
@@ -49,7 +49,7 @@ async function Home({
         <div className="md:hidden">
           <RunList clusterId={clusterId} />
         </div>
-        <span className="text-sm text-muted-foreground font-medium">
+        <span className="hidden md:block text-sm text-muted-foreground font-medium">
           {cluster.status === 200 ? cluster.body.name : clusterId}
         </span>
         <div className="flex items-center gap-2">
@@ -81,9 +81,7 @@ async function Home({
         <div className="hidden md:block">
           <RunList clusterId={clusterId} />
         </div>
-        <div className="flex-1 overflow-auto">
-          {children}
-        </div>
+        <div className="flex-1 overflow-auto">{children}</div>
       </div>
     </main>
   );