From 64747a8c2695e76f144b3c7744d805389ff89ce3 Mon Sep 17 00:00:00 2001
From: Jayasanka <jayasanka.sack@gmail.com>
Date: Wed, 22 May 2019 17:44:55 +0530
Subject: [PATCH] Make layout responsive

---
 .../react-app/src/App.css                     |  5 +++++
 .../components/apps/release/ReleaseView.js    | 19 ++++++++++++++-----
 2 files changed, 19 insertions(+), 5 deletions(-)

diff --git a/components/application-mgt/org.wso2.carbon.device.application.mgt.publisher.ui/react-app/src/App.css b/components/application-mgt/org.wso2.carbon.device.application.mgt.publisher.ui/react-app/src/App.css
index 85651a6dea..adbde74ba5 100644
--- a/components/application-mgt/org.wso2.carbon.device.application.mgt.publisher.ui/react-app/src/App.css
+++ b/components/application-mgt/org.wso2.carbon.device.application.mgt.publisher.ui/react-app/src/App.css
@@ -10,6 +10,11 @@
   width: 100%;
   border-radius: 100%;
 }
+
+.release .release-title{
+  margin-left: 15px;
+}
+
 .release .release-screenshot img{
   width: 100%;
   border-radius: 15px;
diff --git a/components/application-mgt/org.wso2.carbon.device.application.mgt.publisher.ui/react-app/src/components/apps/release/ReleaseView.js b/components/application-mgt/org.wso2.carbon.device.application.mgt.publisher.ui/react-app/src/components/apps/release/ReleaseView.js
index b39809417e..b334683818 100644
--- a/components/application-mgt/org.wso2.carbon.device.application.mgt.publisher.ui/react-app/src/components/apps/release/ReleaseView.js
+++ b/components/application-mgt/org.wso2.carbon.device.application.mgt.publisher.ui/react-app/src/components/apps/release/ReleaseView.js
@@ -1,5 +1,5 @@
 import React from "react";
-import {Avatar, Row, Col, Typography} from "antd";
+import {Avatar, Row, Col, Typography, Button} from "antd";
 import "../../../App.css";
 
 const {Title, Text} = Typography;
@@ -11,13 +11,22 @@ class ReleaseView extends React.Component {
         return (
             <div className="release">
                 <Row>
-                    <Col md={4} sm={6} xs={8} className="release-icon">
-                        <img src={release.iconPath}/>
+                    <Col xl={4} sm={6} xs={8} className="release-icon">
+                        <img src={release.iconPath} alt="icon"/>
                     </Col>
-                    <Col md={18} sm={12}>
+                    <Col xl={10} sm={11} className="release-title">
                         <Title level={2}>App Name</Title>
                         <Text>{release.version}</Text><br/>
-                        <Text type="secondary">{release.description}</Text>
+                        <Text type="secondary">{release.description}</Text><br/>
+                    </Col>
+                    <Col xl={8} md={10} sm={24} xs={24} style={{float: "right"}}>
+                        <div>
+                            <Button.Group style={{float: "right"}}>
+                                <Button htmlType="button" icon="shop">Open in store</Button>
+                                <Button htmlType="button" type="primary" icon="edit">edit</Button>
+                            </Button.Group>
+                        </div>
+
                     </Col>
                 </Row>
                 <br/>