From cdced01008764069fd11f91addfbfc40b6630414 Mon Sep 17 00:00:00 2001
From: Csaba Tuncsik <csaba@n8n.io>
Date: Mon, 10 Oct 2022 17:23:22 +0200
Subject: [PATCH] fix(editor): change horizontal scrollbar rendering in various
 places (#4282)

* fix(editor-ui): workflow templates carousel scroll

* fix(design-system): prevent visible scrollbar on Tags

* fix(editor): add types to component prop

* fix(editor): add types to component prop
---
 .../design-system/src/components/N8nTags/Tags.vue | 11 +++++++++++
 .../src/components/CollectionsCarousel.vue        | 15 ++++-----------
 .../editor-ui/src/components/TemplateDetails.vue  |  6 +++---
 3 files changed, 18 insertions(+), 14 deletions(-)

diff --git a/packages/design-system/src/components/N8nTags/Tags.vue b/packages/design-system/src/components/N8nTags/Tags.vue
index 4e690c2b7de15..52a3b304cc1dc 100644
--- a/packages/design-system/src/components/N8nTags/Tags.vue
+++ b/packages/design-system/src/components/N8nTags/Tags.vue
@@ -25,6 +25,17 @@ export default Vue.extend({
 .tags {
 	display: flex;
 	flex-wrap: wrap;
+  overflow-x: scroll;
+
+  /* Hide scrollbar for Chrome, Safari and Opera */
+  &::-webkit-scrollbar {
+	display: none;
+  }
+
+  /* Hide scrollbar for IE, Edge and Firefox */
+  -ms-overflow-style: none;  /* IE and Edge */
+  scrollbar-width: none;  /* Firefox */
+
 
 	* {
 		margin: 0 var(--spacing-4xs) var(--spacing-4xs) 0;
diff --git a/packages/editor-ui/src/components/CollectionsCarousel.vue b/packages/editor-ui/src/components/CollectionsCarousel.vue
index 5022803570816..906612001373e 100644
--- a/packages/editor-ui/src/components/CollectionsCarousel.vue
+++ b/packages/editor-ui/src/components/CollectionsCarousel.vue
@@ -19,6 +19,8 @@
 </template>
 
 <script lang="ts">
+import { PropType } from "vue";
+import { ITemplatesCollection } from "@/Interface";
 import Card from '@/components/WorkflowCard.vue';
 import CollectionCard from '@/components/CollectionCard.vue';
 import VueAgile from 'vue-agile';
@@ -30,7 +32,7 @@ export default mixins(genericHelpers).extend({
 	name: 'CollectionsCarousel',
 	props: {
 		collections: {
-			type: Array,
+			type: Array as PropType<ITemplatesCollection[]>,
 		},
 		loading: {
 			type: Boolean,
@@ -165,17 +167,8 @@ export default mixins(genericHelpers).extend({
 	&__list {
 		width: 100%;
 		padding-bottom: var(--spacing-2xs);
-		overflow-x: scroll;
+		overflow-x: auto;
 		transition: all 1s ease-in-out;
-
-		&::-webkit-scrollbar {
-			height: 6px;
-		}
-
-		&::-webkit-scrollbar-thumb {
-			border-radius: 6px;
-			background-color: var(--color-foreground-dark);
-		}
 	}
 
 	&__track {
diff --git a/packages/editor-ui/src/components/TemplateDetails.vue b/packages/editor-ui/src/components/TemplateDetails.vue
index 83407c5f77847..185665f95272c 100644
--- a/packages/editor-ui/src/components/TemplateDetails.vue
+++ b/packages/editor-ui/src/components/TemplateDetails.vue
@@ -47,11 +47,11 @@
 	</div>
 </template>
 <script lang="ts">
-import Vue from 'vue';
+import Vue, { PropType } from 'vue';
 import TemplateDetailsBlock from '@/components/TemplateDetailsBlock.vue';
 import NodeIcon from '@/components/NodeIcon.vue';
 import { abbreviateNumber, filterTemplateNodes } from '@/components/helpers';
-import { ITemplatesNode } from '@/Interface';
+import { ITemplatesNode, ITemplatesWorkflow, ITemplatesWorkflowFull } from '@/Interface';
 export default Vue.extend({
 	name: 'TemplateDetails',
 	props: {
@@ -62,7 +62,7 @@ export default Vue.extend({
 			type: Boolean,
 		},
 		template: {
-			type: Object,
+			type: Object as PropType<ITemplatesWorkflow | ITemplatesWorkflowFull>,
 		},
 	},
 	components: {