Refactor maxWidth to CSS variable

- Update GlobalExecutionsList.vue
- Update PageViewLayout.vue
- Define --content-container-width
- Update ProjectSettings.vue
- Update TemplatesView.vue

packages/editor-ui/src/components/executions/global/GlobalExecutionsList.vue

@@ -459,8 +459,8 @@ async function onAutoRefreshToggle(value: boolean) {
 	position: relative;
 	height: 100%;
 	width: 100%;
-	max-width: 1280px;
 	padding: var(--spacing-l) var(--spacing-2xl) 0;
+	max-width: var(--content-container-width);
 }
 
 .execList {

packages/editor-ui/src/components/layouts/PageViewLayout.vue

@@ -13,7 +13,7 @@
 	flex-direction: column;
 	height: 100%;
 	width: 100%;
-	max-width: 1280px;
+	max-width: var(--content-container-width);
 	box-sizing: border-box;
 	align-content: start;
 	padding: var(--spacing-l) var(--spacing-2xl) 0;

packages/editor-ui/src/n8n-theme.scss

@@ -4,6 +4,7 @@
 :root {
 	// Using native css variable enables us to use this value in JS
 	--header-height: 65;
+	--content-container-width: 1280px;
 }
 
 .clickable {

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

@@ -400,7 +400,7 @@ onMounted(() => {
 
 	form {
 		width: 100%;
-		max-width: 1280px;
+		max-width: var(--content-container-width);
 		padding: 0 var(--spacing-2xl);
 
 		fieldset {
@@ -417,7 +417,7 @@ onMounted(() => {
 
 .header {
 	width: 100%;
-	max-width: 1280px;
+	max-width: var(--content-container-width);
 	padding: var(--spacing-l) var(--spacing-2xl) 0;
 }
 

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

@@ -30,7 +30,7 @@ withDefaults(defineProps<Props>(), {
 .template {
 	display: flex;
 	width: 100%;
-	max-width: 1280px;
+	max-width: var(--content-container-width);
 	padding: var(--spacing-l) var(--spacing-l) 0;
 	justify-content: center;
 	@media (min-width: 1200px) {