@cosxai/ui 0.13.3 → 0.13.5

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@cosxai/ui",
-  "version": "0.13.3",
+  "version": "0.13.5",
   "description": "COSX design system — React 19 component primitives shared across product-meta and other consumers",
   "license": "UNLICENSED",
   "type": "module",

package/src/primitives/SignaturePad.tsx

@@ -380,13 +380,24 @@ export const SignaturePad = forwardRef<SignaturePadHandle, SignaturePadProps>(
         display: "flex",
         flexDirection: "column",
         gap: 8,
+        // fit-content sizes to the canvas's intrinsic `width` prop —
+        // which is exactly what overflowed narrow phones: the wrapper
+        // itself grew to 480px, so the canvas's own maxWidth:100%
+        // resolved against an already-overflowing parent. Cap the
+        // wrapper too; the flex-column children then shrink with it.
         width: "fit-content",
+        maxWidth: "100%",
       }),
       [],
     );
     const canvasStyle: CSSProperties = useMemo(
       () => ({
         width,
+        // Never overflow a narrow container (phone signing surface) —
+        // the bitmap keeps its logical resolution and the pointer
+        // handlers already rescale via getBoundingClientRect, so CSS
+        // shrink is loss-free for drawing accuracy.
+        maxWidth: "100%",
         height,
         border: "1px solid var(--ck-border-subtle, #d4d4d8)",
         borderRadius: "var(--ck-radius-sm, 6px)",
@@ -409,6 +420,8 @@ export const SignaturePad = forwardRef<SignaturePadHandle, SignaturePadProps>(
         fontSize: 14,
         fontFamily: "inherit",
         width,
+        maxWidth: "100%",
+        boxSizing: "border-box",
       }),
       [width],
     );