From f2c9362a8ac464cc3e7f798abacd4ba14dcfe9d6 Mon Sep 17 00:00:00 2001
From: BennyKok <itechbenny@gmail.com>
Date: Thu, 21 Dec 2023 00:01:01 +0800
Subject: [PATCH] fix(web): mobile view

---
 web/src/app/page.tsx                         |  4 +-
 web/src/app/workflows/[workflow_id]/page.tsx |  4 +-
 web/src/components/APIKeyList.tsx            |  2 +-
 web/src/components/DeploymentDisplay.tsx     | 14 +--
 web/src/components/MachineList.tsx           |  2 +-
 web/src/components/NavbarRight.tsx           | 96 ++++++++++++++------
 web/src/components/VersionSelect.tsx         |  6 +-
 web/src/components/WorkflowList.tsx          |  2 +-
 web/src/components/ui/table.tsx              |  2 +-
 9 files changed, 87 insertions(+), 45 deletions(-)

diff --git a/web/src/app/page.tsx b/web/src/app/page.tsx
index cb25c09..48b42b9 100644
--- a/web/src/app/page.tsx
+++ b/web/src/app/page.tsx
@@ -1,5 +1,5 @@
-import Main from '@/components/Main';
+import Main from "@/components/Main";
 
 export default function Home() {
   return <Main />;
-}
\ No newline at end of file
+}
diff --git a/web/src/app/workflows/[workflow_id]/page.tsx b/web/src/app/workflows/[workflow_id]/page.tsx
index 11f26ff..08ffe0c 100644
--- a/web/src/app/workflows/[workflow_id]/page.tsx
+++ b/web/src/app/workflows/[workflow_id]/page.tsx
@@ -30,7 +30,7 @@ export default async function Page({
   return (
     <div className="mt-4 w-full flex flex-col lg:flex-row gap-4 max-h-[calc(100dvh-100px)]">
       <div className="flex gap-4 flex-col">
-        <Card className="w-full lg:w-fit lg:min-w-[500px] h-fit">
+        <Card className="w-full lg:w-fit lg:min-w-[600px] h-fit">
           <CardHeader>
             <CardTitle>{workflow?.name}</CardTitle>
             <CardDescription suppressHydrationWarning={true}>
@@ -39,7 +39,7 @@ export default async function Page({
           </CardHeader>
 
           <CardContent>
-            <div className="flex gap-2 ">
+            <div className="flex gap-2 flex-wrap">
               <VersionSelect workflow={workflow} />
               <MachineSelect machines={machines} />
               <RunWorkflowButton workflow={workflow} machines={machines} />
diff --git a/web/src/components/APIKeyList.tsx b/web/src/components/APIKeyList.tsx
index 7cf7ccc..b44aa46 100644
--- a/web/src/components/APIKeyList.tsx
+++ b/web/src/components/APIKeyList.tsx
@@ -245,7 +245,7 @@ export function APIKeyList({ data }: { data: APIKey[] }) {
           </DropdownMenu> */}
         </div>
       </div>
-      <div className="rounded-md border">
+      <div className="rounded-md border overflow-x-auto w-full">
         <Table>
           <TableHeader>
             {table.getHeaderGroups().map((headerGroup) => (
diff --git a/web/src/components/DeploymentDisplay.tsx b/web/src/components/DeploymentDisplay.tsx
index e42664e..1369e92 100644
--- a/web/src/components/DeploymentDisplay.tsx
+++ b/web/src/components/DeploymentDisplay.tsx
@@ -11,7 +11,7 @@ import { TableCell, TableRow } from "@/components/ui/table";
 import { Tabs, TabsContent, TabsList, TabsTrigger } from "@/components/ui/tabs";
 import { getRelativeTime } from "@/lib/getRelativeTime";
 import type { findAllDeployments } from "@/server/findAllRuns";
-import { headers } from 'next/headers';
+import { headers } from "next/headers";
 
 const curlTemplate = `
 curl --request POST \
@@ -59,7 +59,7 @@ export function DeploymentDisplay({
   deployment: Awaited<ReturnType<typeof findAllDeployments>>[0];
 }) {
   const headersList = headers();
-  const host = headersList.get('host') || "";
+  const host = headersList.get("host") || "";
   const protocol = headersList.get("x-forwarded-proto") || "";
   const domain = `${protocol}://${host}`;
 
@@ -93,7 +93,10 @@ export function DeploymentDisplay({
           </TabsList>
           <TabsContent className="flex flex-col gap-2" value="js">
             Trigger the workflow
-            <CodeBlock lang="js" code={formatCode(jsTemplate, deployment, domain)} />
+            <CodeBlock
+              lang="js"
+              code={formatCode(jsTemplate, deployment, domain)}
+            />
             Check the status of the run, and retrieve the outputs
             <CodeBlock
               lang="js"
@@ -122,9 +125,6 @@ function formatCode(
   domain: string
 ) {
   return codeTemplate
-    .replace(
-      "<URL>",
-      `${domain ?? "http://localhost:3000"}/api/run`
-    )
+    .replace("<URL>", `${domain ?? "http://localhost:3000"}/api/run`)
     .replace("<ID>", deployment.id);
 }
diff --git a/web/src/components/MachineList.tsx b/web/src/components/MachineList.tsx
index eedaf29..e6aee46 100644
--- a/web/src/components/MachineList.tsx
+++ b/web/src/components/MachineList.tsx
@@ -245,7 +245,7 @@ export function MachineList({ data }: { data: Machine[] }) {
           </DropdownMenu> */}
         </div>
       </div>
-      <div className="rounded-md border">
+      <div className="rounded-md border overflow-x-auto w-full">
         <Table>
           <TableHeader>
             {table.getHeaderGroups().map((headerGroup) => (
diff --git a/web/src/components/NavbarRight.tsx b/web/src/components/NavbarRight.tsx
index a879c94..98cdd1a 100644
--- a/web/src/components/NavbarRight.tsx
+++ b/web/src/components/NavbarRight.tsx
@@ -1,39 +1,81 @@
 "use client";
 
+import {
+  Select,
+  SelectContent,
+  SelectGroup,
+  SelectItem,
+  SelectTrigger,
+  SelectValue,
+} from "@/components/ui/select";
 import { Tabs, TabsList, TabsTrigger } from "@/components/ui/tabs";
 import { usePathname } from "next/navigation";
 import { useRouter } from "next/navigation";
 
 export function NavbarRight() {
-  const pathname = usePathname();
+  const pathnames = usePathname();
+  const pathname = `/${pathnames.split("/")[1]}`;
+
   const router = useRouter();
 
+  const pages = [
+    {
+      name: "Workflows",
+      path: "/workflows",
+    },
+    {
+      name: "Machines",
+      path: "/machines",
+    },
+    {
+      name: "API Keys",
+      path: "/api-keys",
+    },
+  ];
+
   return (
-    <Tabs
-      defaultValue={
-        pathname.startsWith("/machines")
-          ? "machines"
-          : pathname.startsWith("/api-keys")
-          ? "api-keys"
-          : pathname.startsWith("/workflows")
-          ? "workflows" : ""
-      }
-      className="w-[300px]"
-      onValueChange={(value) => {
-        if (value === "machines") {
-          router.push("/machines");
-        } else if (value === "api-keys") {
-          router.push("/api-keys");
-        } else {
-          router.push("/workflows");
-        }
-      }}
-    >
-      <TabsList className="grid w-full grid-cols-3">
-        <TabsTrigger value="workflows">Workflows</TabsTrigger>
-        <TabsTrigger value="machines">Machines</TabsTrigger>
-        <TabsTrigger value="api-keys">API Keys</TabsTrigger>
-      </TabsList>
-    </Tabs>
+    <div>
+      <Tabs
+        defaultValue={pathname}
+        className="w-[300px] hidden lg:flex"
+        onValueChange={(value) => {
+          router.push(value);
+        }}
+      >
+        <TabsList className="grid w-full grid-cols-3">
+          {pages.map((page) => (
+            <TabsTrigger key={page.name} value={page.path}>
+              {page.name}
+            </TabsTrigger>
+          ))}
+        </TabsList>
+      </Tabs>
+
+      <div className="w-[100px] flex lg:hidden">
+        <Select
+          defaultValue={pathname == "/" ? "" : pathname}
+          onValueChange={(v) => {
+            router.push(v);
+          }}
+        >
+          <SelectTrigger className="w-[180px]">
+            <SelectValue placeholder="Menu" />
+          </SelectTrigger>
+          <SelectContent>
+            <SelectGroup>
+              {pages.map((page, i) => (
+                <SelectItem
+                  key={page.name}
+                  value={page.path}
+                  defaultChecked={i == 0}
+                >
+                  {page.name}
+                </SelectItem>
+              ))}
+            </SelectGroup>
+          </SelectContent>
+        </Select>
+      </div>
+    </div>
   );
 }
diff --git a/web/src/components/VersionSelect.tsx b/web/src/components/VersionSelect.tsx
index 30f80ab..9f8c5fb 100644
--- a/web/src/components/VersionSelect.tsx
+++ b/web/src/components/VersionSelect.tsx
@@ -41,7 +41,7 @@ export function VersionSelect({
         setVersion(v);
       }}
     >
-      <SelectTrigger className="w-[180px]">
+      <SelectTrigger className="w-[100px]">
         <SelectValue placeholder="Select a version" />
       </SelectTrigger>
       <SelectContent>
@@ -128,7 +128,7 @@ export function RunWorkflowButton({
         }
       }}
     >
-      Run  {isLoading ?  <LoadingIcon /> : <Play size={14} />}
+      Run {isLoading ? <LoadingIcon /> : <Play size={14} />}
     </Button>
   );
 }
@@ -155,7 +155,7 @@ export function CreateDeploymentButton({
     <DropdownMenu>
       <DropdownMenuTrigger asChild>
         <Button className="gap-2" disabled={isLoading} variant="outline">
-          Deploy  {isLoading ? <LoadingIcon /> : <MoreVertical size={14} /> }
+          Deploy {isLoading ? <LoadingIcon /> : <MoreVertical size={14} />}
         </Button>
       </DropdownMenuTrigger>
       <DropdownMenuContent className="w-56">
diff --git a/web/src/components/WorkflowList.tsx b/web/src/components/WorkflowList.tsx
index e1abe9d..1e67b73 100644
--- a/web/src/components/WorkflowList.tsx
+++ b/web/src/components/WorkflowList.tsx
@@ -229,7 +229,7 @@ export function WorkflowList({ data }: { data: Payment[] }) {
           </DropdownMenuContent>
         </DropdownMenu>
       </div>
-      <div className="rounded-md border">
+      <div className="rounded-md border overflow-x-auto w-full">
         <Table>
           <TableHeader>
             {table.getHeaderGroups().map((headerGroup) => (
diff --git a/web/src/components/ui/table.tsx b/web/src/components/ui/table.tsx
index bfe80a6..f8a3997 100644
--- a/web/src/components/ui/table.tsx
+++ b/web/src/components/ui/table.tsx
@@ -5,7 +5,7 @@ const Table = React.forwardRef<
   HTMLTableElement,
   React.HTMLAttributes<HTMLTableElement>
 >(({ className, ...props }, ref) => (
-  // <div className="relative w-full overflow-auto">
+  // <div className="relative w-full overflow-x-auto">
   <table
     ref={ref}
     className={cn("w-full caption-bottom text-sm", className)}