@primestyleai/tryon 5.10.137 → 5.10.140

package/dist/storefront/primestyle-tryon.js

@@ -13571,6 +13571,75 @@ const STYLES$1 = `
   }
   .ps-tryon-drawer-clear:hover { color: var(--ps-error-color); }
 
+  /* ──────────────────────────────────────────────────────────────────
+     Mobile sizing for the My Profiles / History drawer. Desktop uses vw
+     units which collapse to 1–4 px on a 375 px phone. Override every
+     rule with px-based values so the list is actually readable.
+     ────────────────────────────────────────────────────────────────── */
+  @media (max-width: 768px) {
+    .ps-tryon-drawer { padding: 16px 14px; }
+    .ps-tryon-drawer-header { gap: 10px; padding-bottom: 12px; margin-bottom: 12px; }
+    .ps-tryon-drawer-back {
+      width: 36px; height: 36px; border-radius: 8px;
+    }
+    .ps-tryon-drawer-back svg { width: 18px; height: 18px; }
+    .ps-tryon-drawer-title { font-size: 17px; font-weight: 600; }
+    .ps-tryon-drawer-add-btn {
+      width: 32px; height: 32px; border-radius: 8px; font-size: 20px;
+    }
+    .ps-tryon-drawer-list { gap: 10px; }
+    .ps-tryon-drawer-empty { padding: 32px 16px; font-size: 14px; }
+
+    .ps-tryon-drawer-create {
+      padding: 14px;
+      border-radius: 10px;
+      font-size: 14px;
+      gap: 6px;
+      margin-bottom: 4px;
+    }
+    .ps-tryon-drawer-clear {
+      font-size: 13px; padding: 12px 0; margin-top: 6px;
+    }
+
+    .ps-tryon-profile-item {
+      gap: 12px; padding: 14px; border-radius: 12px;
+    }
+    .ps-tryon-profile-avatar {
+      width: 44px; height: 44px;
+    }
+    .ps-tryon-profile-avatar svg { width: 22px; height: 22px; }
+    .ps-tryon-profile-name { font-size: 15px; }
+    .ps-tryon-profile-detail { font-size: 12px; margin-top: 3px; }
+    .ps-tryon-profile-item > svg:last-child { width: 18px; height: 18px; }
+
+    .ps-tryon-history-item {
+      gap: 12px; padding: 12px; border-radius: 12px;
+    }
+    .ps-tryon-history-images { gap: 6px; }
+    .ps-tryon-history-thumb,
+    .ps-tryon-history-result-img {
+      width: 64px; height: 80px; border-radius: 8px;
+    }
+    .ps-tryon-history-product { font-size: 14px; line-height: 1.3; }
+    .ps-tryon-history-meta { font-size: 11px; margin-top: 4px; }
+    .ps-tryon-history-sizing { gap: 8px; margin-top: 6px; }
+    .ps-tryon-history-sizing-reason { font-size: 11px; }
+    .ps-tryon-history-size-badge {
+      min-width: 32px; height: 32px; padding: 0 10px; font-size: 12px;
+    }
+    .ps-tryon-history-sections { gap: 6px; margin-top: 6px; }
+    .ps-tryon-history-section-chip {
+      font-size: 11px; padding: 3px 8px; border-radius: 6px;
+    }
+    .ps-tryon-history-tryon-badge {
+      font-size: 10px; padding: 2px 7px; border-radius: 5px; margin-top: 6px;
+    }
+    .ps-tryon-history-delete {
+      width: 32px; height: 32px; border-radius: 6px;
+    }
+    .ps-tryon-history-delete svg { width: 16px; height: 16px; }
+  }
+
   /* Profile detail modal — portaled to body, sits ABOVE the main modal
      overlay (which has z-index 2147483647). Equal z-index + later DOM
      order means this stacks on top. Same trick as the language dropdown. */
@@ -17685,7 +17754,8 @@ const STYLES$1 = `
   }
   .ps-msd-size-pill {
     min-width: 48px;
-    padding: 10px 16px;
+    max-width: 100%;
+    padding: 10px 14px;
     background: transparent;
     border: 1.5px solid var(--ps-border-color);
     border-radius: 8px;
@@ -17693,6 +17763,14 @@ const STYLES$1 = `
     color: var(--ps-text-primary);
     cursor: pointer;
     transition: all 0.15s;
+    /* Long compound labels like "MISSY 8 / Standard" need to wrap or
+       shrink rather than overflow the row. */
+    white-space: normal;
+    line-height: 1.2;
+    word-break: keep-all;
+  }
+  @media (max-width: 768px) {
+    .ps-msd-size-pill { font-size: 12px; padding: 9px 11px; min-width: 0; }
   }
   .ps-msd-size-pill:hover {
     border-color: var(--ps-accent);
@@ -20224,7 +20302,8 @@ function SectionDetailView({
   const backendAvailableSizes = secAny?.availableSizes || [];
   const backendAvailableLengths = secAny?.availableLengths || [];
   const finalDisplayLength = selectedLength || backendLength;
-  const finalAllSizes = backendAvailableSizes.length > 0 ? backendAvailableSizes : chartSizes;
+  const allSizesKeys = allSizes ? Object.keys(allSizes) : [];
+  const finalAllSizes = allSizesKeys.length > 0 ? allSizesKeys : backendAvailableSizes.length > 0 ? backendAvailableSizes : chartSizes;
   const visibleSizes = (() => {
     if (finalAllSizes.length <= 3) return finalAllSizes;
     const idx = finalAllSizes.indexOf(recSize);

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@primestyleai/tryon",
-  "version": "5.10.137",
+  "version": "5.10.140",
   "description": "PrimeStyle Virtual Try-On SDK — React component & Web Component",
   "type": "module",
   "main": "dist/primestyle-tryon.js",