fix(editor): Update image sizes in template description not to be ful…

…l width always (#8037)

## Summary
Update image sizes in template description not to be full width always.


## Related tickets and issues

https://linear.app/n8n/issue/ADO-1506/bug-fix-images-in-template-descriptions


## Review / Merge checklist
- [X] 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.
- [x] 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/e2e/29-templates.cy.ts

@@ -2,9 +2,12 @@ import { TemplatesPage } from '../pages/templates';
 import { WorkflowPage } from '../pages/workflow';
 
 import OnboardingWorkflow from '../fixtures/Onboarding_workflow.json';
+import WorkflowTemplate from '../fixtures/Workflow_template_write_http_query.json';
+import { TemplateWorkflowPage } from '../pages/template-workflow';
 
 const templatesPage = new TemplatesPage();
 const workflowPage = new WorkflowPage();
+const templateWorkflowPage = new TemplateWorkflowPage();
 
 describe('Templates', () => {
 	it('can open onboarding flow', () => {
@@ -31,4 +34,10 @@ describe('Templates', () => {
 		workflowPage.getters.stickies().should('have.length', 1);
 		workflowPage.actions.shouldHaveWorkflowName(OnboardingWorkflow.name);
 	});
+
+	it('can open template with images and hides workflow screenshots', () => {
+		templateWorkflowPage.actions.openTemplate(WorkflowTemplate);
+
+		templateWorkflowPage.getters.description().find('img').should('have.length', 1);
+	});
 });

cypress/pages/template-workflow.ts

@@ -5,6 +5,7 @@ export class TemplateWorkflowPage extends BasePage {
 
 	getters = {
 		useTemplateButton: () => cy.get('[data-test-id="use-template-button"]'),
+		description: () => cy.get('[data-test-id="template-description"]')
 	};
 
 	actions = {
@@ -15,5 +16,15 @@ export class TemplateWorkflowPage extends BasePage {
 		clickUseThisWorkflowButton: () => {
 			this.getters.useTemplateButton().click();
 		},
+
+		openTemplate: (template: {workflow: {id: number, name: string, description: string, user: {username: string}, image: {id: number, url: string}[] }}) => {
+			cy.intercept('GET', `https://api.n8n.io/api/templates/workflows/${template.workflow.id}`, {
+				statusCode: 200,
+				body: template,
+			}).as('getTemplate');
+
+			this.actions.visit(template.workflow.id);
+			cy.wait('@getTemplate');
+		},
 	};
 }

packages/design-system/src/components/N8nMarkdown/Markdown.vue

@@ -247,10 +247,7 @@ export default defineComponent({
 	}
 
 	img {
-		width: 100%;
-		max-height: 90vh;
-		object-fit: cover;
-		border: var(--border-width-base) var(--color-foreground-base) var(--border-style-base);
+		max-width: 100%;
 		border-radius: var(--border-radius-large);
 	}
 

packages/editor-ui/src/views/TemplatesWorkflowView.vue

@@ -36,7 +36,7 @@
 				/>
 			</div>
 			<div :class="$style.content">
-				<div :class="$style.markdown">
+				<div :class="$style.markdown" data-test-id="template-description">
 					<n8n-markdown
 						:content="template && template.description"
 						:images="template && template.image"