From 19be8e1f88aa611b600ee8e1be97a331f68f4e9a Mon Sep 17 00:00:00 2001
From: KIRAN KASHALKAR <kiran.kashalkar@riftio.com>
Date: Wed, 22 Mar 2017 14:16:13 -0400
Subject: [PATCH] Styling of job list card for loads of data

Signed-off-by: KIRAN KASHALKAR <kiran.kashalkar@riftio.com>
---
 .../src/launchpad_card/jobListCard.jsx        |  3 ++-
 .../src/launchpad_card/jobListCard.scss       | 20 +++++++++++++++++++
 2 files changed, 22 insertions(+), 1 deletion(-)

diff --git a/skyquake/plugins/launchpad/src/launchpad_card/jobListCard.jsx b/skyquake/plugins/launchpad/src/launchpad_card/jobListCard.jsx
index 0f345ea7a..5cdcb8551 100644
--- a/skyquake/plugins/launchpad/src/launchpad_card/jobListCard.jsx
+++ b/skyquake/plugins/launchpad/src/launchpad_card/jobListCard.jsx
@@ -68,11 +68,12 @@ class JobListCard extends React.Component {
                 <section className='jobListCard--details'>
                     <h4 onClick={this.openModal.bind(this)}>Job Details</h4>
                     <Modal
+                        className='jobListCard--details--modal'
                         visible={this.state.modalVisible}
                         width="600"
                         height="400"
                         effect="fadeInUp">
-                        <div>
+                        <div className='jobListCard--details--tree'>
                             <TreeView nodeLabel={<span>Job Details</span>} key={'job-details'} defaultCollapsed={false}>
                                 <p>{jobDetailsText}</p>
                             </TreeView>
diff --git a/skyquake/plugins/launchpad/src/launchpad_card/jobListCard.scss b/skyquake/plugins/launchpad/src/launchpad_card/jobListCard.scss
index 8551abbe4..0ea403f4e 100644
--- a/skyquake/plugins/launchpad/src/launchpad_card/jobListCard.scss
+++ b/skyquake/plugins/launchpad/src/launchpad_card/jobListCard.scss
@@ -67,6 +67,26 @@
     }
     &--details {
         font-size:0.75rem;
+
+        >div {
+            display: flex;
+            >div {
+                display: flex;
+                padding: 1em 0 0 1em;
+            }
+        }
+
+        &--tree {
+                display: flex;
+                flex-direction: column;
+
+                .tree-view {
+                    min-height: 300px;
+                    min-width: 580px;
+                    overflow-y: scroll;
+                }
+            }
+
         h4 {
             padding-bottom:0.5rem;
             text-decoration:underline;
-- 
2.25.1