From 42238c8e7cfb5d71341af2c8d193a15784786a09 Mon Sep 17 00:00:00 2001
From: Anugerah Erlaut <aerlaut@live.com>
Date: Thu, 27 May 2021 20:15:33 +0700
Subject: [PATCH 1/4] remove from title to normal description item

---
 src/components/data-management/ProjectsListContainer.jsx | 7 +++----
 1 file changed, 3 insertions(+), 4 deletions(-)

diff --git a/src/components/data-management/ProjectsListContainer.jsx b/src/components/data-management/ProjectsListContainer.jsx
index ab07b6060d..9af970086b 100644
--- a/src/components/data-management/ProjectsListContainer.jsx
+++ b/src/components/data-management/ProjectsListContainer.jsx
@@ -90,8 +90,8 @@ const ProjectsListContainer = (props) => {
                 layout='horizontal'
                 size='small'
                 column={1}
-                colon=''
-                title={(
+              >
+                <Descriptions.Item contentStyle={{ fontWeight: 700, fontSize: 16 }}>
                   <EditableField
                     value={projects[uuid].name}
                     onAfterSubmit={(name) => {
@@ -110,8 +110,7 @@ const ProjectsListContainer = (props) => {
                       ).isValid
                     }
                   />
-                )}
-              >
+                </Descriptions.Item>
                 <Descriptions.Item
                   labelStyle={{ fontWeight: 'bold' }}
                   label='Samples'

From 305223e9788719448bbf32ac50a79511f42b4420 Mon Sep 17 00:00:00 2001
From: Anugerah Erlaut <aerlaut@live.com>
Date: Thu, 27 May 2021 20:59:49 +0700
Subject: [PATCH 2/4] align buttons to the top

---
 src/components/EditableField.jsx | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/components/EditableField.jsx b/src/components/EditableField.jsx
index 399a2847c1..76f75ea7ba 100644
--- a/src/components/EditableField.jsx
+++ b/src/components/EditableField.jsx
@@ -128,7 +128,7 @@ const EditableField = (props) => {
   return (
     <>
       <Space direction='vertical'>
-        <Space>
+        <Space style={{ alignItems: 'flex-start' }}>
           {renderEditState()}
           {
             deleteEnabled

From 70fb07640da0dde40248da748115d996c61d66a9 Mon Sep 17 00:00:00 2001
From: Anugerah Erlaut <aerlaut@live.com>
Date: Thu, 27 May 2021 22:32:31 +0700
Subject: [PATCH 3/4] fix long project names in main area

---
 src/components/EditableField.jsx              |   2 +-
 .../data-management/ProjectDetails.jsx        | 130 ++++++++++--------
 2 files changed, 71 insertions(+), 61 deletions(-)

diff --git a/src/components/EditableField.jsx b/src/components/EditableField.jsx
index 76f75ea7ba..68279d0a48 100644
--- a/src/components/EditableField.jsx
+++ b/src/components/EditableField.jsx
@@ -128,7 +128,7 @@ const EditableField = (props) => {
   return (
     <>
       <Space direction='vertical'>
-        <Space style={{ alignItems: 'flex-start' }}>
+        <Space align='start'>
           {renderEditState()}
           {
             deleteEnabled
diff --git a/src/components/data-management/ProjectDetails.jsx b/src/components/data-management/ProjectDetails.jsx
index 2fcea862ba..3b1e3e13c9 100644
--- a/src/components/data-management/ProjectDetails.jsx
+++ b/src/components/data-management/ProjectDetails.jsx
@@ -1,6 +1,6 @@
 import React, { useState, useEffect, useRef } from 'react';
 import {
-  Table, Typography, Space, Tooltip, PageHeader, Button, Input, Progress,
+  Table, Typography, Space, Tooltip, PageHeader, Button, Input, Progress, Row, Col,
 } from 'antd';
 import { useRouter } from 'next/router';
 import { useSelector, useDispatch } from 'react-redux';
@@ -47,7 +47,7 @@ import '../../utils/css/hover.css';
 import runGem2s from '../../redux/actions/pipeline/runGem2s';
 import loadBackendStatus from '../../redux/actions/experimentSettings/loadBackendStatus';
 
-const { Text, Paragraph } = Typography;
+const { Title, Text, Paragraph } = Typography;
 
 const ProjectDetails = ({ width, height }) => {
   const defaultNA = 'N.A.';
@@ -646,69 +646,79 @@ const ProjectDetails = ({ width, height }) => {
         onCancel={() => setUploadDetailsModalVisible(false)}
       />
       <div width={width} height={height}>
-        <PageHeader
-          title={activeProject.name}
-          extra={[
-            <Button
-              disabled={projects.ids.length === 0}
-              onClick={() => setUploadModalVisible(true)}
-            >
-              Add samples
-            </Button>,
-            <Button
-              disabled={
-                projects.ids.length === 0
+        <Space direction='vertical' style={{ width: '100%', padding: '8px 4px' }}>
+          <Row style={{ display: 'flex', justifyContent: 'space-between' }}>
+            <Title level={3}>{activeProject.name}</Title>
+            <Space>
+              <Button
+                disabled={projects.ids.length === 0}
+                onClick={() => setUploadModalVisible(true)}
+              >
+                Add samples
+              </Button>
+              <Button
+                disabled={
+                  projects.ids.length === 0
                 || activeProject?.samples?.length === 0
                 || isAddingMetadata
-              }
-              onClick={() => {
-                setIsAddingMetadata(true);
-                createMetadataColumn();
-              }}
-            >
-              Add metadata
-            </Button>,
-            <Button
-              type='primary'
-              disabled={
-                projects.ids.length === 0
+                }
+                onClick={() => {
+                  setIsAddingMetadata(true);
+                  createMetadataColumn();
+                }}
+              >
+                Add metadata
+              </Button>
+              <Button
+                type='primary'
+                disabled={
+                  projects.ids.length === 0
                 || activeProject?.samples?.length === 0
                 || !canLaunchAnalysis
+                }
+                onClick={() => openAnalysisModal()}
+              >
+                Launch analysis
+              </Button>
+            </Space>
+          </Row>
+
+          <Row>
+            <Col>
+              {
+                activeProjectUuid && (
+                  <Space direction='vertical' size='small'>
+                    <Text type='secondary'>{`ID : ${activeProjectUuid}`}</Text>
+                    <Text strong>Description:</Text>
+                    <Paragraph
+                      editable={{ onChange: changeDescription }}
+                    >
+                      {activeProject.description}
+
+                    </Paragraph>
+                  </Space>
+                )
               }
-              onClick={() => openAnalysisModal()}
-            >
-              Launch analysis
-            </Button>,
-          ]}
-        >
-          {
-            activeProjectUuid && (
-              <Space direction='vertical' size='small'>
-                <Text type='secondary'>{`ID : ${activeProjectUuid}`}</Text>
-                <Text strong>Description:</Text>
-                <Paragraph
-                  editable={{ onChange: changeDescription }}
-                >
-                  {activeProject.description}
-
-                </Paragraph>
-              </Space>
-            )
-          }
-        </PageHeader>
-
-        <Table
-          size='small'
-          scroll={{
-            x: 'max-content',
-            y: height - 250,
-          }}
-          bordered
-          columns={tableColumns}
-          dataSource={tableData}
-          sticky
-          pagination={false}
-        />
+            </Col>
+          </Row>
+
+          <Row>
+            <Col>
+              <Table
+                size='small'
+                scroll={{
+                  x: 'max-content',
+                  y: height - 250,
+                }}
+                bordered
+                columns={tableColumns}
+                dataSource={tableData}
+                sticky
+                pagination={false}
+              />
+            </Col>
+          </Row>
+        </Space>
       </div>
     </>
   );

From 131241458ce229be71e79b20b644d34253cd2ac8 Mon Sep 17 00:00:00 2001
From: Anugerah Erlaut <aerlaut@live.com>
Date: Thu, 27 May 2021 22:45:30 +0700
Subject: [PATCH 4/4] stick "create new project" on top of list

---
 src/pages/data-management/index.jsx | 9 +++++++--
 1 file changed, 7 insertions(+), 2 deletions(-)

diff --git a/src/pages/data-management/index.jsx b/src/pages/data-management/index.jsx
index 860fb00119..88b084098d 100644
--- a/src/pages/data-management/index.jsx
+++ b/src/pages/data-management/index.jsx
@@ -65,11 +65,16 @@ const DataManagementPage = ({ route }) => {
     'Projects List': {
       toolbarControls: [],
       component: (width, height) => (
-        <Space direction='vertical' style={{ width: '100%', overflowY: 'scroll' }}>
+        <Space
+          direction='vertical'
+          style={{ width: '100%' }}
+        >
           <Button type='primary' block onClick={() => setNewProjectModalVisible(true)}>
             Create New Project
           </Button>
-          <ProjectsListContainer height={height} />
+          <Space direction='vertical' style={{ width: '100%', overflowY: 'scroll' }}>
+            <ProjectsListContainer height={height} />
+          </Space>
         </Space>
       ),
     },