fix: Expose variable width on tablet UI

Signed-off-by: Mark Tolmacs <mark@lazycat.hu>

packages/excalidraw/actions/actionProperties.tsx

@@ -1,3 +1,5 @@
+import clsx from "clsx";
+
 import { pointFrom } from "@excalidraw/math";
 
 import { useEffect, useMemo, useRef, useState } from "react";
@@ -2063,44 +2065,70 @@ export const actionChangeStrokeShape = register<boolean>({
       captureUpdate: CaptureUpdateAction.IMMEDIATELY,
     };
   },
-  PanelComponent: ({ elements, appState, updateData, app }) => (
+  PanelComponent: ({ elements, appState, updateData, app }) => {
-    <fieldset>
+    const { isCompact } = getStylesPanelInfo(app);
-      <legend>{t("labels.strokeShape")}</legend>
+
-      <div className="buttonList">
+    const currentValue = getFormValue(
-        <RadioSelection
+      elements,
-          group="stroke-shape"
+      app,
-          options={[
+      (element) => {
-            {
+        if (isFreeDrawElement(element)) {
-              value: true,
+          return element.simulatePressure;
-              text: t("labels.strokeShape_constant"),
+        }
-              icon: FreedrawPressureConstantIcon,
+        return null;
-              testId: "strokeShape-constant",
+      },
-            },
+      (element) => isFreeDrawElement(element),
-            {
+      (hasSelection) =>
-              value: false,
+        hasSelection ? null : appState.currentItemFreedrawConstantPressure,
-              text: t("labels.strokeShape_pressure"),
+    );
-              icon: FreedrawPressureSensitiveIcon,
+
-              testId: "strokeShape-pressure",
+    if (isCompact) {
-            },
+      const isConstantPressure = currentValue !== false;
-          ]}
+      return (
-          value={getFormValue(
+        <button
-            elements,
+          type="button"
-            app,
+          className={clsx("compact-action-button", {
-            (element) => {
+            active: !isConstantPressure,
-              if (isFreeDrawElement(element)) {
+          })}
-                return element.simulatePressure;
+          title={
-              }
+            isConstantPressure
-              return null;
+              ? t("labels.strokeShape_constant")
-            },
+              : t("labels.strokeShape_pressure")
-            (element) => isFreeDrawElement(element),
+          }
-            (hasSelection) =>
+          onClick={() => updateData(!isConstantPressure)}
-              hasSelection
+        >
-                ? null
+          {isConstantPressure
-                : appState.currentItemFreedrawConstantPressure,
+            ? FreedrawPressureConstantIcon
-          )}
+            : FreedrawPressureSensitiveIcon}
-          onChange={(value) => updateData(value)}
+        </button>
-        />
+      );
-      </div>
+    }
-    </fieldset>
+
-  ),
+    return (
+      <fieldset>
+        <legend>{t("labels.strokeShape")}</legend>
+        <div className="buttonList">
+          <RadioSelection
+            group="stroke-shape"
+            options={[
+              {
+                value: true,
+                text: t("labels.strokeShape_constant"),
+                icon: FreedrawPressureConstantIcon,
+                testId: "strokeShape-constant",
+              },
+              {
+                value: false,
+                text: t("labels.strokeShape_pressure"),
+                icon: FreedrawPressureSensitiveIcon,
+                testId: "strokeShape-pressure",
+              },
+            ]}
+            value={currentValue}
+            onChange={(value) => updateData(value)}
+          />
+        </div>
+      </fieldset>
+    );
+  },
 });

packages/excalidraw/components/Actions.tsx

@@ -834,6 +834,14 @@ export const CompactShapeActions = ({
         container={container}
       />
 
+      {/* Stroke Shape Toggle (freedraw only) */}
+      {(appState.activeTool.type === "freedraw" ||
+        targetElements.some((element) => element.type === "freedraw")) && (
+        <div className="compact-action-item">
+          {renderAction("changeStrokeShape")}
+        </div>
+      )}
+
       <CombinedArrowProperties
         appState={appState}
         renderAction={renderAction}
@@ -969,6 +977,13 @@ export const MobileShapeActions = ({
           targetElements={targetElements}
           container={container}
         />
+        {/* Stroke Shape Toggle (freedraw only) */}
+        {(appState.activeTool.type === "freedraw" ||
+          targetElements.some((element) => element.type === "freedraw")) && (
+          <div className="compact-action-item">
+            {renderAction("changeStrokeShape")}
+          </div>
+        )}
         {/* Combined Arrow Properties */}
         <CombinedArrowProperties
           appState={appState}