From 6cc6c6f13832c5756fa361360bf5ebef1d645c77 Mon Sep 17 00:00:00 2001
From: Jan Oberhauser <jan.oberhauser@gmail.com>
Date: Thu, 27 Jun 2019 12:44:59 +0200
Subject: [PATCH] Fix scrollbars and dialogs on lower resolutions

---
 .../editor-ui/src/components/DataDisplay.vue   |  6 +++++-
 packages/editor-ui/src/n8n-theme.scss          | 18 +++++++++++++++++-
 2 files changed, 22 insertions(+), 2 deletions(-)

diff --git a/packages/editor-ui/src/components/DataDisplay.vue b/packages/editor-ui/src/components/DataDisplay.vue
index 56e5d6599..d77b91da0 100644
--- a/packages/editor-ui/src/components/DataDisplay.vue
+++ b/packages/editor-ui/src/components/DataDisplay.vue
@@ -94,9 +94,13 @@ export default Vue.extend({
 		position: relative;
 		width: 80%;
 		height: 80%;
-		margin: 8em auto;
+		margin: 6em auto;
 		background-color: #fff;
 		border-radius: 2px;
+		@media (max-height: 720px) {
+			margin: 1em auto;
+			height: 95%;
+		}
 	}
 }
 
diff --git a/packages/editor-ui/src/n8n-theme.scss b/packages/editor-ui/src/n8n-theme.scss
index 41b82ac96..e946f50df 100644
--- a/packages/editor-ui/src/n8n-theme.scss
+++ b/packages/editor-ui/src/n8n-theme.scss
@@ -56,6 +56,11 @@ h1, h2, h3, h4, h5, h6 {
 	background-color: $--custom-dialog-background;
 	-webkit-box-shadow: none;
 	box-shadow: none;
+
+	@media (max-height: 720px) {
+		margin: 1em auto !important;
+	}
+
 	.el-dialog__header {
 		padding: 15px 20px;
 		.el-dialog__title {
@@ -462,9 +467,20 @@ h1, h2, h3, h4, h5, h6 {
 	background: #ddd;
 }
 ::-webkit-scrollbar-thumb {
-	background: #ddd;
 	border-radius: 6px;
+	background: lighten($--color-primary, 20%);
 }
 ::-webkit-scrollbar-thumb:hover {
 	background: $--color-primary;
 }
+
+.el-dialog__wrapper {
+	&::-webkit-scrollbar-track,
+	&::-webkit-scrollbar-track:hover {
+		background: #fff;
+	}
+	&::-webkit-scrollbar-thumb {
+		background: $--color-primary;
+		border-radius: 6px;
+	}
+}