fix document name overlapping people menu (#2970)
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:
parent
9f82e27214
commit
a62932d4ed
1 changed files with 14 additions and 4 deletions
|
@ -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
|
||||
|
|
Loading…
Reference in a new issue