fix(editor): arrowhead picker overflowing viewport (#10943)

packages/excalidraw/components/IconPicker.scss

@@ -8,7 +8,6 @@
     border: 0 solid color.adjust(#fff, $alpha: -0.75);
     box-shadow: var(--shadow-island-stronger);
     border-radius: 4px;
-    position: absolute;
     :root[dir="rtl"] & {
       padding: 0.4rem;
     }

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 { useEditorInterface, useExcalidrawContainer } from "./App";
+import { useExcalidrawContainer } from "./App";
 
 import "./IconPicker.scss";
 
@@ -79,7 +79,6 @@ function Picker<T>({
   onChange: (value: T) => void;
   onClose: () => void;
 }) {
-  const editorInterface = useEditorInterface();
   const { container } = useExcalidrawContainer();
   const [showMoreOptions, setShowMoreOptions] = useAtom(moreOptionsAtom);
   const allSections = [...visibleSections, ...hiddenSections];
@@ -248,22 +247,19 @@ function Picker<T>({
       ),
     );
 
-  const isMobile = editorInterface.formFactor === "phone";
-
   return (
     <Popover.Content
-      side={isMobile ? "right" : "bottom"}
-      align="start"
-      sideOffset={isMobile ? 8 : 12}
-      style={{ zIndex: "var(--zIndex-ui-styles-popup)" }}
-      onKeyDown={handleKeyDown}
-      collisionBoundary={container ?? undefined}
-    >
-      <div
-        className={`picker`}
+      className="picker"
       role="dialog"
       aria-modal="true"
       aria-label={label}
+      side={"bottom"}
+      align="start"
+      sideOffset={12}
+      alignOffset={12}
+      style={{ zIndex: "var(--zIndex-ui-styles-popup)" }}
+      onKeyDown={handleKeyDown}
+      collisionBoundary={container ?? undefined}
     >
       <div className="picker-sections">
         {renderSections(visibleSections)}
@@ -283,7 +279,6 @@ function Picker<T>({
           </Collapsible>
         )}
       </div>
-      </div>
     </Popover.Content>
   );
 }