fix scrolling menus (#977)

* attempt to fix scrolling menus

* add container to keyboard shortuts

Co-authored-by: Judicael <46365844+judicaelandria@users.noreply.github.com>

packages/core/src/components/Canvas/Canvas.tsx

@@ -84,7 +84,7 @@ function _Canvas<T extends TLShape, M extends Record<string, unknown>>({
 
   rZoomRef.current = pageState.camera.zoom
 
-  useZoomEvents(rZoomRef, externalContainerRef || rCanvas)
+  useZoomEvents(rZoomRef, rCanvas)
 
   useResizeObserver(rCanvas, onBoundsChange)
 

packages/tldraw/src/components/Primitives/DropdownMenu/DMContent.tsx

@@ -29,7 +29,7 @@ export function DMContent({
   const container = useContainer()
 
   return (
-    <DropdownMenu.Portal container={overflow ? undefined : container.current} dir="ltr">
+    <DropdownMenu.Portal container={container.current} dir="ltr">
       <DropdownMenu.Content
         align={align}
         alignOffset={alignOffset}

packages/tldraw/src/components/ToolsPanel/KeyboardShortcutDialog.tsx

@@ -6,6 +6,7 @@ import { IconButton } from '~components/Primitives/IconButton'
 import { Kbd } from '~components/Primitives/Kbd'
 import { RowButton } from '~components/Primitives/RowButton'
 import { breakpoints } from '~components/breakpoints'
+import { useContainer } from '~hooks'
 import { styled } from '~styles'
 
 export function KeyboardShortcutDialog({
@@ -14,6 +15,7 @@ export function KeyboardShortcutDialog({
   onOpenChange?: (open: boolean) => void
 }) {
   const intl = useIntl()
+  const container = useContainer()
 
   const shortcuts = {
     Tools: [
@@ -89,7 +91,7 @@ export function KeyboardShortcutDialog({
           <FormattedMessage id="keyboard.shortcuts" />
         </RowButton>
       </Dialog.Trigger>
-      <Dialog.Portal>
+      <Dialog.Portal container={container.current}>
         <DialogOverlay />
         <DialogContent>
           <DialogTitle>