@base44/app-plugin-commerce 0.6.2 → 0.6.3

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@base44/app-plugin-commerce",
-  "version": "0.6.2",
+  "version": "0.6.3",
   "description": "Base44 Commerce plugin — entities, backend functions, shared commerce engine, admin UI and the commerce skill, shipped as copyable source",
   "keywords": [
     "base44",

package/src/commerce/storefront/AddressFields.jsx

@@ -13,7 +13,10 @@ import { REQUIRED_BILLING_FIELDS } from "./address";
  * `autoComplete` tokens are what make browser autofill work, and the server's
  * "we don't ship there" belongs on the country field.
  *
- * It renders semantic fields and nothing else — no CSS ships with it. Every
+ * It renders semantic fields and nothing else. No CSS ships with it bar one
+ * containment guard — `max-width: 100%` on the selects, because their
+ * intrinsic width is the longest country name and an unstyled checkout would
+ * otherwise scroll sideways on a phone. It caps; it never sizes. Every
  * element carries `data-part` (`field`, `label`, `control`, `required`,
  * `error`) plus `data-key`/`data-span`/`data-invalid`, so the store's own
  * classes attach via `className`/`classes` props or `[data-part]` selectors.
@@ -116,6 +119,13 @@ export function AddressFields({
               <select
                 data-part="control"
                 className={classes?.control}
+                // The one style that ships: an unconstrained <select> takes the
+                // intrinsic width of its widest option, and the country list
+                // ("United Arab Emirates") is wider than a phone. Without this
+                // the checkout scrolls sideways on mobile before the store has
+                // written a single class. Caps only — any width the store sets
+                // still applies.
+                style={{ maxWidth: "100%" }}
                 aria-invalid={invalid || undefined}
                 aria-required={f.required || undefined}
                 {...dom}