tldraw 3.16.0-canary.5dac57cf9465 → 3.16.0-canary.5f82fb812214

package/src/lib/ui/components/Toolbar/DefaultImageToolbarContent.tsx

@@ -22,7 +22,6 @@ import {
 import { useActions } from '../../context/actions'
 import { useUiEvents } from '../../context/events'
 import { useTranslation } from '../../hooks/useTranslation/useTranslation'
-import { TldrawUiButton } from '../primitives/Button/TldrawUiButton'
 import { TldrawUiButtonIcon } from '../primitives/Button/TldrawUiButtonIcon'
 import { TldrawUiButtonLabel } from '../primitives/Button/TldrawUiButtonLabel'
 import {
@@ -32,6 +31,7 @@ import {
 	TldrawUiDropdownMenuTrigger,
 } from '../primitives/TldrawUiDropdownMenu'
 import { TldrawUiSlider } from '../primitives/TldrawUiSlider'
+import { TldrawUiToolbarButton } from '../primitives/TldrawUiToolbar'
 
 /** @public */
 export interface DefaultImageToolbarContentProps {
@@ -226,9 +226,13 @@ export const DefaultImageToolbarContent = track(function DefaultImageToolbarCont
 				/>
 				<TldrawUiDropdownMenuRoot id="image-toolbar-aspect-ratio">
 					<TldrawUiDropdownMenuTrigger>
-						<TldrawUiButton title={msg('tool.aspect-ratio')} type="icon">
+						<TldrawUiToolbarButton
+							title={msg('tool.aspect-ratio')}
+							type="icon"
+							data-testid="tool.image-aspect-ratio"
+						>
 							<TldrawUiButtonIcon icon="corners" />
-						</TldrawUiButton>
+						</TldrawUiToolbarButton>
 					</TldrawUiDropdownMenuTrigger>
 					<TldrawUiDropdownMenuContent side="top" align="center">
 						{ASPECT_RATIO_OPTIONS.map((aspectRatio) => {
@@ -268,14 +272,15 @@ export const DefaultImageToolbarContent = track(function DefaultImageToolbarCont
 						})}
 					</TldrawUiDropdownMenuContent>
 				</TldrawUiDropdownMenuRoot>
-				<TldrawUiButton
+				<TldrawUiToolbarButton
 					type="icon"
 					onClick={onManipulatingEnd}
-					data-testid="tool.image-confirm"
-					style={{ borderLeft: '1px solid var(--color-divider)', marginLeft: '2px' }}
+					data-testid="tool.image-crop-confirm"
+					style={{ borderLeft: '1px solid var(--tl-color-divider)', marginLeft: '2px' }}
+					title={msg('tool.image-crop-confirm')}
 				>
 					<TldrawUiButtonIcon small icon="check" />
-				</TldrawUiButton>
+				</TldrawUiToolbarButton>
 			</>
 		)
 	}
@@ -283,33 +288,45 @@ export const DefaultImageToolbarContent = track(function DefaultImageToolbarCont
 	return (
 		<>
 			{!isReadonly && (
-				<TldrawUiButton type="icon" title={msg('tool.replace-media')} onClick={handleImageReplace}>
+				<TldrawUiToolbarButton
+					type="icon"
+					data-testid="tool.image-replace"
+					onClick={handleImageReplace}
+					title={msg('tool.replace-media')}
+				>
 					<TldrawUiButtonIcon small icon="tool-media" />
-				</TldrawUiButton>
+				</TldrawUiToolbarButton>
 			)}
 			{!isReadonly && (
-				<TldrawUiButton type="icon" title={msg('tool.image-crop')} onClick={onManipulatingStart}>
+				<TldrawUiToolbarButton
+					type="icon"
+					title={msg('tool.image-crop')}
+					onClick={onManipulatingStart}
+					data-testid="tool.image-crop"
+				>
 					<TldrawUiButtonIcon small icon="crop" />
-				</TldrawUiButton>
+				</TldrawUiToolbarButton>
 			)}
-			<TldrawUiButton
+			<TldrawUiToolbarButton
 				type="icon"
 				title={msg('action.download-original')}
 				onClick={handleImageDownload}
+				data-testid="tool.image-download"
 			>
 				<TldrawUiButtonIcon small icon="download" />
-			</TldrawUiButton>
+			</TldrawUiToolbarButton>
 			{(altText || !isReadonly) && (
-				<TldrawUiButton
-					type="normal"
+				<TldrawUiToolbarButton
+					type="icon"
 					title={msg('tool.media-alt-text')}
+					data-testid="tool.image-alt-text"
 					onClick={() => {
 						trackEvent('alt-text-start', { source })
 						onEditAltTextStart()
 					}}
 				>
 					<TldrawUiButtonIcon small icon="alt" />
-				</TldrawUiButton>
+				</TldrawUiToolbarButton>
 			)}
 		</>
 	)

package/src/lib/ui/components/Toolbar/DefaultToolbar.tsx

@@ -1,4 +1,5 @@
 import { useEditor, usePassThroughWheelEvents, useValue } from '@tldraw/editor'
+import classNames from 'classnames'
 import { ReactNode, memo, useRef } from 'react'
 import { PORTRAIT_BREAKPOINT } from '../../constants'
 import { useBreakpoint } from '../../context/breakpoints'
@@ -6,6 +7,7 @@ import { useTldrawUiComponents } from '../../context/components'
 import { useReadonly } from '../../hooks/useReadonly'
 import { useTranslation } from '../../hooks/useTranslation/useTranslation'
 import { MobileStylePanel } from '../MobileStylePanel'
+import { TldrawUiOrientationProvider } from '../primitives/layout'
 import { TldrawUiToolbar } from '../primitives/TldrawUiToolbar'
 import { DefaultToolbarContent } from './DefaultToolbarContent'
 import { OverflowingToolbar } from './OverflowingToolbar'
@@ -14,6 +16,11 @@ import { ToggleToolLockedButton } from './ToggleToolLockedButton'
 /** @public */
 export interface DefaultToolbarProps {
 	children?: ReactNode
+	orientation?: 'horizontal' | 'vertical'
+	minItems?: number
+	minSizePx?: number
+	maxItems?: number
+	maxSizePx?: number
 }
 
 /**
@@ -24,7 +31,14 @@ export interface DefaultToolbarProps {
  * @public
  * @react
  */
-export const DefaultToolbar = memo(function DefaultToolbar({ children }: DefaultToolbarProps) {
+export const DefaultToolbar = memo(function DefaultToolbar({
+	children,
+	orientation = 'horizontal',
+	minItems = 4,
+	minSizePx = 310,
+	maxItems = 8,
+	maxSizePx = 470,
+}: DefaultToolbarProps) {
 	const editor = useEditor()
 	const msg = useTranslation()
 	const breakpoint = useBreakpoint()
@@ -44,32 +58,49 @@ export const DefaultToolbar = memo(function DefaultToolbar({ children }: Default
 				: breakpoint < PORTRAIT_BREAKPOINT.TABLET
 
 	return (
-		<div ref={ref} className="tlui-main-toolbar">
-			<div className="tlui-main-toolbar__inner">
-				<div className="tlui-main-toolbar__left">
-					{!isReadonlyMode && (
-						<div className="tlui-main-toolbar__extras">
-							{showQuickActions && (
-								<TldrawUiToolbar
-									orientation="horizontal"
-									className="tlui-main-toolbar__extras__controls"
-									label={msg('actions-menu.title')}
-								>
-									{QuickActions && <QuickActions />}
-									{ActionsMenu && <ActionsMenu />}
-								</TldrawUiToolbar>
-							)}
-							<ToggleToolLockedButton activeToolId={activeToolId} />
+		<TldrawUiOrientationProvider
+			orientation={orientation}
+			tooltipSide={orientation === 'horizontal' ? 'top' : 'right'}
+		>
+			<div
+				ref={ref}
+				className={classNames('tlui-main-toolbar', `tlui-main-toolbar--${orientation}`)}
+			>
+				<div className="tlui-main-toolbar__inner">
+					<div className="tlui-main-toolbar__left">
+						{!isReadonlyMode && (
+							<div className="tlui-main-toolbar__extras">
+								{showQuickActions && (
+									<TldrawUiToolbar
+										orientation={orientation}
+										className="tlui-main-toolbar__extras__controls"
+										label={msg('actions-menu.title')}
+									>
+										{QuickActions && <QuickActions />}
+										{ActionsMenu && <ActionsMenu />}
+									</TldrawUiToolbar>
+								)}
+								<ToggleToolLockedButton activeToolId={activeToolId} />
+							</div>
+						)}
+						<OverflowingToolbar
+							orientation={orientation}
+							sizingParentClassName="tlui-main-toolbar"
+							minItems={minItems}
+							maxItems={maxItems}
+							minSizePx={minSizePx}
+							maxSizePx={maxSizePx}
+						>
+							{children ?? <DefaultToolbarContent />}
+						</OverflowingToolbar>
+					</div>
+					{breakpoint < PORTRAIT_BREAKPOINT.TABLET_SM && !isReadonlyMode && (
+						<div className="tlui-main-toolbar__tools tlui-main-toolbar__mobile-style-panel">
+							<MobileStylePanel />
 						</div>
 					)}
-					<OverflowingToolbar>{children ?? <DefaultToolbarContent />}</OverflowingToolbar>
 				</div>
-				{breakpoint < PORTRAIT_BREAKPOINT.TABLET_SM && !isReadonlyMode && (
-					<div className="tlui-main-toolbar__tools">
-						<MobileStylePanel />
-					</div>
-				)}
 			</div>
-		</div>
+		</TldrawUiOrientationProvider>
 	)
 })

package/src/lib/ui/components/Toolbar/DefaultVideoToolbarContent.tsx

@@ -5,6 +5,7 @@ import { useUiEvents } from '../../context/events'
 import { useTranslation } from '../../hooks/useTranslation/useTranslation'
 import { TldrawUiButton } from '../primitives/Button/TldrawUiButton'
 import { TldrawUiButtonIcon } from '../primitives/Button/TldrawUiButtonIcon'
+import { TldrawUiToolbarButton } from '../primitives/TldrawUiToolbar'
 
 /** @public */
 export interface DefaultVideoToolbarContentProps {
@@ -44,7 +45,12 @@ export const DefaultVideoToolbarContent = track(function DefaultVideoToolbarCont
 	return (
 		<>
 			{!isReadonly && (
-				<TldrawUiButton type="icon" title={msg('tool.replace-media')} onClick={handleVideoReplace}>
+				<TldrawUiButton
+					type="icon"
+					title={msg('tool.replace-media')}
+					onClick={handleVideoReplace}
+					data-testid="tool.video-replace"
+				>
 					<TldrawUiButtonIcon small icon="tool-media" />
 				</TldrawUiButton>
 			)}
@@ -52,21 +58,23 @@ export const DefaultVideoToolbarContent = track(function DefaultVideoToolbarCont
 				type="icon"
 				title={msg('action.download-original')}
 				onClick={handleVideoDownload}
+				data-testid="tool.video-download"
 			>
 				<TldrawUiButtonIcon small icon="download" />
 			</TldrawUiButton>
 			{(altText || !isReadonly) && (
-				<TldrawUiButton
-					type="normal"
+				<TldrawUiToolbarButton
+					type="icon"
 					isActive={!!altText}
 					title={msg('tool.media-alt-text')}
+					data-testid="tool.video-alt-text"
 					onClick={() => {
 						trackEvent('alt-text-start', { source })
 						onEditAltTextStart()
 					}}
 				>
 					<TldrawUiButtonIcon small icon="alt" />
-				</TldrawUiButton>
+				</TldrawUiToolbarButton>
 			)}
 		</>
 	)

package/src/lib/ui/components/Toolbar/LinkEditor.tsx

@@ -2,9 +2,9 @@ import { preventDefault, TiptapEditor, useEditor } from '@tldraw/editor'
 import { useEffect, useRef, useState } from 'react'
 import { useUiEvents } from '../../context/events'
 import { useTranslation } from '../../hooks/useTranslation/useTranslation'
-import { TldrawUiButton } from '../primitives/Button/TldrawUiButton'
 import { TldrawUiButtonIcon } from '../primitives/Button/TldrawUiButtonIcon'
 import { TldrawUiInput } from '../primitives/TldrawUiInput'
+import { TldrawUiToolbarButton } from '../primitives/TldrawUiToolbar'
 
 /** @public */
 export interface LinkEditorProps {
@@ -76,7 +76,7 @@ export function LinkEditor({ textEditor, value: initialValue, onClose }: LinkEdi
 				onCancel={handleLinkCancel}
 				placeholder="example.com"
 			/>
-			<TldrawUiButton
+			<TldrawUiToolbarButton
 				className="tlui-rich-text__toolbar-link-visit"
 				title={msg('tool.rich-text-link-visit')}
 				type="icon"
@@ -85,8 +85,8 @@ export function LinkEditor({ textEditor, value: initialValue, onClose }: LinkEdi
 				disabled={!value}
 			>
 				<TldrawUiButtonIcon small icon="external-link" />
-			</TldrawUiButton>
-			<TldrawUiButton
+			</TldrawUiToolbarButton>
+			<TldrawUiToolbarButton
 				className="tlui-rich-text__toolbar-link-remove"
 				title={msg('tool.rich-text-link-remove')}
 				data-testid="rich-text.link-remove"
@@ -95,7 +95,7 @@ export function LinkEditor({ textEditor, value: initialValue, onClose }: LinkEdi
 				onClick={handleRemoveLink}
 			>
 				<TldrawUiButtonIcon small icon="trash" />
-			</TldrawUiButton>
+			</TldrawUiToolbarButton>
 		</>
 	)
 }

package/src/lib/ui/components/Toolbar/OverflowingToolbar.tsx

@@ -1,5 +1,7 @@
 import {
 	activeElementShouldCaptureKeys,
+	assert,
+	modulate,
 	preventDefault,
 	tlmenus,
 	useEditor,
@@ -7,7 +9,7 @@ import {
 	useUniqueSafeId,
 } from '@tldraw/editor'
 import classNames from 'classnames'
-import { createContext, useEffect, useLayoutEffect, useMemo, useRef, useState } from 'react'
+import { createContext, useEffect, useLayoutEffect, useRef, useState } from 'react'
 import { PORTRAIT_BREAKPOINT } from '../../constants'
 import { useBreakpoint } from '../../context/breakpoints'
 import { areShortcutsDisabled } from '../../hooks/useKeyboardShortcuts'
@@ -20,7 +22,7 @@ import {
 	TldrawUiPopoverTrigger,
 } from '../primitives/TldrawUiPopover'
 import { TldrawUiToolbar, TldrawUiToolbarButton } from '../primitives/TldrawUiToolbar'
-import { TldrawUiRow } from '../primitives/layout'
+import { TldrawUiColumn, TldrawUiRow } from '../primitives/layout'
 import { TldrawUiMenuContextProvider } from '../primitives/menus/TldrawUiMenuContext'
 
 export const IsInOverflowContext = createContext(false)
@@ -41,10 +43,24 @@ const NUMBERED_SHORTCUT_KEYS: Record<string, number> = {
 /** @public */
 export interface OverflowingToolbarProps {
 	children: React.ReactNode
+	orientation: 'horizontal' | 'vertical'
+	sizingParentClassName: string
+	minItems: number
+	minSizePx: number
+	maxItems: number
+	maxSizePx: number
 }
 
 /** @public @react */
-export function OverflowingToolbar({ children }: OverflowingToolbarProps) {
+export function OverflowingToolbar({
+	children,
+	orientation,
+	sizingParentClassName,
+	minItems,
+	minSizePx,
+	maxItems,
+	maxSizePx,
+}: OverflowingToolbarProps) {
 	const editor = useEditor()
 	const id = useUniqueSafeId()
 	const breakpoint = useBreakpoint()
@@ -52,63 +68,165 @@ export function OverflowingToolbar({ children }: OverflowingToolbarProps) {
 	const rButtons = useRef<HTMLElement[]>([])
 	const [isOpen, setIsOpen] = useState(false)
 
-	const overflowIndex = Math.min(8, 5 + breakpoint)
-
-	const [totalItems, setTotalItems] = useState(0)
 	const mainToolsRef = useRef<HTMLDivElement>(null)
-	const [lastActiveOverflowItem, setLastActiveOverflowItem] = useState<string | null>(null)
 
-	const css = useMemo(() => {
-		const activeCss = lastActiveOverflowItem ? `:not([data-value="${lastActiveOverflowItem}"])` : ''
-
-		return `
-			#${id}_main > *:nth-of-type(n + ${overflowIndex + (lastActiveOverflowItem ? 1 : 2)}):not([data-radix-popper-content-wrapper])${activeCss} {
-				display: none;
-			}
-			#${id}_more > *:nth-of-type(-n + ${overflowIndex}):not([data-radix-popper-content-wrapper]) {
-				display: none;
-			}
-        `
-	}, [lastActiveOverflowItem, id, overflowIndex])
+	// we have to use state instead of a ref here so that we get
+	// an update when the overflow popover mounts / unmounts
+	const [overflowTools, setOverflowTools] = useState<HTMLDivElement | null>(null)
+	const [lastActiveOverflowItem, setLastActiveOverflowItem] = useState<string | null>(null)
+	const [shouldShowOverflow, setShouldShowOverflow] = useState(false)
 
 	const onDomUpdate = useEvent(() => {
 		if (!mainToolsRef.current) return
 
-		const children = Array.from(mainToolsRef.current.children)
-		setTotalItems(children.length)
+		// whenever we get an update, we need to re-calculate the number of items to show and update
+		// the component accordingly.
+		const sizeProp = orientation === 'horizontal' ? 'offsetWidth' : 'offsetHeight'
 
-		// If the last active overflow item is no longer in the overflow, clear it
-		const lastActiveElementIdx = children.findIndex(
-			(el) => el.getAttribute('data-value') === lastActiveOverflowItem
-		)
-		if (lastActiveElementIdx <= overflowIndex) {
-			setLastActiveOverflowItem(null)
+		// toolbars can contain both single items and groups. we need to keep track of both.
+		type Items = (
+			| { type: 'item'; element: HTMLElement }
+			| { type: 'group'; items: Items; element: HTMLElement }
+		)[]
+
+		// walk through the dom and collect items so we can calculate what to show/hide
+		const mainItems = collectItems(mainToolsRef.current.children)
+		const overflowItems = overflowTools ? collectItems(overflowTools.children) : null
+		function collectItems(collection: HTMLCollection) {
+			const items: Items = []
+			for (const child of collection) {
+				if (child.classList.contains('tlui-main-toolbar__group')) {
+					items.push({
+						type: 'group',
+						items: collectItems(child.children),
+						element: child as HTMLElement,
+					})
+				} else {
+					items.push({ type: 'item', element: child as HTMLElement })
+				}
+			}
+
+			return items
 		}
 
-		// But if there's a new active item...
-		const activeElementIdx = Array.from(mainToolsRef.current.children).findIndex(
-			(el) => el.getAttribute('aria-pressed') === 'true'
+		// the number of items to show is based on the space available to the toolbar.
+		const sizingParent = findParentWithClassName(mainToolsRef.current, sizingParentClassName)
+		const size = sizingParent[sizeProp]
+		const itemsToShow = Math.floor(
+			modulate(size, [minSizePx, maxSizePx], [minItems, maxItems], true)
 		)
-		if (activeElementIdx === -1) return
 
-		// ...and it's in the overflow, set it as the last active overflow item
-		if (activeElementIdx >= overflowIndex) {
-			setLastActiveOverflowItem(children[activeElementIdx].getAttribute('data-value'))
-		}
+		// now we know how many items to show, we need to walk through the items we found and show /
+		// hide them accordingly. We need to keep track of:
+		// the number of item's we've shown in the main content so far
+		let mainItemCount = 0
+		// the item that is currently active in the overflow content (if any)
+		let newActiveOverflowItem: string | null = null
+		// whether the last active overflow item is actually still in the overflow content
+		let shouldInvalidateLastActiveOverflowItem = false
+		// the buttons visible in the main content
+		const numberedButtons: HTMLButtonElement[] = []
+		function visitItems(
+			mainItems: Items,
+			overflowItems: Items | null
+		): {
+			// for each group of items we visit, we need to know whether we showed anything in
+			// either section
+			didShowAnyInMain: boolean
+			didShowAnyInOverflow: boolean
+		} {
+			if (overflowItems) assert(mainItems.length === overflowItems.length)
+
+			let didShowAnyInMain = false
+			let didShowAnyInOverflow = false
+
+			for (let i = 0; i < mainItems.length; i++) {
+				const mainItem = mainItems[i]
+				const overflowItem = overflowItems?.[i]
+
+				if (mainItem.type === 'item') {
+					const isLastActiveOverflowItem =
+						mainItem.element.getAttribute('data-value') === lastActiveOverflowItem
+
+					// for single items, we show them in main if we have space, or if they're the
+					// last-used item from the overflow.
+					let shouldShowInMain
+					if (lastActiveOverflowItem) {
+						shouldShowInMain = mainItemCount < itemsToShow || isLastActiveOverflowItem
+					} else {
+						// we use <= here because if there is no last active overflow item, we want
+						// to show at least one item in the main toolbar.
+						shouldShowInMain = mainItemCount <= itemsToShow
+					}
+					const shouldShowInOverflow = mainItemCount >= itemsToShow
 
-		// Save the buttons that are actually visible
-		rButtons.current = Array.from(mainToolsRef.current?.children ?? []).filter(
-			(el): el is HTMLElement => {
-				// only count html elements...
-				if (!(el instanceof HTMLElement)) return false
+					didShowAnyInMain ||= shouldShowInMain
+					didShowAnyInOverflow ||= shouldShowInOverflow
 
-				// ...that are buttons...
-				if (el.tagName.toLowerCase() !== 'button') return false
+					setAttribute(
+						mainItem.element,
+						'data-toolbar-visible',
+						shouldShowInMain ? 'true' : 'false'
+					)
+					if (overflowItem) {
+						assert(overflowItem.type === 'item')
+						setAttribute(
+							overflowItem.element,
+							'data-toolbar-visible',
+							shouldShowInOverflow ? 'true' : 'false'
+						)
+					}
+					if (shouldShowInOverflow && mainItem.element.getAttribute('aria-pressed') === 'true') {
+						newActiveOverflowItem = mainItem.element.getAttribute('data-value')
+					}
+					if (shouldShowInMain && mainItem.element.tagName === 'BUTTON') {
+						numberedButtons.push(mainItem.element as HTMLButtonElement)
+					}
+					if (!shouldShowInOverflow && isLastActiveOverflowItem) {
+						shouldInvalidateLastActiveOverflowItem = true
+					}
+					mainItemCount++
+				} else {
+					// for groups, we show them in main if we have space, or if they're the
+					// last-used item from the overflow.
+					let result, overflowGroup
+					if (overflowItem) {
+						assert(overflowItem.type === 'group')
+						overflowGroup = overflowItem
+						result = visitItems(mainItem.items, overflowGroup.items)
+					} else {
+						result = visitItems(mainItem.items, null)
+					}
 
-				// ...that are actually visible
-				return !!(el.offsetWidth || el.offsetHeight)
+					didShowAnyInMain ||= result.didShowAnyInMain
+					didShowAnyInOverflow ||= result.didShowAnyInOverflow
+
+					setAttribute(
+						mainItem.element,
+						'data-toolbar-visible',
+						result.didShowAnyInMain ? 'true' : 'false'
+					)
+					if (overflowGroup) {
+						setAttribute(
+							overflowGroup.element,
+							'data-toolbar-visible',
+							result.didShowAnyInOverflow ? 'true' : 'false'
+						)
+					}
+				}
 			}
-		)
+			return { didShowAnyInMain, didShowAnyInOverflow }
+		}
+
+		const { didShowAnyInOverflow } = visitItems(mainItems, overflowItems)
+		setShouldShowOverflow(didShowAnyInOverflow)
+		if (newActiveOverflowItem) {
+			setLastActiveOverflowItem(newActiveOverflowItem)
+		} else if (shouldInvalidateLastActiveOverflowItem) {
+			setLastActiveOverflowItem(null)
+		}
+
+		rButtons.current = numberedButtons
 	})
 
 	useLayoutEffect(() => {
@@ -122,20 +240,31 @@ export function OverflowingToolbar({ children }: OverflowingToolbarProps) {
 		mutationObserver.observe(mainToolsRef.current, {
 			childList: true,
 			subtree: true,
-			attributeFilter: ['data-value', 'aria-pressed'],
+			attributes: true,
+			characterData: true,
 		})
 
+		const sizingParent = findParentWithClassName(mainToolsRef.current, sizingParentClassName)
+		const resizeObserver = new ResizeObserver(onDomUpdate)
+		resizeObserver.observe(sizingParent)
+
 		return () => {
 			mutationObserver.disconnect()
+			resizeObserver.disconnect()
 		}
-	}, [onDomUpdate])
+	}, [onDomUpdate, sizingParentClassName])
 
 	useEffect(() => {
 		if (!editor.options.enableToolbarKeyboardShortcuts) return
 
 		function handleKeyDown(event: KeyboardEvent) {
-			if (areShortcutsDisabled(editor) || activeElementShouldCaptureKeys(true /* allow buttons */))
+			if (
+				areShortcutsDisabled(editor) ||
+				activeElementShouldCaptureKeys(true /* allow buttons */)
+			) {
 				return
+			}
+
 			// no accelerator keys
 			if (event.ctrlKey || event.metaKey || event.altKey || event.shiftKey) return
 			const index = NUMBERED_SHORTCUT_KEYS[event.key]
@@ -152,23 +281,23 @@ export function OverflowingToolbar({ children }: OverflowingToolbarProps) {
 	}, [editor])
 
 	const popoverId = 'toolbar overflow'
+
+	const Layout = orientation === 'horizontal' ? TldrawUiRow : TldrawUiColumn
 	return (
 		<>
-			<style nonce={editor.options.nonce}>{css}</style>
 			<TldrawUiToolbar
-				orientation="horizontal"
+				orientation={orientation}
 				className={classNames('tlui-main-toolbar__tools', {
 					'tlui-main-toolbar__tools__mobile': breakpoint < PORTRAIT_BREAKPOINT.TABLET_SM,
 				})}
 				label={msg('tool-panel.title')}
 			>
-				<TldrawUiRow id={`${id}_main`} ref={mainToolsRef}>
+				<Layout id={`${id}_main`} ref={mainToolsRef}>
 					<TldrawUiMenuContextProvider type="toolbar" sourceId="toolbar">
 						{children}
 					</TldrawUiMenuContextProvider>
-				</TldrawUiRow>
-				{/* There is a +1 because if the menu is just one item, it's not necessary. */}
-				{totalItems > overflowIndex + 1 && (
+				</Layout>
+				{shouldShowOverflow && (
 					<IsInOverflowContext.Provider value={true}>
 						<TldrawUiPopover id={popoverId} open={isOpen} onOpenChange={setIsOpen}>
 							<TldrawUiPopoverTrigger>
@@ -178,12 +307,19 @@ export function OverflowingToolbar({ children }: OverflowingToolbarProps) {
 									className="tlui-main-toolbar__overflow"
 									data-testid="tools.more-button"
 								>
-									<TldrawUiButtonIcon icon="chevron-up" />
+									<TldrawUiButtonIcon
+										icon={orientation === 'horizontal' ? 'chevron-up' : 'chevron-right'}
+									/>
 								</TldrawUiToolbarButton>
 							</TldrawUiPopoverTrigger>
-							<TldrawUiPopoverContent side="top" align="center">
+							<TldrawUiPopoverContent
+								side={orientation === 'horizontal' ? 'top' : 'right'}
+								align={orientation === 'horizontal' ? 'center' : 'end'}
+							>
 								<TldrawUiToolbar
 									orientation="grid"
+									className="tlui-main-toolbar__overflow-content"
+									ref={setOverflowTools}
 									data-testid="tools.more-content"
 									label={msg('tool-panel.more')}
 									id={`${id}_more`}
@@ -214,3 +350,19 @@ export const isActiveTLUiToolItem = (
 		? activeToolId === 'geo' && geoState === item.meta?.geo
 		: activeToolId === item.id
 }
+
+function findParentWithClassName(startingElement: HTMLElement, className: string): HTMLElement {
+	let element: HTMLElement | null = startingElement
+	while (element) {
+		if (element.classList.contains(className)) {
+			return element
+		}
+		element = element.parentElement
+	}
+	throw new Error('Could not find parent with class name ' + className)
+}
+
+function setAttribute(element: HTMLElement, name: string, value: string) {
+	if (element.getAttribute(name) === value) return
+	element.setAttribute(name, value)
+}