face-age 2.4.7 → 2.4.9

package/dist/faceage.css

@@ -2471,7 +2471,6 @@ body {
 }
 
 /* History detail page (result + routines + products) */
-#faceAge-module-body.section:has(.history-detail-page),
 #faceAge-module-body.widget:has(.history-detail-page),
 #faceAge-module-body.modal:has(.history-detail-page) {
     display: flex;
@@ -2481,16 +2480,19 @@ body {
     overflow: hidden;
 }
 
+#faceAge-module-body.section:has(.history-detail-page) {
+    display: block;
+    height: auto;
+    min-height: 100%;
+    overflow: visible;
+}
+
 .history-detail-page {
     position: relative;
     display: flex;
     flex-direction: column;
-    flex: 1 1 0%;
     align-self: stretch;
     width: 100%;
-    height: 100%;
-    min-height: 0;
-    overflow: hidden;
     --history-detail-gutter: 16px;
     --skin-status-good: #22C55E;
     --skin-status-fair: #F59E0B;
@@ -2502,6 +2504,21 @@ body {
         background-color: #fff;
 }
 
+.history-detail-page.modal,
+.history-detail-page.widget {
+    flex: 1 1 0%;
+    height: 100%;
+    min-height: 0;
+    overflow: hidden;
+}
+
+.history-detail-page.section {
+    flex: 0 0 auto;
+    height: auto;
+    min-height: 0;
+    overflow: visible;
+}
+
 .history-detail-page .history-detail-back {
     position: sticky;
     top: 0;
@@ -2874,14 +2891,25 @@ body {
 }
 
 .history-detail-page .history-detail-content {
+    box-sizing: border-box;
+    padding: 8px var(--history-detail-gutter) 112px;
+}
+
+.history-detail-page.modal .history-detail-content,
+.history-detail-page.widget .history-detail-content {
     flex: 1 1 auto;
     min-height: 0;
     overflow-x: hidden;
     overflow-y: auto;
     -webkit-overflow-scrolling: touch;
     scrollbar-gutter: stable;
-    padding: 8px var(--history-detail-gutter) 112px;
-    box-sizing: border-box;
+}
+
+.history-detail-page.section .history-detail-content {
+    flex: 0 0 auto;
+    height: auto;
+    min-height: 0;
+    overflow: visible;
 }
 
 .history-detail-page .history-detail-section {
@@ -3158,7 +3186,8 @@ body {
     position: absolute;
     z-index: 50;
     left: 50%;
-    bottom: 12px;
+    top: 0;
+    bottom: auto;
     width: min(620px, calc(100% - 24px));
     gap: 3px;
     margin: 0;
@@ -3174,11 +3203,20 @@ body {
     backdrop-filter: blur(18px) saturate(155%);
     -webkit-backdrop-filter: blur(18px) saturate(155%);
     box-sizing: border-box;
+    transform: translate3d(-50%, 0, 0);
+    will-change: transform;
+}
+
+.history-detail-page.modal .history-detail-tabs-header {
+    position: fixed;
+    top: auto;
+    bottom: 12px;
     transform: translateX(-50%);
+    will-change: auto;
 }
 
-.history-detail-page.has-faceage-watermark .history-detail-tabs-header {
-    bottom: 20px;
+.history-detail-page.modal.has-faceage-watermark .history-detail-tabs-header {
+    bottom: 28px;
 }
 
 .history-detail-page .history-detail-tab-active-pill {
@@ -3248,13 +3286,26 @@ body {
     flex: 1 1 auto;
     align-self: stretch;
     width: 100%;
+    background: #fff;
+}
+
+/* Modal/widget: lock to iframe viewport and scroll inside. */
+.analysis-result-page.modal,
+.analysis-result-page.widget {
     height: 100%;
     min-height: 0;
     overflow: hidden;
-    background: #fff;
 }
 
-.analysis-result-page .analysis-result-panel {
+/* Section: grow with content so updateDimension can resize the iframe. */
+.analysis-result-page.section {
+    height: auto;
+    min-height: 100%;
+    overflow: visible;
+}
+
+.analysis-result-page.modal .analysis-result-panel,
+.analysis-result-page.widget .analysis-result-panel {
     flex: 1 1 auto;
     min-height: 0;
     height: 100%;
@@ -3262,20 +3313,40 @@ body {
     flex-direction: column;
 }
 
-.analysis-result-page .recommendation_products,
-.analysis-result-page .recommendation_products > div,
-.analysis-result-page .recommendation_modal_window {
+.analysis-result-page.section .analysis-result-panel {
+    flex: 0 0 auto;
+    height: auto;
+    min-height: 0;
+    display: block;
+}
+
+.analysis-result-page.modal .recommendation_products,
+.analysis-result-page.modal .recommendation_products > div,
+.analysis-result-page.modal .recommendation_modal_window,
+.analysis-result-page.widget .recommendation_products,
+.analysis-result-page.widget .recommendation_products > div,
+.analysis-result-page.widget .recommendation_modal_window {
     height: 100%;
     min-height: 0;
 }
 
-.analysis-result-page .recommendation_modal_window {
+.analysis-result-page.modal .recommendation_modal_window,
+.analysis-result-page.widget .recommendation_modal_window {
     display: flex;
     flex-direction: column;
     overflow: hidden !important;
     max-height: 100%;
 }
 
+.analysis-result-page.section .recommendation_products,
+.analysis-result-page.section .recommendation_products > div,
+.analysis-result-page.section .recommendation_modal_window {
+    height: auto;
+    min-height: 100%;
+    max-height: none;
+    overflow: visible !important;
+}
+
 .analysis-result-page .recommendation_modal_window .header_tools,
 .analysis-result-page .recommendation_modal_window .slider_header {
     flex: 0 0 auto;
@@ -3298,8 +3369,10 @@ body {
     margin-top: 16px;
 }
 
-.analysis-result-page .recommendation_modal_window > .body,
-.analysis-result-page .analysis-result-scan-scroll {
+.analysis-result-page.modal .recommendation_modal_window > .body,
+.analysis-result-page.modal .analysis-result-scan-scroll,
+.analysis-result-page.widget .recommendation_modal_window > .body,
+.analysis-result-page.widget .analysis-result-scan-scroll {
     flex: 1 1 auto;
     min-height: 0;
     overflow-x: hidden;
@@ -3310,6 +3383,17 @@ body {
     box-sizing: border-box;
 }
 
+.analysis-result-page.section .recommendation_modal_window > .body,
+.analysis-result-page.section .analysis-result-scan-scroll {
+    flex: 0 0 auto;
+    height: auto;
+    min-height: 0;
+    overflow: visible;
+    padding-top: 16px;
+    padding-bottom: 112px;
+    box-sizing: border-box;
+}
+
 .analysis-result-page .analysis-result-scan-scroll {
     scrollbar-gutter: stable;
     padding: 16px 16px 112px;
@@ -3332,7 +3416,8 @@ body {
     position: absolute;
     z-index: 1000;
     left: 50%;
-    bottom: 12px;
+    top: 0;
+    bottom: auto;
     width: min(620px, calc(100% - 24px));
     gap: 3px;
     margin: 0;
@@ -3348,11 +3433,21 @@ body {
     backdrop-filter: blur(18px) saturate(155%);
     -webkit-backdrop-filter: blur(18px) saturate(155%);
     box-sizing: border-box;
+    transform: translate3d(-50%, 0, 0);
+    will-change: transform;
+    pointer-events: auto;
+}
+
+.analysis-result-page.modal .history-detail-tabs-header {
+    position: fixed;
+    top: auto;
+    bottom: 12px;
     transform: translateX(-50%);
+    will-change: auto;
 }
 
-.analysis-result-page.has-faceage-watermark .history-detail-tabs-header {
-    bottom: 20px;
+.analysis-result-page.modal.has-faceage-watermark .history-detail-tabs-header {
+    bottom: 28px;
 }
 
 .analysis-result-page .history-detail-tab-active-pill {
@@ -3422,14 +3517,17 @@ body {
 
 @media (max-width: 768px) {
     .analysis-result-page .history-detail-tabs-header {
-        bottom: 8px;
         width: calc(100% - 16px);
         padding: 6px;
         border-radius: 19px;
     }
 
-    .analysis-result-page.has-faceage-watermark .history-detail-tabs-header {
-        bottom: 18px;
+    .analysis-result-page.modal .history-detail-tabs-header {
+        bottom: 8px;
+    }
+
+    .analysis-result-page.modal.has-faceage-watermark .history-detail-tabs-header {
+        bottom: 24px;
     }
 
     .analysis-result-page .history-detail-tab-active-pill {
@@ -3916,12 +4014,14 @@ body {
 .history-detail-page .history-detail-embed .routines_products {
     background: transparent !important;
     min-height: auto !important;
+    height: auto !important;
 }
 
 .history-detail-page .history-detail-embed .recommendation_modal_window {
     background: transparent;
     box-shadow: none;
     height: auto !important;
+    min-height: 0 !important;
     max-height: none !important;
     overflow: visible !important;
 }
@@ -4006,7 +4106,7 @@ body {
 
     .routine:not(.routine--product_row) .products {
         display: grid;
-        grid-template-columns: repeat(3, minmax(0, 1fr));
+        grid-template-columns: repeat(4, minmax(0, 1fr));
         align-items: stretch;
         gap: 10px;
         margin: 0 0 10px;
@@ -4230,14 +4330,17 @@ body {
     }
 
     .history-detail-page .history-detail-tabs-header {
-        bottom: 8px;
         width: calc(100% - 16px);
         padding: 6px;
         border-radius: 19px;
     }
 
-    .history-detail-page.has-faceage-watermark .history-detail-tabs-header {
-        bottom: 18px;
+    .history-detail-page.modal .history-detail-tabs-header {
+        bottom: 8px;
+    }
+
+    .history-detail-page.modal.has-faceage-watermark .history-detail-tabs-header {
+        bottom: 24px;
     }
 
     .history-detail-page .history-detail-tab-active-pill {