From 96628e3d0851a1ed0d3ad375a3b124a9fbaeb60c Mon Sep 17 00:00:00 2001
From: debuggy <mintao@microsoft.com>
Date: Thu, 17 Dec 2020 14:42:05 +0800
Subject: [PATCH 1/2] Refine pivot of home page

---
 src/webportal/src/app/home/home.jsx | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/src/webportal/src/app/home/home.jsx b/src/webportal/src/app/home/home.jsx
index 346637da17..e18aa125b7 100644
--- a/src/webportal/src/app/home/home.jsx
+++ b/src/webportal/src/app/home/home.jsx
@@ -178,7 +178,7 @@ const Home = () => {
                       'https://openpai.readthedocs.io/en/latest/manual/cluster-admin/basic-management-operations.html#abnormal-jobs'
                     }
                   />
-                  <Pivot>
+                  <Pivot styles={{ root: { maxWidth: '100%' } }}>
                     <PivotItem headerText='Abnormal jobs'>
                       <AbnormalJobList
                         jobs={listAbnormalJobs(runningJobs, lowGpuJobInfo)}
@@ -190,7 +190,7 @@ const Home = () => {
                   </Pivot>
                 </Stack>
               ) : (
-                <Pivot>
+                <Pivot styles={{ root: { maxWidth: '100%' } }}>
                   <PivotItem headerText='My recent jobs'>
                     <RecentJobList style={{ minHeight: 0 }} jobs={userJobs} />
                   </PivotItem>

From 869a0df64152e94281d6eee01e19fd95921845eb Mon Sep 17 00:00:00 2001
From: debuggy <mintao@microsoft.com>
Date: Mon, 21 Dec 2020 13:26:58 +0800
Subject: [PATCH 2/2] make home page grow

---
 src/webportal/src/app/home/home.jsx           | 27 +++++++++++--------
 .../src/app/home/home/abnormal-job-list.jsx   |  9 +------
 .../src/app/home/home/recent-job-list.jsx     |  5 ----
 3 files changed, 17 insertions(+), 24 deletions(-)

diff --git a/src/webportal/src/app/home/home.jsx b/src/webportal/src/app/home/home.jsx
index e18aa125b7..75254c3bf7 100644
--- a/src/webportal/src/app/home/home.jsx
+++ b/src/webportal/src/app/home/home.jsx
@@ -178,19 +178,24 @@ const Home = () => {
                       'https://openpai.readthedocs.io/en/latest/manual/cluster-admin/basic-management-operations.html#abnormal-jobs'
                     }
                   />
-                  <Pivot styles={{ root: { maxWidth: '100%' } }}>
-                    <PivotItem headerText='Abnormal jobs'>
-                      <AbnormalJobList
-                        jobs={listAbnormalJobs(runningJobs, lowGpuJobInfo)}
-                      />
-                    </PivotItem>
-                    <PivotItem headerText='My recent jobs'>
-                      <RecentJobList style={{ minHeight: 0 }} jobs={userJobs} />
-                    </PivotItem>
-                  </Pivot>
+                  <StackItem grow>
+                    <Pivot>
+                      <PivotItem headerText='Abnormal jobs'>
+                        <AbnormalJobList
+                          jobs={listAbnormalJobs(runningJobs, lowGpuJobInfo)}
+                        />
+                      </PivotItem>
+                      <PivotItem headerText='My recent jobs'>
+                        <RecentJobList
+                          style={{ minHeight: 0 }}
+                          jobs={userJobs}
+                        />
+                      </PivotItem>
+                    </Pivot>
+                  </StackItem>
                 </Stack>
               ) : (
-                <Pivot styles={{ root: { maxWidth: '100%' } }}>
+                <Pivot>
                   <PivotItem headerText='My recent jobs'>
                     <RecentJobList style={{ minHeight: 0 }} jobs={userJobs} />
                   </PivotItem>
diff --git a/src/webportal/src/app/home/home/abnormal-job-list.jsx b/src/webportal/src/app/home/home/abnormal-job-list.jsx
index ba9224bacc..938017b3fb 100644
--- a/src/webportal/src/app/home/home/abnormal-job-list.jsx
+++ b/src/webportal/src/app/home/home/abnormal-job-list.jsx
@@ -56,7 +56,6 @@ const AbnormalJobList = ({ jobs }) => {
   const jobListColumns = [
     {
       key: 'name',
-      minWidth: 150,
       name: 'Name',
       fieldName: 'name',
       className: FontClassNames.mediumPlus,
@@ -72,8 +71,8 @@ const AbnormalJobList = ({ jobs }) => {
     },
     {
       key: 'gpuCount',
-      minWidth: 150,
       name: 'GPUs',
+      minWidth: 150,
       fieldName: 'totalGpuNumber',
       className: FontClassNames.mediumPlus,
       isResizable: true,
@@ -90,7 +89,6 @@ const AbnormalJobList = ({ jobs }) => {
     },
     {
       key: 'modified',
-      minWidth: 150,
       name: 'Date Modified',
       className: FontClassNames.mediumPlus,
       isResizable: true,
@@ -100,7 +98,6 @@ const AbnormalJobList = ({ jobs }) => {
     },
     {
       key: 'user',
-      minWidth: 60,
       name: 'User',
       fieldName: 'username',
       className: FontClassNames.mediumPlus,
@@ -108,7 +105,6 @@ const AbnormalJobList = ({ jobs }) => {
     },
     {
       key: 'duration',
-      minWidth: 120,
       name: 'Duration',
       className: FontClassNames.mediumPlus,
       isResizable: true,
@@ -125,7 +121,6 @@ const AbnormalJobList = ({ jobs }) => {
     },
     {
       key: 'virtualCluster',
-      minWidth: 100,
       name: 'Virtual Cluster',
       fieldName: 'virtualCluster',
       className: FontClassNames.mediumPlus,
@@ -133,7 +128,6 @@ const AbnormalJobList = ({ jobs }) => {
     },
     {
       key: 'status',
-      minWidth: 100,
       name: 'Status',
       isResizable: true,
       onRender(job) {
@@ -142,7 +136,6 @@ const AbnormalJobList = ({ jobs }) => {
     },
     {
       key: 'action',
-      minWidth: 100,
       name: 'Action',
       className: zeroPaddingClass,
       isResizable: true,
diff --git a/src/webportal/src/app/home/home/recent-job-list.jsx b/src/webportal/src/app/home/home/recent-job-list.jsx
index 26bae8d7d2..d50a09126f 100644
--- a/src/webportal/src/app/home/home/recent-job-list.jsx
+++ b/src/webportal/src/app/home/home/recent-job-list.jsx
@@ -89,7 +89,6 @@ const DummyContent = () => {
 const jobListColumns = [
   {
     key: 'name',
-    minWidth: 200,
     name: 'Name',
     fieldName: 'name',
     className: FontClassNames.mediumPlus,
@@ -104,7 +103,6 @@ const jobListColumns = [
   },
   {
     key: 'modified',
-    minWidth: 150,
     name: 'Date Modified',
     className: FontClassNames.mediumPlus,
     isResizable: true,
@@ -114,7 +112,6 @@ const jobListColumns = [
   },
   {
     key: 'duration',
-    minWidth: 120,
     name: 'Duration',
     className: FontClassNames.mediumPlus,
     isResizable: true,
@@ -124,7 +121,6 @@ const jobListColumns = [
   },
   {
     key: 'virtualCluster',
-    minWidth: 100,
     name: 'Virtual Cluster',
     fieldName: 'virtualCluster',
     className: FontClassNames.mediumPlus,
@@ -132,7 +128,6 @@ const jobListColumns = [
   },
   {
     key: 'status',
-    minWidth: 100,
     name: 'Status',
     isResizable: true,
     onRender(job) {