fix: set radix PropertiesPopover collision boundary (#10221)

* Set collision boundary

* Calculate collisionPadding dynamically based on container

* Add appState offsetTop and offsetLeft to padding calculation.

Refactor collisionPadding calculation to use app state offsets.

* Update PropertiesPopover.tsx

* popover positioning relative to container

packages/excalidraw/components/IconPicker.tsx

@@ -8,7 +8,7 @@ import { atom, useAtom } from "../editor-jotai";
 import { getLanguage, t } from "../i18n";
 
 import Collapsible from "./Stats/Collapsible";
-import { useDevice } from "./App";
+import { useDevice, useExcalidrawContainer } from "./App";
 
 import "./IconPicker.scss";
 
@@ -39,6 +39,7 @@ function Picker<T>({
   numberOfOptionsToAlwaysShow?: number;
 }) {
   const device = useDevice();
+  const { container } = useExcalidrawContainer();
 
   const handleKeyDown = (event: React.KeyboardEvent) => {
     const pressedOption = options.find(
@@ -161,6 +162,7 @@ function Picker<T>({
       sideOffset={isMobile ? 8 : 12}
       style={{ zIndex: "var(--zIndex-ui-styles-popup)" }}
       onKeyDown={handleKeyDown}
+      collisionBoundary={container ?? undefined}
     >
       <div
         className={`picker`}

packages/excalidraw/components/PropertiesPopover.tsx

@@ -40,6 +40,8 @@ export const PropertiesPopover = React.forwardRef<
     ref,
   ) => {
     const device = useDevice();
+    const isMobilePortrait =
+      device.editor.isMobile && !device.viewport.isLandscape;
 
     return (
       <Popover.Portal container={container}>
@@ -47,18 +49,11 @@ export const PropertiesPopover = React.forwardRef<
           ref={ref}
           className={clsx("focus-visible-none", className)}
           data-prevent-outside-click
-          side={
-            device.editor.isMobile && !device.viewport.isLandscape
-              ? "bottom"
-              : "right"
-          }
-          align={
-            device.editor.isMobile && !device.viewport.isLandscape
-              ? "center"
-              : "start"
-          }
+          side={isMobilePortrait ? "bottom" : "right"}
+          align={isMobilePortrait ? "center" : "start"}
           alignOffset={-16}
           sideOffset={20}
+          collisionBoundary={container ?? undefined}
           style={{
             zIndex: "var(--zIndex-ui-styles-popup)",
             marginLeft: device.editor.isMobile ? "0.5rem" : undefined,

packages/excalidraw/components/ToolPopover.tsx

@@ -11,6 +11,8 @@ import { ToolButton } from "./ToolButton";
 
 import "./ToolPopover.scss";
 
+import { useExcalidrawContainer } from "./App";
+
 import type { AppClassProperties } from "../types";
 
 type ToolOption = {
@@ -50,6 +52,7 @@ export const ToolPopover = ({
   const currentType = activeTool.type;
   const isActive = displayedOption.type === currentType;
   const SIDE_OFFSET = 32 / 2 + 10;
+  const { container } = useExcalidrawContainer();
 
   // if currentType is not in options, close popup
   if (!options.some((o) => o.type === currentType) && isPopupOpen) {
@@ -90,6 +93,7 @@ export const ToolPopover = ({
       <Popover.Content
         className="tool-popover-content"
         sideOffset={SIDE_OFFSET}
+        collisionBoundary={container ?? undefined}
       >
         {options.map(({ type, icon, title }) => (
           <ToolButton