From a62932d4ed66c43cad7cb1988557783483ed4759 Mon Sep 17 00:00:00 2001
From: Taha <98838967+Taha-Hassan-Git@users.noreply.github.com>
Date: Wed, 28 Feb 2024 16:27:56 +0000
Subject: [PATCH] fix document name overlapping people menu (#2970)
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

When the people menu grew too large it would [overlap the document
name](https://github.com/orgs/tldraw/projects/38/views/1?pane=issue&itemId=54609134)

This PR checks if the right layout panel has grown beyond the style
panel width (plus the width of the button) and includes the button width
in the calculation if so.



- [x] `patch` — Bug fix

### Release Notes

- Fix people menu overlapping with document name when it grew too large.
---
 .../components/DocumentName/DocumentName.tsx   | 18 ++++++++++++++----
 1 file changed, 14 insertions(+), 4 deletions(-)

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