Move upcoming runs next to job schedule on job page (#915)

nucleuscloud · Dec 19, 2023 · 72651d6 · 72651d6
1 parent 326603c
commit 72651d6
Show file tree

Hide file tree

Showing 2 changed files with 10 additions and 7 deletions.
diff --git a/frontend/apps/web/app/[account]/jobs/[id]/components/NextRuns.tsx b/frontend/apps/web/app/[account]/jobs/[id]/components/NextRuns.tsx
@@ -1,7 +1,6 @@
 'use client';
 import { useAccount } from '@/components/providers/account-provider';
 import { Alert, AlertTitle } from '@/components/ui/alert';
-import { Card } from '@/components/ui/card';
 import { Skeleton } from '@/components/ui/skeleton';
 import {
   Table,
@@ -33,7 +32,7 @@ export default function JobNextRuns({ jobId, status }: Props): ReactElement {
   }
 
   return (
-    <Card>
+    <div>
       {!data?.nextRuns || error ? (
         <Alert variant="destructive">
           <AlertTitle>{`Error: Unable to retrieve recent runs`}</AlertTitle>
@@ -77,6 +76,6 @@ export default function JobNextRuns({ jobId, status }: Props): ReactElement {
           </Table>
         </div>
       )}
-    </Card>
+    </div>
   );
 }
diff --git a/frontend/apps/web/app/[account]/jobs/[id]/page.tsx b/frontend/apps/web/app/[account]/jobs/[id]/page.tsx
@@ -38,11 +38,15 @@ export default function Page({ params }: PageProps): ReactElement {
   return (
     <div className="job-details-container">
       <div className="flex flex-col gap-5">
-        <JobScheduleCard job={data?.job} mutate={mutate} />
-        <JobRecentRuns jobId={id} />
-        <div className="flex">
-          <JobNextRuns jobId={id} status={jobStatus?.status} />
+        <div className="flex flex-row gap-4">
+          <div className="basis-3/4 h-64">
+            <JobScheduleCard job={data?.job} mutate={mutate} />
+          </div>
+          <div className="flex-group basis-1/4 overflow-y-auto h-64 rounded-xl border  border-gray-300 dark:border-gray-700">
+            <JobNextRuns jobId={id} status={jobStatus?.status} />
+          </div>
         </div>
+        <JobRecentRuns jobId={id} />
       </div>
     </div>
   );