From d01e42a2aabedfd4c0f79799bbfc9b1a235d4233 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Milorad=20FIlipovi=C4=87?= <milorad@n8n.io>
Date: Tue, 2 Jan 2024 14:13:09 +0100
Subject: [PATCH] fix(editor): Fix templates view layout (#8196)

## Summary
Recent changes to the template info carousel component broke the layout
of the templates way so it had excessive width when templates categories
carousel was visible.
This PR reverts disables CSS that held it in place.


## Related tickets and issues
Fixes ADO-1628


## Review / Merge checklist
- [ ] PR title and summary are descriptive. **Remember, the title
automatically goes into the changelog. Use `(no-changelog)` otherwise.**
([conventions](https://github.com/n8n-io/n8n/blob/master/.github/pull_request_title_conventions.md))
- [ ] [Docs updated](https://github.com/n8n-io/n8n-docs) or follow-up
ticket created.
- [ ] Tests included.
> A bug is not considered fixed, unless a test is added to prevent it
from happening again.
   > A feature is not complete without tests.
---
 cypress/pages/workflows.ts                                   | 2 +-
 packages/editor-ui/src/components/CollectionWorkflowCard.vue | 2 +-
 packages/editor-ui/src/components/TemplatesInfoCarousel.vue  | 4 ++++
 3 files changed, 6 insertions(+), 2 deletions(-)

diff --git a/cypress/pages/workflows.ts b/cypress/pages/workflows.ts
index 4c18c21859..56a3c44923 100644
--- a/cypress/pages/workflows.ts
+++ b/cypress/pages/workflows.ts
@@ -35,7 +35,7 @@ export class WorkflowsPage extends BasePage {
 		// myWorkflows: () => cy.getByTestId('my-workflows'),
 		// allWorkflows: () => cy.getByTestId('all-workflows'),
 		suggestedTemplatesPageContainer: () => cy.getByTestId('suggested-templates-page-container'),
-		suggestedTemplatesCards: () => cy.getByTestId('templates-info-card').filter(':visible'),
+		suggestedTemplatesCards: () => cy.get('.agile__slides--regular [data-test-id=templates-info-card]'),
 		suggestedTemplatesNewWorkflowButton: () => cy.getByTestId('suggested-templates-new-workflow-button'),
 		suggestedTemplatesSectionContainer: () => cy.getByTestId('suggested-templates-section-container'),
 		suggestedTemplatesPreviewModal: () => cy.getByTestId('suggested-templates-preview-modal'),
diff --git a/packages/editor-ui/src/components/CollectionWorkflowCard.vue b/packages/editor-ui/src/components/CollectionWorkflowCard.vue
index 957a18980a..f1ece84c48 100644
--- a/packages/editor-ui/src/components/CollectionWorkflowCard.vue
+++ b/packages/editor-ui/src/components/CollectionWorkflowCard.vue
@@ -30,7 +30,7 @@ export default defineComponent({
 
 <style lang="scss" module>
 .card {
-	min-width: 180px;
+	min-width: 235px;
 	height: 140px;
 	margin-right: var(--spacing-2xs);
 	cursor: pointer;
diff --git a/packages/editor-ui/src/components/TemplatesInfoCarousel.vue b/packages/editor-ui/src/components/TemplatesInfoCarousel.vue
index 63b57b0491..5f1ae69b44 100644
--- a/packages/editor-ui/src/components/TemplatesInfoCarousel.vue
+++ b/packages/editor-ui/src/components/TemplatesInfoCarousel.vue
@@ -229,5 +229,9 @@ export default defineComponent({
 		overflow-x: auto;
 		transition: all 1s ease-in-out;
 	}
+
+	&__track {
+		width: 50px;
+	}
 }
 </style>