fix(tldraw): tighten page menu list height (tldraw#8924)

In order to make the page menu fit its rows without extra trailing space
and surface the max-pages limit in the UI, this PR auto-fits the list to
the row stack, lowers the resize minimum to one row, refactors the
resize handle into a flush 1px divider with a separate hit-test area,
and always renders the create button (disabled with a "Maximum pages
reached" tooltip when the page count hits `editor.options.maxPages`).
Closes tldraw#8862.

### Change type

- [x] `bugfix`

### Test plan

1. Open the page menu with multiple pages and confirm the list fits the
row stack with no trailing space.
2. Drag the resize handle upward and confirm it stops at a one-row
height.
3. Drag the resize handle downward, then double-click it and confirm the
list resets to the auto-fit height.
4. Create pages up to `maxPages` and confirm the create button stays
visible, becomes disabled, drops its `+` icon, and shows the "Maximum
pages reached" tooltip.

- [ ] Unit tests
- [x] End to end tests

### Release notes

- Fix the page menu list height so it no longer leaves extra trailing
space when opened, resized, or reset.
- Keep the create-page button visible when the page limit is reached,
disabled with a "Maximum pages reached" tooltip.

### API changes

- Added `'page-menu.max-pages-reached'` to `TLUiTranslationKey` and
`DEFAULT_TRANSLATION`.

### Code changes

| Section         | LOC change |
| --------------- | ---------- |
| Core code       | +53 / -33  |
| Tests           | +54 / -0   |
| Automated files | +1 / -1    |

Author: steveruizok

apps/examples/e2e/tests/test-page-menu.spec.ts

@@ -5,12 +5,45 @@ import { setupOrReset, sleep } from '../shared-e2e'
 
 declare const editor: Editor
 
+const PAGE_MENU_ITEM_HEIGHT = 36
+// The list reserves a few pixels of breathing room below the last row; the
+// auto-fit and minimum heights both include it, so the e2e expectations must too.
+const LIST_BOTTOM_PADDING = 4
+const MIN_PAGE_MENU_LIST_HEIGHT = PAGE_MENU_ITEM_HEIGHT + LIST_BOTTOM_PADDING
+
 const isMobileProject = () => test.info().project.name.includes('Mobile')
 
 async function expectPageItemToBeCurrent(pageItem: Locator, isCurrent: boolean) {
 	await expect(pageItem).toHaveAttribute('data-iscurrent', isCurrent ? 'true' : 'false')
 }
 
+async function getPageMenuListHeight(pageList: Locator) {
+	return await pageList.evaluate((elm) => elm.getBoundingClientRect().height)
+}
+
+async function expectPageMenuListHeight(pageList: Locator, expectedHeight: number, tolerance = 1) {
+	await expect
+		.poll(async () => getPageMenuListHeight(pageList))
+		.toBeGreaterThanOrEqual(expectedHeight - tolerance)
+
+	await expect
+		.poll(async () => getPageMenuListHeight(pageList))
+		.toBeLessThanOrEqual(expectedHeight + tolerance)
+}
+
+async function dragPageMenuResizeHandle(page: Page, deltaY: number) {
+	const resizeHandle = page.locator('.tlui-page-menu__resize-handle')
+	const box = await resizeHandle.boundingBox()
+	if (!box) throw new Error('Could not find page menu resize handle')
+	const x = box.x + box.width / 2
+	const y = box.y + box.height / 2
+
+	await page.mouse.move(x, y)
+	await page.mouse.down()
+	await page.mouse.move(x, y + deltaY, { steps: 4 })
+	await page.mouse.up()
+}
+
 async function createPagesForReordering(page: Page) {
 	await page.evaluate(() => {
 		editor.createPage({ name: 'Page 2' })
@@ -49,6 +82,37 @@ test.describe('page menu', () => {
 		await expect(header).toBeHidden()
 	})
 
+	test('The page list height fits its rows when opened, resized, and reset', async ({
+		page,
+		pageMenu,
+	}) => {
+		test.skip(isMobileProject(), 'Desktop page menu resize behavior')
+
+		await page.evaluate(() => {
+			window.localStorage.removeItem('tldraw_page_menu_list_height')
+			editor.createPage({ name: 'Page 2' })
+			editor.createPage({ name: 'Page 3' })
+		})
+
+		await pageMenu.pagemenuButton.click()
+		await expect(pageMenu.pageItems).toHaveCount(3)
+
+		const autoFitHeight = PAGE_MENU_ITEM_HEIGHT * 3 + LIST_BOTTOM_PADDING
+		await expectPageMenuListHeight(pageMenu.pageList, autoFitHeight)
+
+		await dragPageMenuResizeHandle(page, 120)
+		await expect
+			.poll(async () => getPageMenuListHeight(pageMenu.pageList))
+			.toBeGreaterThan(autoFitHeight)
+
+		await dragPageMenuResizeHandle(page, -300)
+		await expectPageMenuListHeight(pageMenu.pageList, MIN_PAGE_MENU_LIST_HEIGHT)
+
+		await dragPageMenuResizeHandle(page, 120)
+		await page.locator('.tlui-page-menu__resize-handle').dblclick()
+		await expectPageMenuListHeight(pageMenu.pageList, autoFitHeight)
+	})
+
 	test('You can change pages', async ({ page, pageMenu }) => {
 		const { pagemenuButton, pageItems } = pageMenu
 

assets/translations/main.json

@@ -332,6 +332,7 @@
 	"context-menu.reorder": "Reorder",
 	"page-menu.title": "Pages",
 	"page-menu.create-new-page": "Create new page",
+	"page-menu.max-pages-reached": "Maximum pages reached",
 	"page-menu.new-page-initial-name": "Page 1",
 	"page-menu.edit-start": "Edit",
 	"page-menu.edit-done": "Done",

packages/tldraw/api-report.api.md

@@ -813,27 +813,41 @@
 
 .tlui-page-menu__list__content {
 	position: relative;
+	overflow: hidden;
 }
 
 .tlui-page-menu__resize-handle {
 	flex: 0 0 auto;
 	position: relative;
-	height: 7px;
-	margin-bottom: -3px;
+	height: 1px;
 	cursor: ns-resize;
 	touch-action: none;
+	background: var(--tl-color-divider);
+	transition: background-color ease-in-out 150ms 80ms;
 	z-index: 999;
 }
 
+/* Hit test area */
+.tlui-page-menu__resize-handle::after {
+	content: '';
+	position: absolute;
+	inset: -4px 0;
+	background: none;
+	z-index: 2000;
+	pointer-events: all;
+}
+
+/* Thick blue indicator */
 .tlui-page-menu__resize-handle::before {
 	content: '';
 	position: absolute;
-	top: 3px;
+	top: 0;
 	left: 0;
 	right: 0;
-	height: 1px;
-	background: var(--tl-color-divider);
-	transition: background-color 100ms;
+	height: 1.5px;
+	background: transparent;
+	pointer-events: none;
+	z-index: 2001;
 }
 
 .tlui-page-menu__resize-handle[data-resizing='true']::before {

packages/tldraw/src/lib/ui.css

@@ -26,15 +26,13 @@ import { PageItemInput } from './PageItemInput'
 import { PageItemSubmenu } from './PageItemSubmenu'
 
 const PAGE_MENU_LIST_HEIGHT_KEY = 'tldraw_page_menu_list_height'
-const MIN_PAGE_MENU_LIST_HEIGHT = 54
 const MAX_PAGE_MENU_RENDER_HEIGHT = 800
-// Bottom padding included in the absolutely-positioned content stack — so the
-// auto-fit list height should mirror it.
-const PAGE_MENU_LIST_CONTENT_BOTTOM_PADDING = 4
+const LIST_BOTTOM_PADDING = 4
 const MAX_PAGE_MENU_AVAILABLE_HEIGHT_RATIO = 0.62
 const PAGE_MENU_CREATE_BUTTON_HEIGHT = 40
-const PAGE_MENU_RESIZE_HANDLE_HEIGHT = 7
+const PAGE_MENU_RESIZE_HANDLE_HEIGHT = 1
 const PAGE_MENU_ITEM_HEIGHT = 36
+const MIN_PAGE_MENU_LIST_HEIGHT = PAGE_MENU_ITEM_HEIGHT + LIST_BOTTOM_PADDING
 const PAGE_MENU_DRAG_THRESHOLD = 5
 const PAGE_MENU_AUTO_SCROLL_ZONE = 16
 const PAGE_MENU_AUTO_SCROLL_RAMP_DISTANCE = 48
@@ -53,17 +51,22 @@ function readSavedPageMenuListHeight(): number | null {
 	}
 }
 
-function getPageMenuRenderCap(availableHeight: number, hasFooter: boolean): number {
+function getPageMenuRenderCap(availableHeight: number): number {
 	const maxMenuHeight = Math.min(
 		MAX_PAGE_MENU_RENDER_HEIGHT,
 		availableHeight * MAX_PAGE_MENU_AVAILABLE_HEIGHT_RATIO
 	)
-	const footerHeight = hasFooter
-		? PAGE_MENU_CREATE_BUTTON_HEIGHT + PAGE_MENU_RESIZE_HANDLE_HEIGHT
-		: 0
+	const footerHeight = PAGE_MENU_CREATE_BUTTON_HEIGHT + PAGE_MENU_RESIZE_HANDLE_HEIGHT
 	return Math.max(MIN_PAGE_MENU_LIST_HEIGHT, maxMenuHeight - footerHeight)
 }
 
+function getPageMenuAutoFitListHeight(pageCount: number): number {
+	return Math.max(
+		MIN_PAGE_MENU_LIST_HEIGHT,
+		pageCount * PAGE_MENU_ITEM_HEIGHT + LIST_BOTTOM_PADDING
+	)
+}
+
 /** @public @react */
 export const DefaultPageMenu = memo(function DefaultPageMenu() {
 	const editor = useEditor()
@@ -149,10 +152,13 @@ export const DefaultPageMenu = memo(function DefaultPageMenu() {
 		editor.timers.requestAnimationFrame(updateAvailableHeight)
 	}, [editor, isOpen, updateAvailableHeight])
 
-	const renderCap = getPageMenuRenderCap(availableHeight, !isReadonlyMode)
-	const autoFitListHeight =
-		pages.length * PAGE_MENU_ITEM_HEIGHT + PAGE_MENU_LIST_CONTENT_BOTTOM_PADDING
+	const renderCap = getPageMenuRenderCap(availableHeight)
+	const autoFitListHeight = getPageMenuAutoFitListHeight(pages.length)
 	const renderedListHeight = Math.min(userListHeight ?? autoFitListHeight, renderCap)
+	const hasReachedMaxPages = pages.length >= editor.options.maxPages
+	const createPageButtonLabel = msg(
+		hasReachedMaxPages ? 'page-menu.max-pages-reached' : 'page-menu.create-new-page'
+	)
 
 	const handleResizePointerDown = useCallback((e: React.PointerEvent<HTMLDivElement>) => {
 		e.preventDefault()
@@ -537,7 +543,7 @@ export const DefaultPageMenu = memo(function DefaultPageMenu() {
 						<div
 							className="tlui-page-menu__list__content"
 							data-dragging={dragState !== null}
-							style={{ height: PAGE_MENU_ITEM_HEIGHT * pages.length + 4 }}
+							style={{ height: autoFitListHeight }}
 						>
 							{pages.map((page, index) => {
 								const isCurrentPage = page.id === currentPage.id
@@ -678,20 +684,18 @@ export const DefaultPageMenu = memo(function DefaultPageMenu() {
 						aria-orientation="horizontal"
 						aria-label={msg('page-menu.resize')}
 					/>
-					{!isReadonlyMode && (
-						<TldrawUiButton
-							type="menu"
-							className="tlui-page-menu__create-button"
-							data-testid="page-menu.create"
-							tooltip={msg('page-menu.create-new-page')}
-							title={msg('page-menu.create-new-page')}
-							disabled={pages.length >= editor.options.maxPages}
-							onClick={handleCreatePageClick}
-						>
-							<TldrawUiButtonLabel>{msg('page-menu.create-new-page')}</TldrawUiButtonLabel>
-							<TldrawUiButtonIcon icon="plus" small />
-						</TldrawUiButton>
-					)}
+					<TldrawUiButton
+						type="menu"
+						className="tlui-page-menu__create-button"
+						data-testid="page-menu.create"
+						tooltip={createPageButtonLabel}
+						title={createPageButtonLabel}
+						disabled={isReadonlyMode || hasReachedMaxPages}
+						onClick={handleCreatePageClick}
+					>
+						<TldrawUiButtonLabel>{createPageButtonLabel}</TldrawUiButtonLabel>
+						{!hasReachedMaxPages && <TldrawUiButtonIcon icon="plus" small />}
+					</TldrawUiButton>
 				</div>
 			</TldrawUiPopoverContent>
 		</TldrawUiPopover>

packages/tldraw/src/lib/ui/components/PageMenu/DefaultPageMenu.tsx

@@ -336,6 +336,7 @@ export type TLUiTranslationKey =
 	| 'context-menu.reorder'
 	| 'page-menu.title'
 	| 'page-menu.create-new-page'
+	| 'page-menu.max-pages-reached'
 	| 'page-menu.new-page-initial-name'
 	| 'page-menu.edit-start'
 	| 'page-menu.edit-done'

packages/tldraw/src/lib/ui/hooks/useTranslation/TLUiTranslationKey.ts

@@ -337,6 +337,7 @@ export const DEFAULT_TRANSLATION = {
 	'context-menu.reorder': 'Reorder',
 	'page-menu.title': 'Pages',
 	'page-menu.create-new-page': 'Create new page',
+	'page-menu.max-pages-reached': 'Maximum pages reached',
 	'page-menu.new-page-initial-name': 'Page 1',
 	'page-menu.edit-start': 'Edit',
 	'page-menu.edit-done': 'Done',