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 3eb44f4ddb..532442bc09 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
@@ -34,9 +34,34 @@
}
.release .release-screenshot img{
- width: 100%;
+ height:450px;
border-radius: 15px;
- padding: 5px;
+ padding: 15px;
+}
+
+.release .release-images{
+ overflow-x: auto;
+ overflow-y: hidden;
+}
+
+.release .release-images::-webkit-scrollbar-track{
+ -webkit-box-shadow: inset 0 0 6px rgba(0,0,0,0.3);
+ background-color: #F5F5F5;
+ border-radius: 10px;
+}
+
+.release .release-images::-webkit-scrollbar{
+ height: 8px;
+ background-color: #F5F5F5;
+}
+
+.release .release-images::-webkit-scrollbar-thumb{
+ background-color: #aaaaaa;
+ border-radius: 10px;
+}
+
+.release .release-screenshot{
+ display: table-cell;
}
.main-container{
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 cd7a022158..99f7d8055c 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
@@ -122,12 +122,12 @@ class ReleaseView extends React.Component {
-
+
{release.screenshots.map((screenshotUrl) => {
return (
-
+
-
+
)
})}
diff --git a/components/application-mgt/org.wso2.carbon.device.application.mgt.store.ui/react-app/src/App.css b/components/application-mgt/org.wso2.carbon.device.application.mgt.store.ui/react-app/src/App.css
index 3eb44f4ddb..9ca9ccf486 100644
--- a/components/application-mgt/org.wso2.carbon.device.application.mgt.store.ui/react-app/src/App.css
+++ b/components/application-mgt/org.wso2.carbon.device.application.mgt.store.ui/react-app/src/App.css
@@ -34,9 +34,35 @@
}
.release .release-screenshot img{
- width: 100%;
+ height: 400px;
border-radius: 15px;
- padding: 5px;
+ padding: 10px;
+
+}
+
+.release .release-images{
+ overflow-x: auto;
+ overflow-y: hidden;
+}
+
+.release .release-images::-webkit-scrollbar-track{
+ -webkit-box-shadow: inset 0 0 6px rgba(0,0,0,0.3);
+ background-color: #F5F5F5;
+ border-radius: 10px;
+}
+
+.release .release-images::-webkit-scrollbar{
+ height: 8px;
+ background-color: #F5F5F5;
+}
+
+.release .release-images::-webkit-scrollbar-thumb{
+ background-color: #aaaaaa;
+ border-radius: 10px;
+}
+
+.release .release-screenshot{
+ display: table-cell;
}
.main-container{
diff --git a/components/application-mgt/org.wso2.carbon.device.application.mgt.store.ui/react-app/src/components/apps/release/images/ImgViewer.js b/components/application-mgt/org.wso2.carbon.device.application.mgt.store.ui/react-app/src/components/apps/release/images/ImgViewer.js
index 17a136aac6..f8804e428d 100644
--- a/components/application-mgt/org.wso2.carbon.device.application.mgt.store.ui/react-app/src/components/apps/release/images/ImgViewer.js
+++ b/components/application-mgt/org.wso2.carbon.device.application.mgt.store.ui/react-app/src/components/apps/release/images/ImgViewer.js
@@ -44,13 +44,13 @@ class ImgViewer extends Component {
movable : false
};
return (
-
+
{this.props.images.map((screenshotUrl) => {
return (
-
-
-
+
+
+
)
})}