From 62be53845e889703f0ccb9908e8db438479e33aa Mon Sep 17 00:00:00 2001
From: Ryan Di <ryan.weihao.di@gmail.com>
Date: Fri, 19 Sep 2025 13:55:42 +1000
Subject: [PATCH] include mobile

---
 .../excalidraw/actions/actionProperties.tsx   | 47 ++++++++++---------
 1 file changed, 26 insertions(+), 21 deletions(-)

diff --git a/packages/excalidraw/actions/actionProperties.tsx b/packages/excalidraw/actions/actionProperties.tsx
index c03309e9c..229b49253 100644
--- a/packages/excalidraw/actions/actionProperties.tsx
+++ b/packages/excalidraw/actions/actionProperties.tsx
@@ -348,7 +348,10 @@ export const actionChangeStrokeColor = register({
         elements={elements}
         appState={appState}
         updateData={updateData}
-        compactMode={appState.stylesPanelMode === "compact"}
+        compactMode={
+          appState.stylesPanelMode === "compact" ||
+          appState.stylesPanelMode === "mobile"
+        }
       />
     </>
   ),
@@ -428,7 +431,10 @@ export const actionChangeBackgroundColor = register({
         elements={elements}
         appState={appState}
         updateData={updateData}
-        compactMode={appState.stylesPanelMode === "compact"}
+        compactMode={
+          appState.stylesPanelMode === "compact" ||
+          appState.stylesPanelMode === "mobile"
+        }
       />
     </>
   ),
@@ -531,9 +537,7 @@ export const actionChangeStrokeWidth = register({
   },
   PanelComponent: ({ elements, appState, updateData, app, data }) => (
     <fieldset>
-      {appState.stylesPanelMode === "full" && (
-        <legend>{t("labels.strokeWidth")}</legend>
-      )}
+      <legend>{t("labels.strokeWidth")}</legend>
       <div className="buttonList">
         <RadioSelection
           group="stroke-width"
@@ -590,9 +594,7 @@ export const actionChangeSloppiness = register({
   },
   PanelComponent: ({ elements, appState, updateData, app, data }) => (
     <fieldset>
-      {appState.stylesPanelMode === "full" && (
-        <legend>{t("labels.sloppiness")}</legend>
-      )}
+      <legend>{t("labels.sloppiness")}</legend>
       <div className="buttonList">
         <RadioSelection
           group="sloppiness"
@@ -645,9 +647,7 @@ export const actionChangeStrokeStyle = register({
   },
   PanelComponent: ({ elements, appState, updateData, app, data }) => (
     <fieldset>
-      {appState.stylesPanelMode === "full" && (
-        <legend>{t("labels.strokeStyle")}</legend>
-      )}
+      <legend>{t("labels.strokeStyle")}</legend>
       <div className="buttonList">
         <RadioSelection
           group="strokeStyle"
@@ -776,7 +776,8 @@ export const actionChangeFontSize = register({
           onChange={(value) => {
             withCaretPositionPreservation(
               () => updateData(value),
-              appState.stylesPanelMode === "compact",
+              appState.stylesPanelMode === "compact" ||
+                appState.stylesPanelMode === "mobile",
               !!appState.editingTextElement,
               data?.onPreventClose,
             );
@@ -1040,7 +1041,7 @@ export const actionChangeFontFamily = register({
 
     return result;
   },
-  PanelComponent: ({ elements, appState, app, updateData, data }) => {
+  PanelComponent: ({ elements, appState, app, updateData }) => {
     const cachedElementsRef = useRef<ElementsMap>(new Map());
     const prevSelectedFontFamilyRef = useRef<number | null>(null);
     // relying on state batching as multiple `FontPicker` handlers could be called in rapid succession and we want to combine them
@@ -1117,7 +1118,7 @@ export const actionChangeFontFamily = register({
     }, []);
 
     return (
-      <fieldset>
+      <>
         {appState.stylesPanelMode === "full" && (
           <legend>{t("labels.fontFamily")}</legend>
         )}
@@ -1125,7 +1126,7 @@ export const actionChangeFontFamily = register({
           isOpened={appState.openPopup === "fontFamily"}
           selectedFontFamily={selectedFontFamily}
           hoveredFontFamily={appState.currentHoveredFontFamily}
-          compactMode={appState.stylesPanelMode === "compact"}
+          compactMode={appState.stylesPanelMode !== "full"}
           onSelect={(fontFamily) => {
             withCaretPositionPreservation(
               () => {
@@ -1137,7 +1138,8 @@ export const actionChangeFontFamily = register({
                 // defensive clear so immediate close won't abuse the cached elements
                 cachedElementsRef.current.clear();
               },
-              appState.stylesPanelMode === "compact",
+              appState.stylesPanelMode === "compact" ||
+                appState.stylesPanelMode === "mobile",
               !!appState.editingTextElement,
             );
           }}
@@ -1213,7 +1215,8 @@ export const actionChangeFontFamily = register({
 
               // Refocus text editor when font picker closes if we were editing text
               if (
-                appState.stylesPanelMode === "compact" &&
+                (appState.stylesPanelMode === "compact" ||
+                  appState.stylesPanelMode === "mobile") &&
                 appState.editingTextElement
               ) {
                 restoreCaretPosition(null); // Just refocus without saved position
@@ -1221,7 +1224,7 @@ export const actionChangeFontFamily = register({
             }
           }}
         />
-      </fieldset>
+      </>
     );
   },
 });
@@ -1314,7 +1317,8 @@ export const actionChangeTextAlign = register({
             onChange={(value) => {
               withCaretPositionPreservation(
                 () => updateData(value),
-                appState.stylesPanelMode === "compact",
+                appState.stylesPanelMode === "compact" ||
+                  appState.stylesPanelMode === "mobile",
                 !!appState.editingTextElement,
                 data?.onPreventClose,
               );
@@ -1413,7 +1417,8 @@ export const actionChangeVerticalAlign = register({
             onChange={(value) => {
               withCaretPositionPreservation(
                 () => updateData(value),
-                appState.stylesPanelMode === "compact",
+                appState.stylesPanelMode === "compact" ||
+                  appState.stylesPanelMode === "mobile",
                 !!appState.editingTextElement,
                 data?.onPreventClose,
               );
@@ -1678,8 +1683,8 @@ export const actionChangeArrowProperties = register({
   PanelComponent: ({ elements, appState, updateData, app, renderAction }) => {
     return (
       <div className="selected-shape-actions">
-        {renderAction("changeArrowType")}
         {renderAction("changeArrowhead")}
+        {renderAction("changeArrowType")}
       </div>
     );
   },