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,41 +247,37 @@ function Picker<T>({
       ),
     );
 
-  const isMobile = editorInterface.formFactor === "phone";
-
   return (
     <Popover.Content
-      side={isMobile ? "right" : "bottom"}
+      className="picker"
+      role="dialog"
+      aria-modal="true"
+      aria-label={label}
+      side={"bottom"}
       align="start"
-      sideOffset={isMobile ? 8 : 12}
+      sideOffset={12}
+      alignOffset={12}
       style={{ zIndex: "var(--zIndex-ui-styles-popup)" }}
       onKeyDown={handleKeyDown}
       collisionBoundary={container ?? undefined}
     >
-      <div
+      <div className="picker-sections">
-        className={`picker`}
+        {renderSections(visibleSections)}
-        role="dialog"
-        aria-modal="true"
-        aria-label={label}
-      >
-        <div className="picker-sections">
-          {renderSections(visibleSections)}
 
-          {hiddenSections.length > 0 && (
+        {hiddenSections.length > 0 && (
-            <Collapsible
+          <Collapsible
-              label={t("labels.more_options")}
+            label={t("labels.more_options")}
-              open={showMoreOptions}
+            open={showMoreOptions}
-              openTrigger={() => {
+            openTrigger={() => {
-                setShowMoreOptions((value) => !value);
+              setShowMoreOptions((value) => !value);
-              }}
+            }}
-              className="picker-collapsible"
+            className="picker-collapsible"
-            >
+          >
-              <div className="picker-sections">
+            <div className="picker-sections">
-                {renderSections(hiddenSections)}
+              {renderSections(hiddenSections)}
-              </div>
+            </div>
-            </Collapsible>
+          </Collapsible>
-          )}
+        )}
-        </div>
       </div>
     </Popover.Content>
   );