From b01b4833e518819b08c743a600c522fb5f06cd90 Mon Sep 17 00:00:00 2001
From: Andrew Serong <14988353+andrewserong@users.noreply.github.com>
Date: Fri, 13 Sep 2024 15:48:46 +1000
Subject: [PATCH] Add fix for mid screensizes when Back button is present

---
 .../editor/src/components/document-bar/style.scss    | 12 +++++++++++-
 1 file changed, 11 insertions(+), 1 deletion(-)

diff --git a/packages/editor/src/components/document-bar/style.scss b/packages/editor/src/components/document-bar/style.scss
index bd85ab0db05152..5bc1193b654430 100644
--- a/packages/editor/src/components/document-bar/style.scss
+++ b/packages/editor/src/components/document-bar/style.scss
@@ -25,6 +25,14 @@
 			background: $gray-200;
 		}
 	}
+
+	&.has-back-button {
+		@media screen and (min-width: #{ ($break-medium) }) and (max-width: $break-large) {
+			.editor-document-bar__post-type-label {
+				display: none;
+			}
+		}
+	}
 }
 
 .editor-document-bar__command {
@@ -37,6 +45,7 @@
 	overflow: hidden;
 	color: $gray-900;
 	margin: 0 auto;
+	max-width: 70%;
 
 	// Offset the layout based on the width of the ⌘K label. This ensures the title is centrally aligned.
 	@include break-medium() {
@@ -55,7 +64,7 @@
 
 .editor-document-bar__post-title {
 	color: currentColor;
-	max-width: 64%;
+	flex: 1;
 	overflow: hidden;
 	text-overflow: ellipsis;
 
@@ -65,6 +74,7 @@
 }
 
 .editor-document-bar__post-type-label {
+	flex: 0;
 	color: $gray-800;
 	padding-left: $grid-unit-05;
 }