Merge pull request LambdaTest#1166 from Ishavyas9/DocStage

storylane demo added

Author: Ishavyas9

docs/smartui-pdf-comparison.md

@@ -62,18 +62,15 @@ In the following section, we will walk you through the process of conducting you
 
 ## Getting Started with PDF Comparison
 
-  <iframe
-  src="https://app.storylane.io/share/cq92opbjnlxu"
-  width="100%"
-  height="100%"
-  allowFullScreen
-  loading="lazy"
-  importance="low"
-  title="LambdaTest Automation Testing Demo"
-  className="storylane-iframe"
-></iframe>
 
 
+<div className="storylane-iframe">
+  <script async src="https://js.storylane.io/js/v2/storylane.js"></script>
+  <div className="sl-embed">
+    <iframe loading="lazy" className="sl-demo" src="https://app.storylane.io/demo/czorj4fbzohf?embed=inline" name="sl-embed" allow="fullscreen" allowfullscreen></iframe>
+  </div>
+</div>
+
 ## Step 1: Establishing a SmartUI Project
 
 To initiate a SmartUI PDF Comparison Project, adhere to the following instructions:

src/css/custom.css

@@ -1881,4 +1881,5 @@ table th:not(:last-child), table td:not(:last-child){border-right: 1px solid #d4
 
 .support_container{display: flex;gap:100px}
 .docusaurus-theme-github-codeblock .theme-code-block{max-height: 500px;overflow: auto;}
-.storylane-iframe{min-height: 700px; margin-top: 50px; border-radius: 20px; margin: auto; max-width: 100%;}
+.storylane-iframe{position:relative;padding-bottom:calc(45.26% + 25px);width:100%;height:0;transform:scale(1)}
+.storylane-iframe .sl-demo{position:absolute;top:0;left:0;width:100%!important;height:100%!important;border:1px solid rgba(63,95,172,0.35);box-shadow: 0px 0px 18px rgba(26, 19, 72, 0.15);border-radius:10px;box-sizing:border-box;}