PrivateCoffee/tldraw
4
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions 1

fix document name overlapping people menu (#2970)

Browse source 
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.
This commit is contained in:
Taha 2024-02-28 16:27:56 +00:00 committed by GitHub
parent 9f82e27214
commit a62932d4ed
No known key found for this signature in database
GPG key ID: B5690EEEBB952194
1 changed files with 14 additions and 4 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

18
apps/dotcom/src/components/DocumentName/DocumentName.tsx
View file

@ -37,7 +37,10 @@ type NameState = {
const MAX_TITLE_WIDTH_PX = 420 const MAX_TITLE_WIDTH_PX = 420
const BUTTON_WIDTH = 44 const BUTTON_WIDTH = 44
const STYLE_PANEL_WIDTH = 148
const MARGIN_BETWEEN_ZONES = 12 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({ export const DocumentTopZone = track(function DocumentTopZone({
isOffline, isOffline,
@ -123,6 +126,7 @@ export const DocumentNameInner = track(function DocumentNameInner() {
function DocumentTopZoneContainer({ children }: { children: ReactNode }) { function DocumentTopZoneContainer({ children }: { children: ReactNode }) {
const ref = useRef<HTMLDivElement>(null) const ref = useRef<HTMLDivElement>(null)
const breakpoint = useBreakpoint()
const updateLayout = useCallback(() => { const updateLayout = useCallback(() => {
const element = ref.current const element = ref.current
@ -135,7 +139,8 @@ function DocumentTopZoneContainer({ children }: { children: ReactNode }) {
const totalWidth = layoutTop.offsetWidth const totalWidth = layoutTop.offsetWidth
const leftWidth = leftPanel.offsetWidth const leftWidth = leftPanel.offsetWidth
const rightWidth = rightPanel.offsetWidth const rightWidth = rightPanel.offsetWidth
// ignore the width of the button:
// Ignore button width
const selfWidth = element.offsetWidth - BUTTON_WIDTH const selfWidth = element.offsetWidth - BUTTON_WIDTH
let xCoordIfCentered = (totalWidth - selfWidth) / 2 let xCoordIfCentered = (totalWidth - selfWidth) / 2
@ -148,15 +153,20 @@ function DocumentTopZoneContainer({ children }: { children: ReactNode }) {
const xCoordIfLeftAligned = leftWidth + MARGIN_BETWEEN_ZONES const xCoordIfLeftAligned = leftWidth + MARGIN_BETWEEN_ZONES
const left = element.offsetLeft const left = element.offsetLeft
const xCoord = Math.max(xCoordIfCentered, xCoordIfLeftAligned) - left
const maxWidth = Math.min( const maxWidth = Math.min(
totalWidth - rightWidth - leftWidth - 2 * MARGIN_BETWEEN_ZONES, totalWidth - rightWidth - leftWidth - 2 * MARGIN_BETWEEN_ZONES,
MAX_TITLE_WIDTH_PX MAX_TITLE_WIDTH_PX
) )
const xCoord = Math.max(xCoordIfCentered, xCoordIfLeftAligned) - left
element.style.setProperty('transform', `translate(${xCoord}px, 0px)`) // 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('max-width', maxWidth + 'px')
}, []) }
element.style.setProperty('transform', `translate(${xCoord}px, 0px)`)
}, [breakpoint])
useLayoutEffect(() => { useLayoutEffect(() => {
const element = ref.current const element = ref.current