diff --git a/apps/dotcom/src/components/DocumentName/DocumentName.tsx b/apps/dotcom/src/components/DocumentName/DocumentName.tsx
index ac07edd54..aea0d72e0 100644
--- a/apps/dotcom/src/components/DocumentName/DocumentName.tsx
+++ b/apps/dotcom/src/components/DocumentName/DocumentName.tsx
@@ -37,7 +37,10 @@ type NameState = {
 
 const MAX_TITLE_WIDTH_PX = 420
 const BUTTON_WIDTH = 44
+const STYLE_PANEL_WIDTH = 148
 const MARGIN_BETWEEN_ZONES = 12
+// the maximum amount the people menu will extend from the style panel
+const SQUEEZE_FACTOR = 52
 
 export const DocumentTopZone = track(function DocumentTopZone({
 	isOffline,
@@ -123,6 +126,7 @@ export const DocumentNameInner = track(function DocumentNameInner() {
 
 function DocumentTopZoneContainer({ children }: { children: ReactNode }) {
 	const ref = useRef<HTMLDivElement>(null)
+	const breakpoint = useBreakpoint()
 
 	const updateLayout = useCallback(() => {
 		const element = ref.current
@@ -135,7 +139,8 @@ function DocumentTopZoneContainer({ children }: { children: ReactNode }) {
 		const totalWidth = layoutTop.offsetWidth
 		const leftWidth = leftPanel.offsetWidth
 		const rightWidth = rightPanel.offsetWidth
-		// ignore the width of the button:
+
+		// Ignore button width
 		const selfWidth = element.offsetWidth - BUTTON_WIDTH
 
 		let xCoordIfCentered = (totalWidth - selfWidth) / 2
@@ -148,15 +153,20 @@ function DocumentTopZoneContainer({ children }: { children: ReactNode }) {
 		const xCoordIfLeftAligned = leftWidth + MARGIN_BETWEEN_ZONES
 
 		const left = element.offsetLeft
-		const xCoord = Math.max(xCoordIfCentered, xCoordIfLeftAligned) - left
 		const maxWidth = Math.min(
 			totalWidth - rightWidth - leftWidth - 2 * MARGIN_BETWEEN_ZONES,
 			MAX_TITLE_WIDTH_PX
 		)
+		const xCoord = Math.max(xCoordIfCentered, xCoordIfLeftAligned) - left
 
+		// Squeeze the title if the right panel is too wide on small screens
+		if (rightPanel.offsetWidth > STYLE_PANEL_WIDTH && breakpoint <= 6) {
+			element.style.setProperty('max-width', maxWidth - SQUEEZE_FACTOR + 'px')
+		} else {
+			element.style.setProperty('max-width', maxWidth + 'px')
+		}
 		element.style.setProperty('transform', `translate(${xCoord}px, 0px)`)
-		element.style.setProperty('max-width', maxWidth + 'px')
-	}, [])
+	}, [breakpoint])
 
 	useLayoutEffect(() => {
 		const element = ref.current