fix(editor): Optimize application layout (#11769)

cypress/e2e/42-nps-survey.cy.ts

@@ -10,7 +10,7 @@ import { WorkflowPage } from '../pages/workflow';
 
 const workflowPage = new WorkflowPage();
 
-const NOW = 1717771477012;
+const NOW = Date.now();
 const ONE_DAY = 24 * 60 * 60 * 1000;
 const THREE_DAYS = ONE_DAY * 3;
 const SEVEN_DAYS = ONE_DAY * 7;

cypress/e2e/45-ai-assistant.cy.ts

@@ -557,6 +557,8 @@ describe('General help', () => {
 		}).as('chatRequest');
 
 		aiAssistant.getters.askAssistantFloatingButton().click();
+		wf.getters.zoomToFitButton().click();
+
 		aiAssistant.actions.sendMessage('What is wrong with this workflow?');
 		cy.wait('@chatRequest');
 

packages/design-system/src/components/AskAssistantChat/AskAssistantChat.vue

@@ -344,6 +344,8 @@ async function onCopyButtonClick(content: string, e: MouseEvent) {
 .container {
 	height: 100%;
 	position: relative;
+	display: grid;
+	grid-template-rows: auto 1fr auto;
 }
 
 p {
@@ -373,10 +375,6 @@ p {
 	background-color: var(--color-background-light);
 	border: var(--border-base);
 	border-top: 0;
-	height: 100%;
-	overflow-x: hidden;
-	overflow-y: auto;
-	padding-bottom: 250px; // make scrollable at the end
 	position: relative;
 
 	pre,
@@ -390,7 +388,13 @@ p {
 }
 
 .messages {
+	position: absolute;
+	top: 0;
+	left: 0;
+	width: 100%;
+	height: 100%;
 	padding: var(--spacing-xs);
+	overflow-y: auto;
 
 	& + & {
 		padding-top: 0;

packages/editor-ui/src/App.vue

@@ -128,7 +128,8 @@ watch(defaultLocale, (newLocale) => {
 .container {
 	height: 100vh;
 	overflow: hidden;
-	display: flex;
+	display: grid;
+	grid-template-columns: 1fr auto;
 }
 
 // App grid is the main app layout including modals and other absolute positioned elements
@@ -136,13 +137,12 @@ watch(defaultLocale, (newLocale) => {
 	position: relative;
 	display: grid;
 	height: 100vh;
-	flex-basis: 100%;
 	grid-template-areas:
 		'banners banners'
 		'sidebar header'
 		'sidebar content';
-	grid-auto-columns: minmax(0, max-content) 1fr;
+	grid-template-columns: auto 1fr;
-	grid-template-rows: auto fit-content($header-height) 1fr;
+	grid-template-rows: auto auto 1fr;
 }
 
 .banners {

packages/editor-ui/src/components/AskAssistant/AskAssistantChat.vue

@@ -103,12 +103,6 @@ function onClose() {
 </template>
 
 <style module>
-.container {
-	height: 100%;
-	flex-basis: content;
-	z-index: var(--z-index-ask-assistant-chat);
-}
-
 .wrapper {
 	height: 100%;
 }

packages/editor-ui/src/components/MainHeader/MainHeader.vue

@@ -211,7 +211,6 @@ async function navigateToExecutionsView(openInNewTab: boolean) {
 
 .main-header {
 	background-color: var(--color-background-xlight);
-	height: $header-height;
 	width: 100%;
 	box-sizing: border-box;
 	border-bottom: var(--border-width-base) var(--border-style-base) var(--color-foreground-base);
@@ -222,16 +221,15 @@ async function navigateToExecutionsView(openInNewTab: boolean) {
 	display: flex;
 	align-items: center;
 	font-size: 0.9em;
-	height: $header-height;
 	font-weight: 400;
-	padding: 0 var(--spacing-m) 0 var(--spacing-m);
+	padding: var(--spacing-xs) var(--spacing-m);
 }
 
 .github-button {
 	display: flex;
 	position: relative;
 	align-items: center;
-	height: $header-height;
+	align-self: stretch;
 	padding-left: var(--spacing-m);
 	padding-right: var(--spacing-m);
 	background-color: var(--color-background-xlight);

packages/editor-ui/src/components/MainHeader/TabBar.vue

@@ -40,15 +40,16 @@ function onUpdateModelValue(tab: MAIN_HEADER_TABS, event: MouseEvent): void {
 <style module lang="scss">
 .container {
 	position: absolute;
-	top: 47px;
+	bottom: 0;
 	left: 50%;
-	transform: translateX(-50%);
+	transform: translateX(-50%) translateY(50%);
 	min-height: 30px;
 	display: flex;
 	padding: var(--spacing-5xs);
 	background-color: var(--color-foreground-base);
 	border-radius: var(--border-radius-base);
 	transition: all 150ms ease-in-out;
+	z-index: 1;
 }
 
 @media screen and (max-width: 430px) {

packages/editor-ui/src/components/MainHeader/WorkflowDetails.vue

@@ -777,6 +777,10 @@ $--header-spacing: 20px;
 
 .name-container {
 	margin-right: $--header-spacing;
+
+	:deep(.el-input) {
+		padding: 0;
+	}
 }
 
 .name {
@@ -827,6 +831,7 @@ $--header-spacing: 20px;
 	display: flex;
 	align-items: center;
 	gap: var(--spacing-m);
+	flex-wrap: wrap;
 }
 </style>
 
@@ -837,6 +842,7 @@ $--header-spacing: 20px;
 	width: 100%;
 	display: flex;
 	align-items: center;
+	flex-wrap: wrap;
 }
 
 .group {