@licklist/design 0.44.507 → 0.44.509

package/dist/snippet/snippet-template/SnippetTemplate.js

@@ -1 +1 @@
-"use strict";Object.defineProperty(exports,"__esModule",{value:!0});var e,r=require("react"),t=(e=r)&&"object"==typeof e&&"default"in e?e.default:e,i=require("./context/snippetTemplate.js"),l=require("./context/snippetTemplateLoading.js"),n=require("./context/snippetTemplateView.js"),a=require("./form/SnippetTemplateForm.js"),o=require("./preview/Preview.js");exports.SnippetTemplate=function(e){var s=e.isLoading,p=e.defaultValues,m=e.onSubmit,u=e.hasPermission,c=e.serverErrors,d=e.providerHasMap,v=void 0!==d&&d,f=r.useRef(null);return t.createElement(l.SnippetTemplateLoadingContextProvider,null,t.createElement(i.SnippetTemplateContextProvider,{defaultValues:p},t.createElement(n.SnippetTemplateViewContextProvider,null,t.createElement("div",{ref:f,className:"d-flex flex-column-reverse flex-sm-row"},t.createElement("div",{className:"d-flex flex-grow-1"},t.createElement(o.Preview,{onSettingClick:function(){f.current&&f.current.scrollIntoView({behavior:"smooth",block:"start"})},providerHasMap:v})),t.createElement("div",{className:"d-flex flex-column flex-grow-0 mx-4 mb-4"},t.createElement(a.SnippetTemplateForm,{isLoading:s,onSubmit:m,hasPermission:u,serverErrors:c,providerHasMap:v}))))))};
+"use strict";Object.defineProperty(exports,"__esModule",{value:!0});var e,r=require("react"),t=(e=r)&&"object"==typeof e&&"default"in e?e.default:e,i=require("./context/snippetTemplate.js"),l=require("./context/snippetTemplateLoading.js"),o=require("./context/snippetTemplateView.js"),a=require("./form/SnippetTemplateForm.js"),n=require("./preview/Preview.js");exports.SnippetTemplate=function(e){var s=e.isLoading,p=e.defaultValues,m=e.onSubmit,u=e.hasPermission,c=e.serverErrors,d=e.providerHasMap,v=void 0!==d&&d,f=r.useRef(null);return t.createElement(l.SnippetTemplateLoadingContextProvider,null,t.createElement(i.SnippetTemplateContextProvider,{defaultValues:p},t.createElement(o.SnippetTemplateViewContextProvider,null,t.createElement("div",{ref:f,className:"d-flex flex-column-reverse flex-sm-row overflow-auto"},t.createElement("div",{className:"d-flex flex-grow-1"},t.createElement(n.Preview,{onSettingClick:function(){f.current&&f.current.scrollIntoView({behavior:"smooth",block:"start"})},providerHasMap:v})),t.createElement("div",{className:"d-flex flex-column flex-grow-0 mx-4 mb-4"},t.createElement(a.SnippetTemplateForm,{isLoading:s,onSubmit:m,hasPermission:u,serverErrors:c,providerHasMap:v}))))))};

package/dist/styles/iframe-order-process/IframeOrderProcess.scss

@@ -202,7 +202,7 @@
 
   .step-numbers {
     font-weight: 500;
-    margin-left: 1rem;
+    margin: 0 1rem;
     color: $snippet-page-header-steps-inactive-step-body-color;
 
     .active-step {
@@ -225,6 +225,7 @@
     height: 2rem;
     transition: $color-transition;
     max-width: calc(100% - 12rem);
+    flex-grow: 1;
 
     .step {
       display: flex;
@@ -233,10 +234,12 @@
       margin: 0 0.5rem;
       z-index: 1;
       scroll-margin: 10rem;
+      flex-grow: 1;
 
       .number {
         text-align: center;
-        width: 3rem;
+        max-width: 3rem;
+        width: 100%;
         height: 0.25rem;
         line-height: 2.5rem;
         background: $snippet-page-header-steps-inactive-step-background-color;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@licklist/design",
-  "version": "0.44.507",
+  "version": "0.44.509",
   "repository": {
     "type": "git",
     "url": "git+ssh://git@bitbucket.org/artelogicsoft/licklist_design.git"

package/src/snippet/snippet-template/SnippetTemplate.tsx

@@ -44,7 +44,7 @@ export function SnippetTemplate({
         <SnippetTemplateViewContextProvider>
           <div
             ref={containerRef}
-            className="d-flex flex-column-reverse flex-sm-row"
+            className="d-flex flex-column-reverse flex-sm-row overflow-auto"
           >
             <div className="d-flex flex-grow-1">
               <Preview

package/src/styles/iframe-order-process/IframeOrderProcess.scss

@@ -202,7 +202,7 @@
 
   .step-numbers {
     font-weight: 500;
-    margin-left: 1rem;
+    margin: 0 1rem;
     color: $snippet-page-header-steps-inactive-step-body-color;
 
     .active-step {
@@ -225,6 +225,7 @@
     height: 2rem;
     transition: $color-transition;
     max-width: calc(100% - 12rem);
+    flex-grow: 1;
 
     .step {
       display: flex;
@@ -233,10 +234,12 @@
       margin: 0 0.5rem;
       z-index: 1;
       scroll-margin: 10rem;
+      flex-grow: 1;
 
       .number {
         text-align: center;
-        width: 3rem;
+        max-width: 3rem;
+        width: 100%;
         height: 0.25rem;
         line-height: 2.5rem;
         background: $snippet-page-header-steps-inactive-step-background-color;