From b1035aa8030bd0ded96b1b18980454c0c2cdc8b4 Mon Sep 17 00:00:00 2001
From: Joel Perca <joelperca.vc@gmail.com>
Date: Mon, 21 Aug 2023 08:52:03 -0500
Subject: [PATCH] Fix details overflow in the job and cronjob detail sections

---
 .../src/pages/CronJobDetailPage/index.tsx     | 19 +++++++------
 estela-web/src/pages/JobDetailPage/index.tsx  | 27 +++++++++----------
 2 files changed, 22 insertions(+), 24 deletions(-)

diff --git a/estela-web/src/pages/CronJobDetailPage/index.tsx b/estela-web/src/pages/CronJobDetailPage/index.tsx
index 7eb111bd..16b48f7c 100644
--- a/estela-web/src/pages/CronJobDetailPage/index.tsx
+++ b/estela-web/src/pages/CronJobDetailPage/index.tsx
@@ -856,12 +856,11 @@ export class CronJobDetailPage extends Component<RouteComponentProps<RouteParams
                         </Row>
                         <Row className="grid grid-cols-3 bg-estela-blue-low py-1 px-4 rounded-lg">
                             <Col>Spider</Col>
-                            <Col>
-                                <Link
-                                    to={`/projects/${this.projectId}/spiders/${this.spiderId}`}
-                                    className="text-estela-blue-medium"
-                                >
-                                    {spiderName}
+                            <Col className="col-span-2">
+                                <Link to={`/projects/${this.projectId}/spiders/${this.spiderId}`}>
+                                    <Text ellipsis={true} className="text-estela-blue-medium">
+                                        {spiderName}
+                                    </Text>
                                 </Link>
                             </Col>
                         </Row>
@@ -899,8 +898,8 @@ export class CronJobDetailPage extends Component<RouteComponentProps<RouteParams
                         </Row>
                         <Row className="grid grid-cols-3 bg-estela-blue-low py-1 px-4">
                             <Col>Tags</Col>
-                            <Col>
-                                <Space direction="horizontal">
+                            <Col className="col-span-2">
+                                <Space direction="horizontal" className="flex flex-wrap">
                                     {tags.map((tag: TagsData, id) => (
                                         <Tag
                                             className="border-estela-blue-full bg-estela-blue-low text-estela-blue-full rounded-md"
@@ -947,8 +946,8 @@ export class CronJobDetailPage extends Component<RouteComponentProps<RouteParams
                         </Row>
                         <Row className="grid grid-cols-3 bg-estela-blue-low py-1 px-4">
                             <Col>Arguments</Col>
-                            <Col>
-                                <Space direction="horizontal">
+                            <Col className="col-span-2">
+                                <Space direction="horizontal" className="flex flex-wrap">
                                     {args.map((arg: ArgsData, id) => (
                                         <Tag
                                             className="border-estela-blue-full bg-estela-blue-low text-estela-blue-full rounded-md"
diff --git a/estela-web/src/pages/JobDetailPage/index.tsx b/estela-web/src/pages/JobDetailPage/index.tsx
index 6516a6ca..40106371 100644
--- a/estela-web/src/pages/JobDetailPage/index.tsx
+++ b/estela-web/src/pages/JobDetailPage/index.tsx
@@ -726,12 +726,11 @@ export class JobDetailPage extends Component<RouteComponentProps<RouteParams>, J
                             <Col>
                                 <Text className="font-bold">Spider</Text>
                             </Col>
-                            <Col>
-                                <Link
-                                    to={`/projects/${this.projectId}/spiders/${this.spiderId}`}
-                                    className="text-estela-blue-medium px-2"
-                                >
-                                    {spiderName}
+                            <Col className="col-span-2">
+                                <Link to={`/projects/${this.projectId}/spiders/${this.spiderId}`}>
+                                    <Text ellipsis={true} className="text-estela-blue-medium px-2">
+                                        {spiderName}
+                                    </Text>
                                 </Link>
                             </Col>
                         </Row>
@@ -775,8 +774,8 @@ export class JobDetailPage extends Component<RouteComponentProps<RouteParams>, J
                             <Col>
                                 <Text className="font-bold">Tags</Text>
                             </Col>
-                            <Col className="px-2">
-                                <Space direction="horizontal">
+                            <Col className="col-span-2 px-2">
+                                <Space direction="horizontal" className="flex flex-wrap">
                                     {tags.map((tag: TagsData, id) => (
                                         <Tag
                                             className="border-estela-blue-full bg-estela-blue-low text-estela-blue-full rounded-md"
@@ -795,8 +794,8 @@ export class JobDetailPage extends Component<RouteComponentProps<RouteParams>, J
                             <Col>
                                 <Text className="font-bold">Environment variables</Text>
                             </Col>
-                            <Col className="px-2">
-                                <Space direction="vertical">
+                            <Col className="col-span-2 px-2">
+                                <Space direction="vertical" className="flex flex-wrap">
                                     {envVars.map((envVar: SpiderJobEnvVar, id) =>
                                         envVar.masked ? (
                                             <AntdTooltip
@@ -827,8 +826,8 @@ export class JobDetailPage extends Component<RouteComponentProps<RouteParams>, J
                             <Col>
                                 <Text className="font-bold">Arguments</Text>
                             </Col>
-                            <Col className="px-2">
-                                <Space direction="horizontal">
+                            <Col className="col-span-2 px-2">
+                                <Space direction="horizontal" className="flex flex-wrap">
                                     {args.map((arg: ArgsData, id) => (
                                         <Tag
                                             className="border-estela-blue-full bg-estela-blue-low text-estela-blue-full rounded-md"
@@ -843,7 +842,7 @@ export class JobDetailPage extends Component<RouteComponentProps<RouteParams>, J
                                 </Space>
                             </Col>
                         </Row>
-                        <Row className="grid grid-cols-3 bg-estela-blue-low py-1 px-2 rounded-lg">
+                        <Row className="grid grid-cols-3 py-1 px-2 rounded-lg">
                             <Col>
                                 <Text className="font-bold">Job Status</Text>
                             </Col>
@@ -897,7 +896,7 @@ export class JobDetailPage extends Component<RouteComponentProps<RouteParams>, J
                                 </Col>
                             )}
                         </Row>
-                        <Row className="grid grid-cols-3 py-1 px-2">
+                        <Row className="grid grid-cols-3 bg-estela-blue-low py-1 px-2">
                             <Col>
                                 <Text className="font-bold">Data Persistence</Text>
                             </Col>